design studio agenda
TRANSCRIPT
Background• DesignStudiowasfirstdescribedasanagileUXtechniquebyJim
UngarandJeffWhite.• ADesignStudioworkshopmodelstheapproachoCenusedina
designschoolordesignshopwherepar%cipantsworkindependentlyonproductdesignideas,thentogetherasagroupcri%quedesignsinordertoimprovethem.
• InsoCwaredevelopment,communicatetheproductgoalsand
contexttotheteam,thenallowteammembersashort%metosketchtheirsolu9onideas.Useacollabora%veworkshopinvolvingthewholeteamtocri%quesolu%onideasandiden%fythebestelements.Synthesizethebestelementsintoabe;erproductdesign.
2
Why?UseaDesignStudioapproachtoallowthewholeproductteamtoconsider,sketch,andsharetheirsolu9onideas.ACeraDesignStudioexercisethewholeteamgains:• SharedunderstandingoftheproblemsbeingsolvedbythesoCware• Achancetocontributegoodideastothefinalproduct• Achancetohelpcombineandsynthesizegoodideasintoafinished
productsolu%on• Apprecia%onforhowdifficultgooduserinterfacedesigncanbeUl%matelytheproductbenefitsfromasimpleformofidea9on,orconsideringmul%plepossiblesolu%ons,toaproductdesignproblem.Theresul%ngproductdesignismoreinnova%ve–beNerthanitwouldhavebeenotherwise.
3
PlanIden9fytheproductorproductareatofocuson:Theproductareamaybethemainfocusofanextrelease,oratroublesomepartoftheexis%ngproduct.Iden%fythegoalsorproblemstosolvewiththenewuserinterfacedesign.Iden9fycontexttoprovidetotheteam:• Describethepurposeofthefunc9onalitybeingbuilt.• Giveinforma%onaboutuserssuchaspersonasthatdescribetypicalusersofthesoCware,andtheirgoalswhenusingit.
• Describedetailsabouttheproblemtobesolvedsuchasusefulfacts,workflow,orproblemscenarios.Iden%fydetails;specificallythekindsofinforma%onuserswillneedintheuserinterface.
5
PlanInvitetheteam:ScheduletheDesignStudioworkshopasahalftofulldayevent.Ideallyinvitethewholeteamthatwillimplementthesolu%on.Considerinvi%ngoutsidestakeholderswhowanttoweighinonthedesign.Communicatethegoalfortheworkshop:1. Communicatethedetailsaboutthecontextthatpar%cipantswill
needtosketchtheirsolu%ons.2. Providepaper,pens,pencils,orothermaterialspar%cipantswill
needtosketch.Makeitquickandeasytopar%cipate.3. Askpar%cipantstosketchtheirideasinadvanceoftheworkshop.
Tellthemtospendnomorethananhoursketchingtheirsolu%onideas.
6
PerformSetup:Setupbypos%ngthegoalsandagendafortheworkshop.(Makesuretogiveshortbreaksevery60-90minutestohelpkeeppar%cipant’senergyup.)Supplytheroomwithpens,s%ckynotes,andflip-chartpaper.Kickoff:Describethegoalsoftheagenda.Present:Askeachpar%cipanttopresenthisorhersketch–takingnomorethantwominutes.Itmightgoabitlikethis:• “Here’smysketch”• “Thisismyvisionofthesolu7on”• “ThisIwhyImadethisdecision,thisiswhyImadethatdecision...”• “Team,whatdoyouthink?”
7
PerformCri9que:ACereachpresenta%on,thewholegroupquicklydiscussesthesolu%on.Asafacilitatorremindpar%cipantsthat:“It’saboutcri7quingthedesign,notthedesigner.”Par9cipantsshould:• Pointoutproblems–ideasthatwon’twork• Pointoutgreatideas• Recognizenewideas:ideasthatcomefromseeingother’sgoodideas,or
discussingalterna%vestolessperfectideasDuringthediscussionthefacilitatorcapturesfeedback.Trywri%ngasingleideapers%ckynote.Thismakesthemeasiertoorganizelateron.Watch%me.Trytospendonlyafewminutesperdiscussion.
8
PerformOrganizetheoutcomes:Clusterideasthataresimilartogether.Watchoutforconflic%ngideas–ideasthatdon’tworkwellifusedtogether.Voteonbestideas.Wrapup&celebrate:Photographtheoutputfromthesession.Takeashort(5minutesorso)movieofsomeoneexplainingtheworkshopresults.Collecttakeaways:Goaroundtheroomaskingeachpar%cipanttosayonethingtheygotoutoftheday.
9
Synthesize&Design
Thoseresponsibleforthefinaldesignpulltheideastogetherandcreateamoredetaileddesignsketchsynthesizingthebestideaswherepossible,andavoidingtheproblems.Communicatethedesigntotherestoftheteam,alongwiththanksforpar9cipa9ng.
10
Day1• Describegoalsoftheagendaandexpecta%onsforDay1
Time: 10 minutes
• IcebreakerAc%vityTime: 10 - 20 minutes
• DiscusscurrentUserJourney
Time: 30 - 45 minutes • Compe%%veAnalysis:Discusscompe%tors
Time: 5-10 minutes per par6cipant • DevelopUserPersonas
Time: 1 hour • Visualiza%onTechniques(e.g.Solu%onScenario,DesignComic,UIScreenIdea%on,UIScreenExplora%on)
Time: 1 - 1.5 hours • FeaturePriori%za%on:MoSCoWMethod(Must,Should,Could,Won’t)
Time: 1 hour • Givepar%cipantsinstruc%onsfor%meboxinganddistributematerialstosketchdesignsonpaperforDay2
Time: 10 minutes • EndofDay1
12
Day2• Describegoalsoftheagendaandexpecta%onsforDay2
Time: 5 minute
• Presentdesignsolu%onsTime: 5-8 minutes per par6cipant
• Designcri%queTime: 5 minutes per par6cipant
• ClustersimilarideasTime: 20 - 30 minutes
• VoteonbestideasTime: 30 minutes
• Workshopresults:present,record,photograph,andcollectdocuments.Time: 30 - 45 minutes
• DesignStudiodebrief:par%cipantworkshoptakeawayTime: 5 - 8 minutes per par6cipant
• EndofDay2
13
Day3• Synthesizeandcombineideas
Time: 30 minutes
• DevelopfinalworkflowTime: 30 minutes
• DevelopnewuserjourneyTime: 1 hour
• Designmedium(grayscale)orhighfidelity(fullcolor)mockupsoffinaldesign
Time: 4 hours
• CreatePowerPointPresenta%onoffinaldesignwithannota%onsTime: 2 hours
• Sharedeliverables(userpersonas,newuserjourney,andfinaldesignpresenta%on)withtheteamTime: 5 minutes
• EndofDay3
14
Visualiza9onTechniques
15
Solu9onScenario
DesignComic
UIStoryboard
UIScreenIdea9on
UIScreenExplora9on
Solu9onScenarioWhat:Auserscenarioisatextualdescrip%onofauser,realorfic%%ous,usingahypothe%calproductsolu%ontosuccessfullymeettheirgoals.Ideallyit’sasdescrip%veasanovelhelpingthereaderimaginetheproductsolu%on.Why:Userscenariosallowexplora%onofmul%plesolu%onsquicklywithouttheneedfordrawingskills.Scenarioscanincludedetailsanddescribeelementsofuserexperiencethatcan’tbedescribedinaUIprototype.How:1. Iden%fyauserofyoursystem.2. Imaginethatuserinasitua%onwherethey’llneedtouseyoursoCwaretosolveaproblemorperformsomework.3. Imagineyouruserthenproceedingtouseyourproductandtellthestoryofthatuse.4. Includerealis%cdetails.Describetheuserovercomingcommonproblems.Describedetailsoftheproduct’suser
interfacewhereithelpsthestory.Imagineyou’vefoundadustybookinthelibrary.Incrediblyit’sanunpopularworkoffic7onaboutyouruser!Youopenthebooktoarandomchapter,andtherespilledoutforyoutoreadisasurprisinglycompellingaccountofthebook’sherousingyourproducttosuccessfullyovercomeaproblem.���Thisisthestoryyou’llwriteasascenario.
16
DesignComicWhat:Adesigncomictellsthestoryofauserofyourproposedproductastheyuseittosolveaproblem.Likeacomicbook,thestoryissettopicturesshowwhatusersdo,think,see,andsayastheymovethroughthestory.Why:Withveryfewwordsandsimplepictures,adesigncomicbringsasolu%onscenariotolife.Comicsarecompellingforthereader,andmakeiteasyfortheauthortotellastorythatincludesvisualiza%onoftheproduct,theusers,andshowscomplexideasliketheuser’semo%ons.How:1. Startbythinkingthroughandwri%ngaquickstoryaboutyourproduct’suserusingyourproduct.2. Usingsimplesquareframesofacomicbookpage,drawthestoryscenebyscene.3. Giveyourcharacteremo%onwithsimplefacialexpressions.4. Showwhatyourcharacterthinksorsaysusingthoughtbubblesorspeechballoons.5. DrawthescenearoundyourcharacterincludingliNlebitsofyouproductscreenwhereit’suseful.
18
UIStoryboardWhat:AUIstoryboardshowsdetailsofyourproduct’suserinterfaceasauserusesittomeetagoal.Thestoryboardlooksabitlikeacomicbookwhereeachframeshowsscreensofyourproductinvariousstatesasthestoryprogresses.Why:AUIstoryboardallowsyoutothinkthroughtrickyaspectsofuserinterfacesuchasthedetailsusersneedonthescreenandhowthey’reorganized,andthenaviga%onfromscreentoscreenastheusermovesthroughthestepsnecessarytoreachagoal.How:1. Startbythinkingthroughandwri%ngaquickstoryaboutyourproduct’suserusingyourproduct.2. Foreachmajorstepofyourstory,sketchtheproductscreentheusermightsee.3. Draworuseannota%onstodescribetheinforma%ontheuserseesonthescreen
andwhereit’sfound.4. ShowthebuNonsorothermechanismstheuserusestomovefromonescreentothenext.
20
UIScreenIdea9onWhat:Usingpaperandpenorelectronictoolsdrawadetailedrepresenta%onofascreenofyourproductincludingdetailedinforma%onfoundintheUI.Useannota%onandcalloutsforpaper,oranima%onforelectronicprototypestoexplorespecificcomplexuserinterac%ons.Why:Theoldexpression“thedevilisinthedetails”appliesespeciallytoproductuserinterfacedesign.Aroughsketchofaproductideamayseemfeasibleun%lyoubegindealingwithallthedetailedbitsofinforma%onthatneedtobeintheUI,orthecomplexcontrolsausermayneedtousetomanipulatethescreen.Ascreenexplora%onallowsyoutoconsiderthesedetailsatalowcostbeforemakingimplementa%ondecisions.How:1. Iden%fyaspecificareaoftheproducttofocuson.Trythinkingofakindofuserandaplaceintheir
workflowwheretheyhavespecificneeds.2. Buildlistsofdetailsthatneedtobeinthescreenandspecificac%onsusersneedtoperform.3. Draworuseannota%onstodescribetheinforma%ontheuserseesonthescreen
andwhereit’sfound.4. Usingpaperandpencil,oryourfavoriteelectronictool,renderthescreen.Includethedetailed
informa%onusersneed.Thinkthroughhowthey’llperformspecificac%onsintheuserinterface.
22
UIScreenExplora9onWhat:Usescreenidea%ontofocusonapar%cularscreenorareaoftheproductandbrainstormmul%plevaria%onsofscreensausercouldusetoreachagoal.Why:Ourfirstsolu%onideasareseldomourbestideas.Thinkingofmul%plescreenlayoutsthathelpauserreachagoalhelpsiden%fyinnova%veproductsolu%ons.How:1. Iden%fyaspecificareaoftheproducttofocuson.Trythinkingofakindofuserandaplaceintheirworkflowwheretheyhavespecificneeds.
2. Sketchaversionofaproductscreenthatallowsausertoreachtheirgoal.Useannota%onorcall-outstodescribedetailsofthescreen.
3. Repeattheprocessbysketchingadifferentvaria%onofthesamescreen.4. Tryemphasizingdifferentpiecesofinforma%on;tryremovinginforma%on;tryframingtheinforma%onusingdifferentmetaphors–anairplanecockpit,amovieposter,etc.
24