Slides from my course "UX Prototyping and Personas" taught at BAVC 11/20/2015

1. UX PROTOTYPING AND PERSONAS
Here early? While we’re waiting for the others...
We'll use a communal Google Doc to pass links easily amongst
the class. Open .http://j.mp/proto-nov-20
1. Open
2. This is a demo version of Balsamiq, one of the tools we'll be
using today. Take some time to explore and familiarize
yourself with it.
What UI elements are provided?
How would you be able to use a screenshot of your website as a
background and then change one feature?
How would you link to another screen?
http://webdemo.balsamiq.com/
0

2. UX PROTOTYPING AND PERSONAS
Essential tools for creating great user experiences

3. WHO AM I?
Shilpa Thanawala
@skthana

4. YOUR TURN
Interview & introduce your neighbor
(feel free to take notes)
name
role, independent or agency
designer or developer background
experience in prototyping & how you think prototyping can be
useful to you

5. WHAT IS A PROTOTYPE?
A simulation of how a product or feature will work
Practice for people who build things

6. PROTOTYPES VERSUS...
Sketches
Wireframes
Storyboards
Mockups

7. WHY?

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

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

10. WHAT'S YOUR GOAL?
Why do you need to build a prototype?
What question are you trying to answer?
Howwillthevideolibrarywork?
Willusershaveproblemsfillinginthisform?
Whatarethepossibleuserpathwaysthroughthisinterface?
Generate ideas
Foster collaboration
Convince team, stakeholders, clients... etc.

11. FIDELITY
How closely a prototype models reality
visual design
interaction
environment
content and data
social
...others?

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

13. PROTOTYPING TOOLS

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

15. 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

16. TESTING YOUR PROTOTYPES

17. USABILITY TESTING
What are we trying to learn about the experience of your users?
Roles
Facilitator
Tester
Observer(s)

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

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

20. 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!

21. 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

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

23. PAPER PROTOTYPING

24. EXAMPLES
Paper prototype of a game
Credit:DerekLee/YouTube.com
Viewonline

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

26. EXAMPLES
Paper prototype of a kids’ website
Credit:BlueDuckLabs/YouTube.com
Viewonline

27. 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

28. PAPER PROTOTYPING: LIMITATIONS
Harder to collaborate with remote or distributed teams

29. 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
glue / glue-sticks
index cards
cardboard
cutting tools
printed UI elements and device frames

30. TIME TO BUILD YOUR OWN
(and then test it!)

31. BREAK

32. CHALLENGE 1: PAPER PROTOTYPING
In groups, prototype a login / register process for a website on a
smartphone.
Goal / Purpose - to plan out the login process flow
Include the following features & flows:
A successful login
Create and verify a new account
Wrong username or password
Reset password (no need to prototype email clients)
Test within your group
Run a formal test on a volunteer from the other group

33. PERSONAS

34. WHAT IS A PERSONA?
A fictional character developed to accurately and realistically
represent one type of user your product is designed to serve.

35. 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

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

37. 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

38. 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

39. 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!

40. 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

41. 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
(usability.gov)
An example persona

42. CHALLENGE 2: CREATE PERSONAS
1. Brainstorm user goals (both UX and accomplishments), user
roles (as many as possible)
2. Group them
3. Name the groups & identify key characteristics (facts - no
assumptions or narratives)
4. Create a persona for one of these 'skeletons'
(can use a )template

43. BALSAMIQ

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

45. BALSAMIQ: LIMITATIONS
Not intended for high visual design fidelity
Not designed for complex UI interactions

46. DEMO: BALSAMIQ
1. In a browser, go to:
2. First, let's get oriented
3. Next, let's create a simple example prototype for our airline's
homepage
http://bavc.balsamiq.com

47. INVISION

48. INVISION: ADVANTAGES
Simple and easy to learn / use
Simulates hover and click interactions
No extra effort needed to create a professional presentation
for clients / stakeholders

49. INVISION: LIMITATIONS
Not a graphic design tool
Not designed for complex UI interactions

50. DEMO: INVISION
1. In a browser, go to:
2. First, let's get oriented
3. Next, let's create a simple example prototype for an existing
website
http://invision.com

51. POWERPOINT / KEYNOTE / (SIMILAR)

52. 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

53. POWERPOINT / KEYNOTE: LIMITATIONS
Limited tools for visual designers
Limited interactivity

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

55. DEMO: KEYNOTE
1. Open Keynote
2. First, let's get oriented
3. Next, let's create a simple example prototype for a website

56. MUSE

57. MUSE: ADVANTAGES
Highly flexible
Can simulate many interactions with higer fidelity
Designate common and reusable elements
Integrates with Photoshop and Illustrator
Can be exported to PDF, HTML, Air, ...
Can distribute and collaborate remotely

58. MUSE: DISADVANTAGES
Learning curve for those new to Adobe apps
Less widely available (must be purchased)

59. DEMO: MUSE
1. Open Muse
2. First, let's get oriented
3. Next, let's create a simple example prototype for a website

60. CHALLENGE 3: 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

61. 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.

62. RESOURCES & ADDITIONAL INFORMATION
Paper Prototyping: , ,
, ,
Usability Testing: and
- Steve Krug
Personas: - Pruitt & Adlin
PowerPoint / Keynote:
Muse:
General UX: , , , ,
, , ,
Ditch the pixel-perfect comp and use
iOS design elements Sneakpeekit UI
Stencils Speckyboy list POP 2.0
Don’t Make Me Think Rocket Surgery Made
Easy
The Essential Persona Lifecycle
Keynotopia
Muse Jams
UIE UX Magazine Rosenfeld Media UXMastery
A List Apart Lynda Interaction Design Foundation 52 Weeks
of UX
Style Tiles

63. THANKS!
ShilpaThanawala
@skthana