Idea%ngcollabora%velyusingDesignStudio

1

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

DesignStudioWorkflow

Plan Perform Synthesize&Design

4

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

DesignStudioAgenda

Day1

Day2

Day3

11

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

Solu9onScenarioExample

17

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

DesignComicExample

19

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

UIStoryboardExample

21

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

UIScreenIdea9onExample

23

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

UIScreenExplora9onExample

25