Slides from my course "UX Prototyping and Personas" taught at BAVC 4/25/2014

1. UX PROTOTYPING AND PERSONAS
Essentialtools for creatinggreatuser experiences

2. WHO AM I?
ShilpaThanawala
@skthana

3. WHO ARE YOU?

4. WHAT IS A PROTOTYPE?
Asimulation of how aproductor feature willwork
Practice for people who build things

5. PROTOTYPES VERSUS...
Sketches
Wireframes
Storyboards
Mockups

6. WHY?

7. BENEFITS OF PROTOTYPING
Explore your ideas
Innovate
Collaborate
Geteveryone on the same page
Persuade
Testassumptions
Reduce risk
Saves time /effort/money

8. WHEN?
As earlyas possible
Throughoutthe design and developmentprocess

9. WHAT’S THE GOAL?
Whatquestion are you tryingto answer?
Howwilltheinterfacework?
Willusersunderstandwheretoclicknext?
HaveIcoveredallpossibleuserpathways?
Generate ideas
Foster collaboration
Convince team, stakeholders, clients... etc.

10. WHAT ABOUT FIDELITY?
visualdesign
interaction
environment
contentand data
social
...others?

11. CHOOSE THE RIGHT LEVEL OF FIDELITY IN EACH AREA
What’s your objective?
Who’s your audience?

12. PROTOTYPING TOOLS

13. WHAT KINDS OF TOOLS DO PEOPLE USE?
Paper
HTML /CSS (hand-coded or WYSIWYGgenerated)
Clickable screen imagemaps in HTML
Software-generated ( , , , ,
, etc.)
PowerPoint/Keynote /
Online tools ( , , , , ...)
...manyothers (Acrobat,Rails, Java, Excel, Filemaker ...)
Balsamiq Fireworks Visio Axure
Omnigraffle
Impress
iRise Solidify Moqups ProtoShare Proto

14. HOW TO CHOOSE?
familiarity(or learningcurve)
availability
cost
capabilityto create ausable prototype
built-in tools (UI elements, interactivity)
collaborative capabilites
audience &distribution

15. TESTING YOUR PROTOTYPES

16. USABILITY TESTING
Whatare you tryingto measure?
Roles
Facilitator
Tester
Observer(s)

17. THE FACILITATOR
Explains the testingprocess
Sets expectations
Guides the Tester through
Asks questions during&after testing

18. THE TESTER
Usually, bestif unfamiliar with your product
Ideally, representative of your targetmarket
Customaryto compensate Testers for their time

19. THE OBSERVERS
Simplywatch, listen, and take notes
Don’tinteractdirectlywith Tester
Ideally, allstakeholders and team members
In another room, watchingvideo and audio
If no observers, then it’s you!

20. THE TESTING SESSION
3-5 Testers
30-45 minutes each, with shortbreaks
Clear tasks or objectives
Discuss and evaluate results rightafterward
Categorize results based on the originalgoal(s)
Separate unexpected or extraresults so as notto get
sidetracked

21. RINSE AND REPEAT
Make improvements, create anew prototype, testagain

22. PAPER PROTOTYPING

23. EXAMPLES
Paper prototype of agame
Credit:DerekLee/YouTube.com
Viewonline

24. EXAMPLES
Paper prototype of blood-testing kiosk
Credit:lukenwarm/YouTube.com
Viewonline

25. EXAMPLES
Paper prototype of akids’ website
Credit:BlueDuckLabs/YouTube.com
Viewonline

26. PAPER PROTOTYPING: ADVANTAGES
Fast
Cheap
No specialsoftware skills needed
Encourages collaboration (in person)
Can modelawide varietyof interfaces and interactions
Can modifyduringthe test

27. PAPER PROTOTYPING: DISADVANTAGES
Harder to collaborate with remote or distributed teams

28. PAPER PROTOTYPING TOOLKIT
Essentials: paper and pen
Nice-to-Haves:
heavycardstock or construction paper, tracingpaper or
vellum
pens, markers, highlighters, colored pencils, charcoalpencils
erasers
stickynotes
re-stickable tape and labels
index cards
cardboard
cuttingtools
printed UI elements and device frames

29. TIME TO BUILD YOUR OWN

30. ACTIVITY 1: PAPER PROTOTYPING
Prototype alogin /register process for awebsite on a
smartphone.
Goal/Purpose -to plan outthe login process flow
Include the followingfeatures:

31. BALSAMIQ

32. BALSAMIQ: ADVANTAGES
Fast
No specialsoftware skills needed
Large libraryof UI elements
Can be used for remote collaboration
Hand-drawn look encourages focus on layout&functionality
Automaticallystores revision history
Integrates with other online apps (Jira, Google Drive)

33. BALSAMIQ: DISADVANTAGES
Notmeantfor high visualdesign fidelity
Notfree

34. EXAMPLE
Balsamiqprototype for an iPhone interface
Credit:AppsForGood/YouTube.com
Viewonline

35. DEMO

36. YOUR TURN

37. ACTIVITY 2: PROTOTYPING WITH BALSAMIQ
Create aprototype for an airline’s website reservation
functionalityon atablet.
Goal: Simulate interaction flow
Include:
Search for flights
Specials
Bonus: Add features --check flightstatus, online check-in

38. PERSONAS

39. WHAT IS A PERSONA?
Afictionalcharacter developed to accuratelyand realistically
representone type of user your productis designed to serve.

40. WHY USE PERSONAS?
Awayto distillthe goals and desires of the users you serve,
make them memorable and human
Talk aboutproductfeatures as theyrelate to aspecific person
instead of “The User”
Focus the user experience your product
Prioritize improvements to your product
Getallthe assumptions outin the open and aligned
Uncover disconnects
Geteveryone to buyin

