UX Prototyping and Personas 9-5-14

  • Published on

  • View

  • Download

Embed Size (px)


Slides from my course "UX Prototyping and Personas" taught at BAVC 9/5/2014


  • 1. UX PROTOTYPING AND PERSONASEssential tools for creating great user experiences

2. WHO AM I?Shilpa Thanawala@skthana 3. WHO ARE YOU? 4. WHAT IS A PROTOTYPE?A simulation of how a product or feature will workPractice for people who build things 5. PROTOTYPES VERSUS...SketchesWireframesStoryboardsMockups 6. WHY? 7. BENEFITS OF PROTOTYPINGExplore your ideasInnovateCollaborateGet everyone on the same pagePersuadeTest assumptionsReduce riskSaves time / effort / money 8. WHEN?As early as possibleThroughout the design and development process 9. WHATS THE GOAL?What question are you trying to answer?How will the video library work?Will users have problems filling in this form?What are the possible user pathways through this interface?Generate ideasFoster collaborationConvince team, stakeholders, clients... etc. 10. WHAT ABOUT FIDELITY?visual designinteractionenvironmentcontent and datasocial...others? 11. CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREAWhats your objective?Whos your audience? 12. PROTOTYPING TOOLS 13. WHAT KINDS OF TOOLS DO PEOPLE USE?PaperHTML / CSS (hand-coded or WYSIWYG generated)Clickable screen imagemaps in HTMLSoftware-generated ( , , , ,Omnigraffle, etc.)Balsamiq Fireworks Visio AxurePowerPoint / Keynote /ImpressOnline tools ( iRise , Solidify , Moqups , ProtoShare , Proto...)...many others (Acrobat,Rails, Java, Excel, Filemaker ...) 14. HOW TO CHOOSE?familiarity (or learning curve)availabilitycostcapability to create a usable prototypebuilt-in tools (UI elements, interactivity)collaborative capabilitesaudience & distribution 15. TESTING YOUR PROTOTYPES 16. USABILITY TESTINGWhat are you trying to measure?RolesFacilitatorTesterObserver(s) 17. THE FACILITATORExplains the testing processSets expectationsGuides the Tester throughAsks questions during & after testing 18. THE TESTERUsually, best if unfamiliar with your productIdeally, representative of your target marketCustomary to compensate Testers for their time 19. THE OBSERVERSSimply watch, listen, and take notesDont interact directly with TesterIdeally, all stakeholders and team membersIn another room, watching video and audioIf no observers, then its you! 20. THE TESTING SESSION3-5 Testers30-45 minutes each, with short breaksClear tasks or objectivesDiscuss and evaluate results right afterwardCategorize results based on the original goal(s)Separate unexpected or extra results so as not to getsidetracked 21. RINSE AND REPEATMake improvements, create a new prototype, test again 22. PAPER PROTOTYPING 23. EXAMPLESPaper prototype of a gameCredit: Derek Lee / YouTube.comView online 24. EXAMPLESPaper prototype of blood-testing kioskCredit: lukenwarm / YouTube.comView online 25. EXAMPLESPaper prototype of a kids websiteCredit: BlueDuckLabs / YouTube.comView online 26. PAPER PROTOTYPING: ADVANTAGESFastCheapNo special software skills neededEncourages collaboration (in person)Can model a wide variety of interfaces and interactionsCan modify during the test 27. PAPER PROTOTYPING: DISADVANTAGESHarder to collaborate with remote or distributed teams 28. PAPER PROTOTYPING TOOLKITEssentials: paper and penNice-to-Haves:heavy cardstock or construction paper, tracing paper or vellumpens, markers, highlighters, colored pencils, charcoal pencilseraserssticky notesre-stickable tape and labelsindex cardscardboardcutting toolsprinted UI elements and device frames 29. TIME TO BUILD YOUR OWN 30. ACTIVITY 1: PAPER PROTOTYPINGPrototype a login / register process for a website on asmartphone.Goal / Purpose - to plan out the login process flowInclude the following features:Login flowCreate a new accountWrong username or passwordReset passwordLogin using social media (Google, Facebook, Twitter)Bonus:What changes when the phone is oriented in landscape mode?Suppose this login is for a music-based website (Pandora, Spotify). What does an existing user see uponsuccessful login?What does a new user see just after account creation?Try prototyping these screens. 31. BALSAMIQ 32. BALSAMIQ: ADVANTAGESFastNo special software skills neededLarge library of UI elementsCan be used for remote collaborationHand-drawn look encourages focus on layout & functionalityAutomatically stores revision historyIntegrates with other online apps (Jira, Google Drive) 33. BALSAMIQ: DISADVANTAGESNot meant for high visual design fidelityNot free 34. EXAMPLEBalsamiq prototype for an iPhone interfaceCredit: AppsForGood / YouTube.comView online 35. DEMO 36. YOUR TURN 37. ACTIVITY 2: PROTOTYPING WITH BALSAMIQCreate a prototype for an airlines website reservationfunctionality on a tablet.Goal: Simulate interaction flowInclude:Search for flightsSpecialsBonus: Add features -- check flight status, online check-in 38. PERSONAS 39. WHAT IS A PERSONA?A fictional character developed to accurately and realisticallyrepresent one type of user your product is designed to serve. 40. WHY USE PERSONAS?A way to distill the goals and desires of the users you serve,make them memorable and humanTalk about product features as they relate to a specific personinstead of The UserFocus the user experience your productPrioritize improvements to your productGet all the assumptions out in the open and alignedUncover disconnectsGet everyone to buy in 41. PERSONAS ARE NOT...User ProfilesMarket segmentsReal peopleStatistically representativeComprehensiveAbsoluteStatic 42. FULL PERSONASBased on extensive user researchSite visitsInterviewsAnalytics data and logsTech support logsMarket researchSales team notes...other data on real users 43. HOW DO I GET DATA?User ResearcherThird-party dataGovernment, NGOs, or Think-tanks (Pew, data.gov,yougov.com)Commercial (Nielsen, Gallup)UX {UIE, AnswerLab}Approach with a question in mind 44. WHAT IF I HAVE NO REAL DATA?And no budget for UX research...AD-HOC PERSONASa.k.a. Assumption personas, Quick personas, Thin personas...Get whatever general data you canWho are you building for?Test, research, modify... repeat! 45. AD-HOC PERSONASCan be advantageous even if you have dataQuick to createJump-starts the process of developing personasMakes data analysis easierFocuses future research: validation, answering relevantquestions 46. WHAT DOES A PERSONA LOOK LIKE?Typical Characteristics:CategoryA fictional nameJob title, role, responsibilitiesTheir goals, needs, and prioritiesTheir environmentDemographics (if relevant)A quote or key statementA photoAn example persona(usability.gov) 47. ACTIVITY 3: CREATE PERSONAS 48. ACTIVITY 3: MODIFY YOUR PROTOTYPEChoose one persona as your primary oneModify your Balsamic prototype from Activity 2 to serve thespecific needs and goals of that primary persona 49. POWERPOINT / KEYNOTE / (OTHER) 50. POWERPOINT / KEYNOTE: ADVANTAGESFamiliar and widely availableEasy to learn and useCan export to PDF or HTMLUseful for collaboration among distributed teamsCan draw on existing resources for UI elementsCan simulate some interactivity 51. POWERPOINT / KEYNOTE: DISADVANTAGESLimited tools for visual designersLimited interactivity 52. EXAMPLESKeynote prototype for iPhone interfaceCredit: amir khella / YouTube.comView online 53. KEYNOTE DEMO 54. ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTECreate a prototype for a weather webappGoal: Determine if key user needs are metInclude:Current conditionsForecastChance of precipitationMultiple locationsSunrise and sunset timesBonus:Additional features like an extended forecast, hourly forecastHow will your design change on smaller screens / mobiledevices? 55. FIREWORKS 56. FIREWORKS: ADVANTAGESHighly flexibleCan simulate many interactions with higer fidelityDesignate common and reusable elementsComes with built-in UI elements libraryIntegrates well with Photoshop and IllustratorCan be exported to PDF, HTML, Air, ...Can distribute and collaborate remotelyAdditional tools for responsive and touch prototyping 57. FIREWORKS: DISADVANTAGESLearning curveLess widely available (must be purchased) 58. DEMO 59. HTML / CSS PROTOTYPES 60. HTML / CSS: ADVANTAGESThe real thingTogether with Javascript, can prototype actual interactivityOr, without JS, fake itModular & collaborativeFree, requires no special softwareCan use frameworksResponsive - one prototype for all screen sizesMight be possible to reuse code (but rarely) 61. HTML / CSS: DISADVANTAGESLearning curveTime-consumingCould be mistaken for the end productDifficult to collaborate with non-coding team members 62. TOOLS FOR HTML PROTOTYPINGHand-codeFrameworks ( Bootstrap , Foundation , Centurion, others)Content Management System (eg. WordPress)Visual tools ( Dreamweaver , Edge , Muse , Jetstrap, others) 63. DEMO: FOUNDATION FRAMEWORK 64. ACTIVITY 5: PROTOTYPING WITH... THE TOOL THAT WORKSFOR YOUCreate a prototype for a conference websiteGoal: Establish website layout and model interactionsInclude:Introduction and descriptionsDate, location, featured speakersA schedule of talksPricing and registrationNearby hotels, parking, local restaurants 65. PROTOTYPING AND PERSONASKEY TAKEAWAYSHelp you create a great user experienceKey tools in user-centered designGreat for aligning teams and getting buy-in from clients, execs,etc.Prototyping is easy and inexpensiveStart by using the tools you have & know. You can learnsomething else later if you need to. 66. RESOURCES & FURTHER STUDYPaper Prototyping: , ,Stencils ,Speckyboy listiOS design elements Sneakpeekit UIUsability Testing: and- Steve KrugDont Make Me Think Rocket Surgery MadeEasyPersonas: The Essential Persona Lifecycle- Pruitt & AdlinPowerPoint / Keynote:KeynotopiaFireworks: Export Responsive Prototypes ,iOS TouchPrototypingMuse:Muse JamsGeneral UX: UIE , UX Magazine , Rosenfeld Media , UXMastery,A List Apart , Lynda , Interaction Design Foundation ,52 Weeksof UXMy Client is Obsessed with the Design:Style Tiles 67. THANKS!Shilpa Thanawala@skthana