Upload
yashar2500
View
216
Download
0
Embed Size (px)
Citation preview
8/9/2019 Intro to the Design of Everyday Things, Final Project - Project Instructions
1/3
Intro to the Design of Everyday Things, Final Project:
InstructionsCreate a user interface for a wallet-sized time bank
Your Task:
This project consists of designing a user interface (UI) for a mobile time-bank device that fits in your
wallet. A time-bank allows people to exchange their time for another person’s time. To keep things
simple, everyone’s time has equal value: my hour is worth the same amount as your hour. This is an
open-ended project with many creative directions that you can take it. Follow the instructions below and
think big.
If you are enrolled in the full course, your work will be evaluated using the rubric included in this
document, where you will also find instructions for how to submit your project. If you are taking the free
courseware, you can look at the rubric as a guide while creating your project, but please understand that
your work will not be evaluated by the Udacity Coach team. Have fun!
STEP 1 - UNDERSTAND PROJECT AND GATHER MATERIALSWatch the project introductory videos to better understand how your time-bank should work. Also gather
the following materials:
● Pens: Thick and thin and in different colors
● At least one highlighter
● Multiple sheets of paper - as large as you can find
● Several printouts of the Project 3 templates, which are located here
● A straight edge (like a ruler) for drawing
STEP 2 - CREATE SKETCHESIn this step you will explore how your time-bank might behave and look. More specifically:
● Sketch ten ideas for how your time-bank app might use signifiers to support an accurate
conceptual model for adding and subtracting time.
● Sketch five ideas for how your time-bank app might support at least five independent aspects of
discoverability. These can be specifically related to a core function/service that the app provides
or more generally related to how a user might navigate within the app.
● Sketch five ideas for how your time-bank app might provide at least five independent instances of
feedback. These can be specifically related to a core function/service that the app provides or
more generally related to how a user might navigate within the app.
STEP 3 - CREATE A STORYBOARD OF WIREFRAMESNow you are going to use your sketches to inform wireframes that summarize what each screen of your
time-bank will look like and the major steps users will take when interacting with it. As you assemble
your wireframes, make sure they address the seven questions users ask when crossing the Gulfs of
Execution and Evaluation. Importantly, you are not required to use the exact sketches from Step 2; you
should feel free to expand and evolve these ideas into a larger (and more cohesive) experience
represented by your wireframes.
https://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fcontent.udacity-data.com%2Fcourse%2Fdesign101%2Fdesign_Lesson_3_project_rubric.pdf&sa=D&sntz=1&usg=AFQjCNH-JEMgfnlwGaScQ5vM5PHKtWh7pghttps://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fcontent.udacity-data.com%2Fcourse%2Fdesign101%2Ftemplates_for_Lesson_3_Project.pdf&sa=D&sntz=1&usg=AFQjCNHc2SYQKr_Dz0Muvn-v4OuZKFouhQhttps://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fcontent.udacity-data.com%2Fcourse%2Fdesign101%2Fdesign_Lesson_3_project_rubric.pdf&sa=D&sntz=1&usg=AFQjCNH-JEMgfnlwGaScQ5vM5PHKtWh7pghttps://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fcontent.udacity-data.com%2Fcourse%2Fdesign101%2Fdesign_Lesson_3_project_rubric.pdf&sa=D&sntz=1&usg=AFQjCNH-JEMgfnlwGaScQ5vM5PHKtWh7pghttps://www.google.com/url?q=https%3A%2F%2Fwww.udacity.com%2Fcourse-experience&sa=D&sntz=1&usg=AFQjCNGUkk4qF5hcN1lECMWxzXtYy-soGg
8/9/2019 Intro to the Design of Everyday Things, Final Project - Project Instructions
2/3
STEP 4 - GET USER FEEDBACKNext ask three to five people to provide feedback on your wireframes. Try to get a variety of people of
different ages and backgrounds, not just folks like you. To ensure good feedback be sure to pay
attention to the “Tips on Collecting Feedback” that we learned about in the Final Project videos. You will
be surprised by what you learn - make sure to take ample notes!
STEP 5 - REFINE YOUR DESIGNNow that you’ve collected user feedback, it is time to use what you learned to inform another round of
iteration. Using a fresh set of templates, redraw your wireframes. At this stage you should be quite
inspired by what you learned from users and have clear ways to improve feedback and discoverability.
You might also have some ideas for refining order and hierarchy of your time-bank screens.
STEP 6 - SHARE YOUR DESIGNThe final component of this project involves creating a debrief in PDF format that includes the following
information:
● Page 1: Project title, date, and your name
● Page 2: Ten sketches (and any accompanying text) of your conceptual models from Step 2.● Page 3: Discoverability, before user testing: a multiple screen sequence (flow) that shows (with
images, text, and callout bubbles) how you handled discoverability and the gulf of execution. A
flow demonstrates how one screen/sketch leads to the next, tying together all relevant aspects
of discoverability. Use descriptive text to accompany flows for any explanation. The screens you
show here should be your FIRST flows, before the round of user feedback in steps 4 and 5.
● Page 4: Discoverability, after user testing: see Page 3 description for Discoverability. The
screens you show here should be your FINAL flows, after the round of user feedback in steps 4
and 5.
● Page 5: Feedback, before user testing: a multiple screen sequence (flow) that shows (with
images, text, and callouts) how the feedback you designed helps people understand the resultsof their actions within the app, crossing the gulf of evaluation. A flow demonstrates how one
aspect of feedback is connected to another relevant aspect. Use descriptive text to accompany
these flows for any explanation. The screens you show here should be your FIRST flows, before
the round of user feedback in steps 4 and 5.
● Page 6: Feedback, after user testing: see Page 5 description for Feedback. The screens you
show here should be your FINAL flows, after the round of user feedback in steps 4 and 5.
● Page 7: A summary of what you learned by evaluating your designs with others. Be sure to
include how many users you sampled, how many rounds of iteration you performed, what kind
reactions your design received from users, what specific modifications you thought were
important, etc.Before compiling your report, be sure to look at the rubric that is used to evaluate these projects so that
you have a better idea of what to strive towards in each section.
STEP X - GOING BEYOND PAPERPaper is a great prototyping tool, superior to most digital tools in terms of flexibility, speed and ease of
use. However the next step, when you need more animation and fidelity to progress, is to move to
something interactive. To do that here are some tools for mid to high-fi prototyping:
Hybrid paper/digital tools allow you take a picture of a paper sketch and animate it:
https://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fcontent.udacity-data.com%2Fcourse%2Fdesign101%2Fdesign_Lesson_3_project_rubric.pdf&sa=D&sntz=1&usg=AFQjCNH-JEMgfnlwGaScQ5vM5PHKtWh7pghttps://www.google.com/url?q=https%3A%2F%2Fwww.udacity.com%2Fcourse%2Fviewer%23!%2Fc-design101%2Fl-435068566%2Fm-427948615&sa=D&sntz=1&usg=AFQjCNH1V6c72nrfpYMuFHQjXw7ZvNyD6Q
8/9/2019 Intro to the Design of Everyday Things, Final Project - Project Instructions
3/3
● Pop - https://popapp.in/
● Flinto - https://www.flinto.com/
● Apple Keynote or MS PowerPoint or Google presentation - http://keynotopia.com/guides/
● Balsamiq - http://balsamiq.com/
If you do not know how to code, here are some visual tools that generate HTML5:
● Tumult Hype - http://tumult.com/hype/
● Adobe Edge Animate - http://html.adobe.com/edge/animate/ ● Google’s Web Designer - https://www.google.com/webdesigner
When you are finished, upload and share your work in the forum. If you’re enrolled in the full
course, follow the instructions in the Submission and Evaluation Information document
Congratulations!
https://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fcontent.udacity-data.com%2Fcourse%2Fdesign101%2Fdesign_Lesson_3_project_rubric.pdf&sa=D&sntz=1&usg=AFQjCNH-JEMgfnlwGaScQ5vM5PHKtWh7pghttps://www.google.com/webdesignerhttp://www.google.com/url?q=http%3A%2F%2Fhtml.adobe.com%2Fedge%2Fanimate%2F&sa=D&sntz=1&usg=AFQjCNHHeKyr5sO_GdCKHrnYTwqkSAl80ghttp://www.google.com/url?q=http%3A%2F%2Ftumult.com%2Fhype%2F&sa=D&sntz=1&usg=AFQjCNFm5BTZlR93OSd15wmxDCEHVdWkUAhttp://www.google.com/url?q=http%3A%2F%2Fbalsamiq.com%2F&sa=D&sntz=1&usg=AFQjCNGArHuWAr6Fl8sdi1HZEEYaa4Su_whttp://www.google.com/url?q=http%3A%2F%2Fkeynotopia.com%2Fguides%2F&sa=D&sntz=1&usg=AFQjCNGcOqIg3fNKixRWOncTUUSZ7032Hghttps://www.google.com/url?q=https%3A%2F%2Fwww.flinto.com%2F&sa=D&sntz=1&usg=AFQjCNHL1SG-Pl18bOahrSm0BmG6SA9wxwhttps://www.google.com/url?q=https%3A%2F%2Fpopapp.in%2F&sa=D&sntz=1&usg=AFQjCNF4G_U1zXflQV17m7S2dWS3aH6BaQ