Intro to the Design of Everyday Things, Final Project: Instructions Create 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 MATERIALS Watch 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 SKETCHES In 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 WIREFRAMES Now 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.

STEP 4 - GET USER FEEDBACK Next 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 DESIGN Now 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 DESIGN The 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 results of 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 PAPER Paper 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:

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!