Slides from my intro UX class at School for Visual Concepts. This week, we’re going to dive into the basics of prototyping! For our studio exercise, we're going to have a clickable prototype by the end of the class using the POP app (Prototyping on Paper). And since a good prototype always has a purpose, we’re going to dip our toe into guerrilla usability testing and learn just enough to understand what we need to prototype.

1. Prototypes + Guerrilla Usability Testing
Session 4 - July 17, 2014
School of Visual Concepts - UX1
http://svc-ux1.leannagingras.com

2. Week 1: what does “doing UX” mean?
what does UX look like in the real world? how do we talk to users?
Week 2: User-centered design
how do we transform interview insights to design ideas?
Week 3: Sketching and ideating
how do we create good ideas and good designs?
Week 4: Prototyping and guerrilla testing
how do we communicate our designs and measure their impact?
Everything below here is tentative and will be adjusted to taste!
Week 5: Panel - Making an impact with UX
how do we make our UX work count?

3. Agenda
● A week in the life
● Homework!
● Lecture: Prototyping
● Guerrilla usability
● Studio: Make a POP prototype

4. PROTOTYPING

5. From Bill Buxton’s “Sketching the User Experience”

6. Shit or get off the pot.

8. Sketches and prototypes are both
instantiations of the design concept.
However they serve different
purposes, and therefore are
concentrated at different stages of
the design process. Sketches
dominate the early ideation stages,
whereas prototypes are more
concentrated at the later stages
where things are converging within
the design funnel.
–Bill Buxton, Sketching User
Experiences

9. PROTOTYPES HAVE PURPOSES
Working through a design
Shared communication
Selling your idea internally
Usability testing
Gauging technical feasibility and
value
From Protoyping: A Practitioner's Guide

10. WORKING THROUGH A DESIGN

11. Example: 93 Stars

12. From Bill Buxton’s “Sketching the User Experience”

13. Sketch a Move - https://vimeo.com/5125096
CREATE SHARED COMMUNICATION

14. Prototype example: ARMuseum. We used a sliding paper prototype to show how the augmented
reality overlay would change as the user panned their phone across the room. We took this approach
because it was difficult to communicate this with static images.

15. Example: TMO DR

16. Clay model of an Audi. Industrial designers, architects
and engineers build models to align investors and
stakeholders before investing in costly builds.
SELL YOUR IDEA INTERNALLY

17. Prototype example: TMO Coverage Kiosk

18. USABILITY TESTING
Jeff Hawkins tested the PalmPilot’s design with his model, using a chopstick for a stylus. He took
pretend notes in meetings, and counted the steps it took to perform common tasks.

19. http://leannagingras.com/prototypes/Videojet/Usability%20Test%20Prototype/Prototype/

20. Pong prototype, 1972.
From Wikipedia: “Dabney wanted the game
to "boo" and "hiss" when a player lost a
round. Alcorn had limited space available
for the necessary electronics and was
unaware of how to create such sounds with
digital circuits.
After inspecting the sync generator, he
discovered that it could generate different
tones and used those for the game's sound
effects.[3][7] …
The prototype impressed Bushnell and
Dabney so much that they felt it could be a
profitable product and decided to test its
marketability.[3]
In September 1972, Bushnell and Alcorn
installed the Pong prototype at a local bar,
Andy Capp's Tavern.”
FEASIBILITY

21. TOOLS
There are dozens and dozens out there. Use what fits the job. Here are
some very basic and cheap options:
● Paper prototypes
● POP iPhone app
● Balsamiq
● Fluid

22. http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes

