Intro to the Design of Everyday Things, Final Project:

Instructions
Create a user interface for a wallet-sized time bank
Your Task:
Thisprojectconsistsofdesigningauserinterface(UI)foramobiletimebankdevicethatfitsinyour
wallet.Atimebankallowspeopletoexchangetheirtimeforanotherpersonstime.Tokeepthings
simple,everyonestimehasequalvalue:myhourisworththesameamountasyourhour.Thisisan
openendedprojectwithmanycreativedirectionsthatyoucantakeit.Followtheinstructionsbelowand
thinkbig.

Ifyouareenrolledinthefullcourse,yourworkwillbeevaluatedusingtherubricincludedinthis
document,whereyouwillalsofindinstructionsforhowtosubmityourproject.Ifyouaretakingthefree
courseware,youcanlookattherubricasaguidewhilecreatingyourproject,butpleaseunderstandthat
yourworkwillnotbeevaluatedbytheUdacityCoachteam.Havefun!

STEP 1 - UNDERSTAND PROJECT AND GATHER MATERIALS

Watchtheprojectintroductoryvideostobetterunderstandhowyourtimebankshouldwork.Alsogather
thefollowingmaterials:
Pens:Thickandthinandindifferentcolors
Atleastonehighlighter
Multiplesheetsofpaperaslargeasyoucanfind
SeveralprintoutsoftheProject3templates,whicharelocatedhere
Astraightedge(likearuler)fordrawing

STEP 2 - CREATE SKETCHES

Inthisstepyouwillexplorehowyourtimebankmightbehaveandlook.Morespecifically:
Sketchtenideasforhowyourtimebankappmightusesignifierstosupportanaccurate
conceptualmodelforaddingandsubtractingtime.
Sketchfiveideasforhowyourtimebankappmightsupportatleastfiveindependentaspectsof
discoverability.Thesecanbespecificallyrelatedtoacorefunction/servicethattheappprovides
ormoregenerallyrelatedtohowausermightnavigatewithintheapp.
Sketchfiveideasforhowyourtimebankappmightprovideatleastfiveindependentinstancesof
feedback.Thesecanbespecificallyrelatedtoacorefunction/servicethattheappprovidesor
moregenerallyrelatedtohowausermightnavigatewithintheapp.

STEP 3 - CREATE A STORYBOARD OF WIREFRAMES

Nowyouaregoingtouseyoursketchestoinformwireframesthatsummarizewhateachscreenofyour
timebankwilllooklikeandthemajorstepsuserswilltakewheninteractingwithit.Asyouassemble
yourwireframes,makesuretheyaddressthesevenquestionsusersaskwhencrossingtheGulfsof
ExecutionandEvaluation.Importantly,youarenotrequiredtousetheexactsketchesfromStep2you
shouldfeelfreetoexpandandevolvetheseideasintoalarger(andmorecohesive)experience
representedbyyourwireframes.

STEP 4 - GET USER FEEDBACK

Nextaskthreetofivepeopletoprovidefeedbackonyourwireframes.Trytogetavarietyofpeopleof
differentagesandbackgrounds,notjustfolkslikeyou.Toensuregoodfeedbackbesuretopay
attentiontotheTipsonCollectingFeedbackthatwelearnedaboutintheFinalProjectvideos.Youwill
besurprisedbywhatyoulearnmakesuretotakeamplenotes!

STEP 5 - REFINE YOUR DESIGN

Nowthatyouvecollecteduserfeedback,itistimetousewhatyoulearnedtoinformanotherroundof
iteration.Usingafreshsetoftemplates,redrawyourwireframes.Atthisstageyoushouldbequite
inspiredbywhatyoulearnedfromusersandhaveclearwaystoimprovefeedbackanddiscoverability.
Youmightalsohavesomeideasforrefiningorderandhierarchyofyourtimebankscreens.

STEP 6 - SHARE YOUR DESIGN

ThefinalcomponentofthisprojectinvolvescreatingadebriefinPDFformatthatincludesthefollowing
information:
Page1:Projecttitle,date,andyourname
Page2:Tensketches(andanyaccompanyingtext)ofyourconceptualmodelsfromStep2.
Page3:Discoverability,beforeusertesting:amultiplescreensequence(flow)thatshows(with
images,text,andcalloutbubbles)howyouhandleddiscoverabilityandthegulfofexecution.A
flowdemonstrateshowonescreen/sketchleadstothenext,tyingtogetherallrelevantaspects
ofdiscoverability.Usedescriptivetexttoaccompanyflowsforanyexplanation.Thescreensyou
showhereshouldbeyourFIRSTflows,beforetheroundofuserfeedbackinsteps4and5.
Page4:Discoverability,afterusertesting:seePage3descriptionforDiscoverability.The
screensyoushowhereshouldbeyourFINALflows,aftertheroundofuserfeedbackinsteps4
and5.
Page5:Feedback,beforeusertesting:amultiplescreensequence(flow)thatshows(with
images,text,andcallouts)howthefeedbackyoudesignedhelpspeopleunderstandtheresults
oftheiractionswithintheapp,crossingthegulfofevaluation.Aflowdemonstrateshowone
aspectoffeedbackisconnectedtoanotherrelevantaspect.Usedescriptivetexttoaccompany
theseflowsforanyexplanation.ThescreensyoushowhereshouldbeyourFIRSTflows,before
theroundofuserfeedbackinsteps4and5.
Page6:Feedback,afterusertesting:seePage5descriptionforFeedback.Thescreensyou
showhereshouldbeyourFINALflows,aftertheroundofuserfeedbackinsteps4and5.
Page7:Asummaryofwhatyoulearnedbyevaluatingyourdesignswithothers.Besureto
includehowmanyusersyousampled,howmanyroundsofiterationyouperformed,whatkind
reactionsyourdesignreceivedfromusers,whatspecificmodificationsyouthoughtwere
important,etc.
Beforecompilingyourreport,besuretolookattherubricthatisusedtoevaluatetheseprojectssothat
youhaveabetterideaofwhattostrivetowardsineachsection.

STEP X - GOING BEYOND PAPER

Paperisagreatprototypingtool,superiortomostdigitaltoolsintermsofflexibility,speedandeaseof
use.Howeverthenextstep,whenyouneedmoreanimationandfidelitytoprogress,istomoveto
somethinginteractive.Todothatherearesometoolsformidtohighfiprototyping:

Hybridpaper/digitaltoolsallowyoutakeapictureofapapersketchandanimateit:

Pophttps://popapp.in/
Flintohttps://www.flinto.com/
AppleKeynoteorMSPowerPointorGooglepresentationhttp://keynotopia.com/guides/
Balsamiqhttp://balsamiq.com/

Ifyoudonotknowhowtocode,herearesomevisualtoolsthatgenerateHTML5:
TumultHypehttp://tumult.com/hype/
AdobeEdgeAnimatehttp://html.adobe.com/edge/animate/
GooglesWebDesignerhttps://www.google.com/webdesigner

Whenyouarefinished,uploadandshareyourworkintheforum.Ifyoureenrolledinthefull
course,followtheinstructionsintheSubmissionandEvaluationInformationdocument
Congratulations!