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

1. UX PROTOTYPING AND PERSONAS
Essential 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 work
Practice for people who build things

5. PROTOTYPES VERSUS...
Sketches
Wireframes
Storyboards
Mockups

6. WHY?

7. BENEFITS OF PROTOTYPING
Explore your ideas
Innovate
Collaborate
Get everyone on the same page
Persuade
Test assumptions
Reduce risk
Saves time / effort / money

8. WHEN?
As early as possible
Throughout the design and development process

9. WHAT’S 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 ideas
Foster collaboration
Convince team, stakeholders, clients... etc.

10. WHAT ABOUT FIDELITY?
visual design
interaction
environment
content and 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 WYSIWYG generated)
Clickable screen imagemaps in HTML
Software-generated ( , , , ,
Omnigraffle
, etc.)
Balsamiq Fireworks Visio Axure
PowerPoint / Keynote /
Impress
Online tools ( iRise , Solidify , Moqups , ProtoShare , Proto
...)
...many others (Acrobat,Rails, Java, Excel, Filemaker ...)

14. HOW TO CHOOSE?
familiarity (or learning curve)
availability
cost
capability to create a usable prototype
built-in tools (UI elements, interactivity)
collaborative capabilites
audience & distribution

15. TESTING YOUR PROTOTYPES

16. USABILITY TESTING
What are you trying to measure?
Roles
Facilitator
Tester
Observer(s)

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

18. THE TESTER
Usually, best if unfamiliar with your product
Ideally, representative of your target market
Customary to compensate Testers for their time

19. THE OBSERVERS
Simply watch, listen, and take notes
Don’t interact directly with Tester
Ideally, all stakeholders and team members
In another room, watching video and audio
If no observers, then it’s you!

20. THE TESTING SESSION
3-5 Testers
30-45 minutes each, with short breaks
Clear tasks or objectives
Discuss and evaluate results right afterward
Categorize results based on the original goal(s)
Separate unexpected or extra results so as not to get
sidetracked

21. RINSE AND REPEAT
Make improvements, create a new prototype, test again

22. PAPER PROTOTYPING

23. EXAMPLES
Paper prototype of a game
Credit: Derek Lee / YouTube.com
View online

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

25. EXAMPLES
Paper prototype of a kids’ website
Credit: BlueDuckLabs / YouTube.com
View online

26. PAPER PROTOTYPING: ADVANTAGES
Fast
Cheap
No special software skills needed
Encourages collaboration (in person)
Can model a wide variety of interfaces and interactions
Can modify during the test

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

28. PAPER PROTOTYPING TOOLKIT
Essentials: paper and pen
Nice-to-Haves:
heavy cardstock or construction paper, tracing paper or vellum
pens, markers, highlighters, colored pencils, charcoal pencils
erasers
sticky notes
re-stickable tape and labels
index cards
cardboard
cutting tools
printed UI elements and device frames

29. TIME TO BUILD YOUR OWN

30. ACTIVITY 1: PAPER PROTOTYPING
Prototype a login / register process for a website on a
smartphone.
Goal / Purpose - to plan out the login process flow
Include the following features:
Login flow
Create a new account
Wrong username or password
Reset password
Login 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 upon
successful login?
What does a new user see just after account creation?
Try prototyping these screens.

31. BALSAMIQ

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

33. BALSAMIQ: DISADVANTAGES
Not meant for high visual design fidelity
Not free

34. EXAMPLE
Balsamiq prototype for an iPhone interface
Credit: AppsForGood / YouTube.com
View online

35. DEMO

36. YOUR TURN

37. ACTIVITY 2: PROTOTYPING WITH BALSAMIQ
Create a prototype for an airline’s website reservation
functionality on a tablet.
Goal: Simulate interaction flow
Include:
Search for flights
Specials
Bonus: Add features -- check flight status, online check-in

38. PERSONAS

39. WHAT IS A PERSONA?
A fictional character developed to accurately and realistically
represent 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 human
Talk about product features as they relate to a specific person
instead of “The User”
Focus the user experience your product
Prioritize improvements to your product
Get all the assumptions out in the open and aligned
Uncover disconnects
Get everyone to buy in

41. PERSONAS ARE NOT...
User Profiles
Market segments
Real people
Statistically representative
Comprehensive
Absolute
Static

42. FULL PERSONAS
Based on extensive user research
Site visits
Interviews
Analytics data and logs
Tech support logs
Market research
Sales team notes
...other data on real users