23. ONLY PROTOTYPE WHAT YOU NEED
Scenario 3: Find Performance Details for a Particular Printer.
Goals
■ Review the way the participant searches for products, and finds specific product performance specifications.
■ Determine if the nomenclature reflects the user’s expectation for the content areas.
Possible Paths
■ Path 1: Homepage > Our Solutions > Navigation: Small Character Ink Jet
■ Path 2: Homepage > Our solutions > Printers > Small Character Ink Jet > 1550 Product page
Tasks
■ Now we would like to know where you would expect to find performance details. Please show us where to find the
maximum line speed for our new small character printer, the Videojet 1550 printer.
The pages I built for this prototype was based on what I needed for the usability test:

24. PROTOTYPING POP QUIZ
Your R&D team wants to develop a “smart” ball that you can play augmented
reality games with, such as Catch or Capture the Flag. How would you prototype
for these scenarios?
● You want to make sure that target users such as teenagers or college
students like the concept.
● You want to make sure it’s easy to use the iPhone app to program the ball.
● The ball’s hardware team and iPhone’s design/dev team need to
collaboratively build the interaction between the two devices.
● You want to convince your company’s C-level executives to fund your project.
● You want to fine-tune the gameplay mechanics before you finalize it and take
it to market.

25. GUERRILLA USABILITY

27. VALIDATE EARLY & OFTEN
The earlier you start getting
feedback about your design,
the better.
Don’t wait for perfect; get
your rough prototypes in
front of users ASAP

28. 93 STARS GUERRILLA USABILITY TEST
In-class guerrilla usability test of the 93 Stars POP Prototype!
What were your findings?
● couldn’t figure out camera button
● confused by initial screen - could eat? have eaten?
● trends - doesn’t make sense until you understand that they’re from taking pics of the food
● trends - is yellow good or bad? gray stars I forgot to put anything in
● “7 stars?”
● pictures more attractive than camrea button (2 users)
● “the pizza must not have been very yummy” “potato chips 3 stars!”
● hard to understand what the stars are rating, no way to know what it means at the start
● you can’t tell when you’re done! what screen is the end?
● the trend page isn’t a good indicator that you’re done - and it’s not clear what the trend page is
● 93 stars means you ate poorly!
● “I ate such great food this week”

29. 93 STARS GUERRILLA TEST VIDEOS
https://www.youtube.com/watch?v=tuB0PGCKFZkhttps://www.youtube.com/watch?v=1qUEpKYpvGY

30. 93 STARS GUERRILLA TEST
FINDINGS
● not clear what the camera icon does
● need clearer confirmation after photo is taken
● not clear that this is a healthy eating app (“stars” = “delicious”)
● Trends button looks like a Settings gear icon
● Trends screen is overall confusing, especially with color coding
This informal model of guerrilla testing lends itself well to iterative prototyping.
It’s relatively straightforward to pick out big problems and use paper, tape and
scissors to tweak the prototype before inflicting it on the next participant.

31. GUERRILLA USABILITY: PLANNING
Test goals:
● specific things you want to learn from this
● “do people understand what the camera icon does?”
Tasks:
● give them a specific task, don’t just say “try it out”
● word tasks as scenarios - “imagine you need a new ski outfit”
● don’t tell them how to do it - ask them to show you how to do it

32. GUERRILLA USABILITY: EXECUTION TIPS
● usability testing is actually an interview in disguise
● ask them to think aloud and narrate what they’re doing
● “describe what you’re looking at”
● “what did you do there?”
● “what were you expecting to happen?”
● if they click on something that you didn’t build? ask
them what they expected

33. Studio: Make a POP prototype
Get into groups of 3-4.
Pick up where you left off last week (or mix it up with a different group)
and build a POP prototype.
We’ll share our prototypes and discuss!

34. Julie doesn’t want to manage any paper documents. She’s
gone paperless wherever she can, but she still gets
paperwork that needs to go into her records, for example,
hospital discharge papers. She wants to be able to take
pictures of these documents and then easily search
through them whenever she wants.

35. Homework: Prototype your project
Sketch out one key workflow
Make a prototype in anything you want: paper, POP, Axure, Balsamiq...
Put it in front of some people and get feedback!