41. PERSONAS ARE NOT...
User Profiles
Marketsegments
Realpeople
Statisticallyrepresentative
Comprehensive
Absolute
Static

42. FULL PERSONAS
Based on extensive user research
Site visits
Interviews
Analytics dataand logs
Tech supportlogs
Marketresearch
Sales team notes
...other dataon realusers

43. HOW DO I GET DATA?
User Researcher
Third-partydata
Government, NGOs, or Think-tanks (Pew, data.gov,
yougov.com)
Commercial(Nielsen, Gallup)
UX {UIE, AnswerLab}
Approach with aquestion in mind

44. WHAT IF I HAVE NO REAL DATA?
And no budgetfor UX research...
AD-HOC PERSONAS
a.k.a. Assumption personas, Quick personas, Thin personas...
Getwhatever generaldatayou can
Who are you buildingfor?
Test, research, modify... repeat!

45. AD-HOC PERSONAS
Can be advantageous even if you have data
Quick to create
Jump-starts the process of developingpersonas
Makes dataanalysis easier
Focuses future research: validation, answeringrelevant
questions

46. WHAT DOES A PERSONA LOOK LIKE?
TypicalCharacteristics:
Category
Afictionalname
Job title, role, responsibilities
Their goals, needs, and priorities
Their environment
Demographics (if relevant)
Aquote or keystatement
Aphoto
(usability.gov)
An example persona

47. ACTIVITY 3: CREATE PERSONAS

48. ACTIVITY 3: MODIFY YOUR PROTOTYPE
Choose one personaas your primaryone
Modifyyour Balsamic prototype from Activity2 to serve the
specific needs and goals of thatprimarypersona

49. POWERPOINT / KEYNOTE / (OTHER)

50. POWERPOINT / KEYNOTE: ADVANTAGES
Familiar and widelyavailable
Easyto learn and use
Can exportto PDFor HTML
Usefulfor collaboration amongdistributed teams
Can draw on existingresources for UI elements
Can simulate some interactivity

51. POWERPOINT / KEYNOTE: DISADVANTAGES
Limited tools for visualdesigners
Limited interactivity

52. EXAMPLES
Keynote prototype for iPhone interface
Credit:amirkhella/YouTube.com
Viewonline

53. KEYNOTE DEMO

54. ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTE
Create aprototype for aweather webapp
Goal: Determine if keyuser needs are met
Include:
Currentconditions
Forecast
Chance of precipitation
Multiple locations
Sunrise and sunsettimes
Bonus:
Additionalfeatures like an extended forecast, hourlyforecast
How willyour design change on smaller screens /mobile
devices?

55. FIREWORKS

56. FIREWORKS: ADVANTAGES
Highlyflexible
Can simulate manyinteractions with higer fidelity
Designate common and reusable elements
Comes with built-in UI elements library
Integrates wellwith Photoshop and Illustrator
Can be exported to PDF, HTML, Air, ...
Can distribute and collaborate remotely
Additionaltools for responsive and touch prototyping

57. FIREWORKS: DISADVANTAGES
Learningcurve
Less widelyavailable (mustbe purchased)

58. DEMO

59. HTML / CSS PROTOTYPES

60. HTML / CSS: ADVANTAGES
The realthing
Together with Javascript, can prototype actualinteractivity
Or, withoutJS, fake it
Modular &collaborative
Free, requires no specialsoftware
Can use frameworks
Responsive -one prototype for allscreen sizes
Might be possible to reuse code (butrarely)

61. HTML / CSS: DISADVANTAGES
Learningcurve
Time-consuming
Could be mistaken for the end product
Difficultto collaborate with non-codingteam members

62. TOOLS FOR HTML PROTOTYPING
Hand-code
Frameworks ( , , , others)
ContentManagementSystem (eg. )
Visualtools ( , , , , others)
Bootstrap Foundation Centurion
WordPress
Dreamweaver Edge Muse Jetstrap

63. DEMO: FOUNDATION FRAMEWORK

64. ACTIVITY 5: PROTOTYPING WITH... THE TOOL THAT WORKS
FOR YOU
Create aprototype for aconference website
Goal: Establish website layoutand modelinteractions
Include:
Introduction and descriptions
Date, location, featured speakers
Aschedule of talks
Pricingand registration
Nearbyhotels, parking, localrestaurants

65. PROTOTYPING AND PERSONAS
KEY TAKEAWAYS
Help you create agreatuser experience
Keytools in user-centered design
Greatfor aligningteams and gettingbuy-in from clients, execs,
etc.
Prototypingis easyand inexpensive
Startbyusingthe tools you have &know. You can learn
somethingelse later if you need to.

66. RESOURCES & FURTHER STUDY
Paper Prototyping: , ,
,
UsabilityTesting: and
-Steve Krug
Personas: -Pruitt&Adlin
PowerPoint/Keynote:
Fireworks: ,
Muse:
GeneralUX: , , , ,
, , ,
MyClientis Obsessed with the Design:
iOS design elements Sneakpeekit UI
Stencils Speckyboylist
Don’tMake Me Think RocketSurgery Made
Easy
The Essential PersonaLifecycle
Keynotopia
ExportResponsive Prototypes iOS Touch
Prototyping
Muse Jams
UIE UX Magazine Rosenfeld Media UXMastery
AListApart Lynda Interaction Design Foundation 52 Weeks
of UX
Style Tiles

67. THANKS!
ShilpaThanawala
@skthana