43. HOW DO I GET DATA?
User Researcher
Third-party data
Government, 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 PERSONAS
a.k.a. Assumption personas, Quick personas, Thin personas...
Get whatever general data you can
Who are you building for?
Test, research, modify... repeat!

45. AD-HOC PERSONAS
Can be advantageous even if you have data
Quick to create
Jump-starts the process of developing personas
Makes data analysis easier
Focuses future research: validation, answering relevant
questions

46. WHAT DOES A PERSONA LOOK LIKE?
Typical Characteristics:
Category
A fictional name
Job title, role, responsibilities
Their goals, needs, and priorities
Their environment
Demographics (if relevant)
A quote or key statement
A photo
An example persona
(usability.gov)

47. ACTIVITY 3: CREATE PERSONAS

48. ACTIVITY 3: MODIFY YOUR PROTOTYPE
Choose one persona as your primary one
Modify your Balsamic prototype from Activity 2 to serve the
specific needs and goals of that primary persona

49. POWERPOINT / KEYNOTE / (OTHER)

50. POWERPOINT / KEYNOTE: ADVANTAGES
Familiar and widely available
Easy to learn and use
Can export to PDF or HTML
Useful for collaboration among distributed teams
Can draw on existing resources for UI elements
Can simulate some interactivity

51. POWERPOINT / KEYNOTE: DISADVANTAGES
Limited tools for visual designers
Limited interactivity

52. EXAMPLES
Keynote prototype for iPhone interface
Credit: amir khella / YouTube.com
View online

53. KEYNOTE DEMO

54. ACTIVITY 4: PROTOTYPING WITH POWERPOINT OR KEYNOTE
Create a prototype for a weather webapp
Goal: Determine if key user needs are met
Include:
Current conditions
Forecast
Chance of precipitation
Multiple locations
Sunrise and sunset times
Bonus:
Additional features like an extended forecast, hourly forecast
How will your design change on smaller screens / mobile
devices?

55. FIREWORKS

56. FIREWORKS: ADVANTAGES
Highly flexible
Can simulate many interactions with higer fidelity
Designate common and reusable elements
Comes with built-in UI elements library
Integrates well with Photoshop and Illustrator
Can be exported to PDF, HTML, Air, ...
Can distribute and collaborate remotely
Additional tools for responsive and touch prototyping

57. FIREWORKS: DISADVANTAGES
Learning curve
Less widely available (must be purchased)

58. DEMO

59. HTML / CSS PROTOTYPES

60. HTML / CSS: ADVANTAGES
The real thing
Together with Javascript, can prototype actual interactivity
Or, without JS, fake it
Modular & collaborative
Free, requires no special software
Can use frameworks
Responsive - one prototype for all screen sizes
Might be possible to reuse code (but rarely)

61. HTML / CSS: DISADVANTAGES
Learning curve
Time-consuming
Could be mistaken for the end product
Difficult to collaborate with non-coding team members

62. TOOLS FOR HTML PROTOTYPING
Hand-code
Frameworks ( 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 WORKS
FOR YOU
Create a prototype for a conference website
Goal: Establish website layout and model interactions
Include:
Introduction and descriptions
Date, location, featured speakers
A schedule of talks
Pricing and registration
Nearby hotels, parking, local restaurants

65. PROTOTYPING AND PERSONAS
KEY TAKEAWAYS
Help you create a great user experience
Key tools in user-centered design
Great for aligning teams and getting buy-in from clients, execs,
etc.
Prototyping is easy and inexpensive
Start by using the tools you have & know. You can learn
something else later if you need to.

66. RESOURCES & FURTHER STUDY
Paper Prototyping: , ,
Stencils ,
Speckyboy list
iOS design elements Sneakpeekit UI
Usability Testing: and
- Steve Krug
Don’t Make Me Think Rocket Surgery Made
Easy
Personas: The Essential Persona Lifecycle
- Pruitt & Adlin
PowerPoint / Keynote:
Keynotopia
Fireworks: Export Responsive Prototypes ,
iOS Touch
Prototyping
Muse:
Muse Jams
General UX: UIE , UX Magazine , Rosenfeld Media , UXMastery
,
A List Apart , Lynda , Interaction Design Foundation ,
52 Weeks
of UX
My Client is Obsessed with the Design:
Style Tiles

67. THANKS!
Shilpa Thanawala
@skthana