Account
Dashboard
Courses
Groups Calendar Inbox History Help
!
INF131 W21: HCI Assignments Assignment #4: Generate Interface Concepts
Winter 2021
Home Announcements Syllabus Modules Assignments People
Grades
Zoom
Assignment #4: Generate Interface Concepts
Submit Assignment
Due Friday by 11:59pm
Points 75
Submi!ng
a file upload
One of the key skills for a UX professional is to be able to quickly generate design ideas. In this assignment, you will sketch ideas and then generate a storyboard and wireframes in response to a design prompt.
Assignment Overview
Your Task: generate ini!al UX design concepts for a design prompt
Learning Goals: By the end of this assignment, the student will have gained experience with:
genera!ng UX design concepts
envisioning user experiences in specific contexts for a specific group of users documen!ng and communica!ng design concepts
Deliverable: A document that illustrates and briefly explains the design concepts. Design Brief
Your task is to come up with a design concept for a mobile app in response to a design prompt.
Your prompt is:
Design a mobile app for [choose one from column A] for [choose one from column B] where the user’s primary goal is [choose one from column C].
A Food delivery could refer to ge#ng food from a restaurant to a person, or from a bowl to a mouth, or from a field to a restaurant, or any other movement of food products.
B Matchmaking could refer to da!ng, but could also refer to finding others with shared interests, necessary exper!se (e.g. job searching), access to resources (e.g. I have lots of chocolate, I’m looking for someone with lots of peanut bu$er) or various other contexts than roman!c rela!onships.
C Recording system refers to anything used to document events. It could be a video camera, but it could also be a court stenographer.
Process
To develop your concept, you should go through three steps:
Step 1. Sketching
Once you have chosen your prompt, you should sketch ideas. This is basically your brainstorming phase. You should quickly sketch different ideas that could respond to your prompt. You should sketch at least 10 (or more) ini!al ideas, with the goal that each one is a dis!nct idea. These can be small sketches – 10 or more could fit on the same page. You should do this quickly – aim for 15- 20 minutes. If you start feeling stuck, try some “far out” concepts. There are no bad ideas at this early stage.
A&er you have completed your first round of sketching, you should reflect on the set of sketches, and select the most promising three sketches. For each of these, spend another 10 minutes or so sketching at least 5 varia!ons on that same approach. Again, these sketches do not need to be large. The goal of this phase is to be$er understand the feasibility of the concept.
At this point, you should choose one sketch (or a small number of sketches) that provide a path forward for your design.
By the end of this phase, you should have spent 45-50 minutes sketching (15-20 min. brainstorming + 3 x 10 minutes development) and have at least 25 sketches.
All sketches should be done by hand on paper. For this step, do not use digital tools. Step 2. Storyboarding
You should create a storyboard that illustrates the experience of using the system you designed. You can show the en!re user journey through the app, or you can illustrate a smaller task.
Your storyboard should have 6-8 panels. The storyboard should focus on the user experience, not on the interface itself. The storyboard should show the task in context. Specifically, it should show:
Characters (users) Se#ng and environment Task sequence
What leads a person to use the technology? What is the mo!va!on? What are the key steps or ac!ons?
What is the outcome?
Emo!ons
What are people feeling before, during, and a&er using the system?
The storyboard should not be overly detailed – use just enough detail to give a sense of the items above. We will not be grading for ar!s!c merit or drawing skill – s!ck figures and simple diagrams are OK. It is OK to use text cap!ons, but keep them short and to the point.
It is OK to use a digital tool to create your storyboard if you wish. However, paper and pen/pencil will likely be easier and are in many ways preferable.
Step 3. Develop a Wireframe in Figma
If you have not done so yet, you should sign up for the free educa!on plan in Figma.
Next, create a wireframe for 3 pages of your app in Figma. Your wireframes should be medium fidelity. They should not include high-fidelity look and feel (colors, fonts, graphics) or real content. Annotate the wireframes so that it is clear to the viewer what they are looking at and what the interface can do.
Be sure that at least one (and preferably more) of the pages you choose to wireframe responds directly to the design prompt. In other words, at least one page should be in some way tailored not just to the task at hand, but also to the user popula!on and their overall goal as stated.
Deliverable
Your deliverable will be a document that presents and describes your work. It is not necessary to structure this assignment as a report, but your design concepts should be clear. It is OK to use bullet points or lists instead of full paragraphs.
Your document should have the following components:
Your name, !tle, and date for the assignment
A statement of the prompt you were designing for, along with a brief summary (100-200 words) describing your overall design concept.
Your sketches, storyboard, and wireframes. Take pictures of any paper drawings or export image files from Figma and include them in your document. Ensure that they are sized appropriately and have enough contrast that they will be readable in your document. Provide appropriate labels.
Include a link to your wireframe in Figma. Make sure the link is viewable by anyone.
As with any assignment, if you seek inspira!on from other sources, you should reference them. This applies to designs. It is ok to borrow from designs you like, from your favorite apps or websites. But we ask that you reference where you get inspira!on from.
Grading
Grading will be based on three criteria:
How well does the proposed app respond to the prompt? This criteria means that your design should address all three parts of the prompt (the task, the user, and the goal). You can address this in your text summary to help the grader recognize what you have done, but it should be clear in the storyboard and wireframes that you have considered the context as well as the task.
Is the design sensible and well laid out? Is it well presented?
How well do the sketches, storyboard, and wireframe communicate the design ideas?
We will not grade the ar”s”c quality of your drawings. Your sketches and storyboard do not need to be polished, but they should be clear enough that we can understand what you are showing.
Figma provides sample wireframes, and there are many examples available on the web. However, these should be used as inspira!on and examples, not as shortcuts. Your sketches, storyboard and wireframe should be made from scratch by you, not by copying examples and modifying them. Just like you do for programming classes or wri!ng classes, everything you produce here should be created by you beginning to end. We want to see your independent work. Thus, the rubric includes this criteria: ¡°Work does not rely on exis!ng examples for the structure and interac!ons; shows independent work in crea!ng the applica!on tailored to the design prompt¡±.
Update: Wireframe Clarifica!on (February 27, 2021)
I want to make a couple of clarifica!ons regarding your wireframes for this assignment. If you have already submi#ed and did not follow the guidance below, you should revise your document and resubmit.
Appropriate Level of Detail
When you create your wireframe, we want to see that you are able to create an appropriate abstract representa!on that communicates func!on and layout while using placeholders correctly. As such, we do not want you to provide high-fidelity mockups. It’s OK to include text on
font like Redacted
links or to dis!nguish specific interface elements, but it should be flat and simple. In other words, if you use color, it should be to help show structure or func!on, not to show what the design will eventually look like.
The image below provides a quick guide for the level of detail we are expec!ng.
If you want to include high-fidelity mockups in addi!on to your wireframes you can, but they are not required and will not be graded.
For a deeper dive into the appropriate level of detail for wireframes, check out “The Right (and
When you prepare your deliverable, you should include images of your wireframes in your document. You should also include a link to your wireframes on Figma. You must include both.
Instruc!ons for how to export images from Figma for inclusion in your deliverable can be found at
h$ps://help.figma.com/hc/en-us/ar!cles/360040028114
Column A
Column B
Column C
food deliveryA
astronauts
entertainment
health monitor
babies
safety
matchmakingB
amusement park patrons
exploring new things
transporta!on
nurses
efficiency
recordingC
ar!sts
style/fashion
bu$ons or menus, but any text content should use dummy text like Lorem Ipsum
or a specialized . Similarly, it’s OK to use small amounts of color to show func!onality like
.
Include Your Wireframes In Your Document
Wrong) Way to Wireframe” by Joe Natoli
Interface Concepts Assignment
Criteria
Ra”ngs
Pts
Sketches
At least 25 sketches as described in the assignment. Sketches are completed on paper. Ini!al sketches represent dis!nct and innova!ve ideas. Follow-up sketches show good concept development. Sketches display thought and clarity of design concept as well as considera!on of how users will interact with the app. Sketches show an appropriate level of detail and refinement.
20 to >18.0 pts Dis”nguished
Completes all requirements from this criteria with excellence. Goes above and beyond what is required. Work demonstrates significant depth of understanding.
18 to >14.0 pts Proficient
Completes all requirements from this criteria to an acceptable level of quality and depth of understanding.
14 to >5.0 pts Marginal
Does not meet all requirements from this criteria. Work needs improvement in quality or demonstrates lack of understanding.
5 to >0 pts Unacceptable
20 pts
Storyboard
Storyboard has 6-8 panels. Storytelling is sensible and clear. Storyboard provides an clear and engaging sense of the user experience, including characters, se#ng, task sequence, and emo!on. Storyboard shows excellent level of refinement and detail. Storyboard responds well to the design prompt.
20 to >18.0 pts Dis”nguished
Completes all requirements from this criteria with excellence. Goes above and beyond what is required. Work demonstrates significant depth of understanding.
18 to >14.0 pts Proficient
Completes all requirements from this criteria to an acceptable level of quality and depth of understanding.
14 to >5.0 pts Marginal
Does not meet all requirements from this criteria. Work needs improvement in quality or demonstrates lack of understanding.
5 to >0 pts Unacceptable
20 pts
Wireframes
Wireframes are provided for at least 3 pages of the app. Wireframes use visual elements, placeholders, text, and standard components appropriately. Layout is sensible and clear. Wireframes show appropriate level of refinement and detail. Wireframes respond well to the design prompt. Work does not rely on exis!ng examples for the structure and interac!ons; shows independent work in crea!ng the applica!on tailored to the design prompt.
20 to >18.0 pts Dis”nguished
Completes all requirements from this criteria with excellence. Goes above and beyond what is required. Work demonstrates significant depth of understanding.
18 to >14.0 pts Proficient
Completes all requirements from this criteria to an acceptable level of quality and depth of understanding.
14 to >5.0 pts Marginal
Does not meet all requirements from this criteria. Work needs improvement in quality or demonstrates lack of understanding.
5 to >0 pts Unacceptable
20 pts
Presenta!on
Summary statement is of correct length and clearly describes the design concept. Appropriate forma#ng, consistent look and feel, appropriate use of font size, emphasis, headings, etc. Images are sized appropriately, are readable, and well labeled. Correct URL to Figma wireframe with appropriate permissions (viewable). Clear communica!on throughout. References provided as necessary.
15 to >13.0 pts Dis”nguished
Completes all requirements from this criteria with excellence. Goes above and beyond what is required.
13 to >10.0 pts Proficient
Completes all requirements from this criteria to an acceptable level of quality.
10 to >5.0 pts Marginal
Does not meet all requirements from this criteria. Needs improvement.
5 to >0 pts Unacceptable
15 pts
Total Points: 75
“Previous Next#