Download pdf - Intro to the Design of Everyday Things, Final Project - Project Instructions

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


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


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