Prototyping – at all fidelity levels

A rapid overview of various types and fidelity levels of prototyping, and how they fit in to the design and development cycle.

===============

Performed as Guest lecture at UNSW, on 11th September 2018

www.vanhelbergen.com
www.twitter.com/vanhelbergen

===============

Speaker notes:

As who loves fitness?
Get some hands in the air.

Reveal that they were actually volunteering to do planks on stage - bring them up for the duration of the talk.

Talk about how in testing, you have to frame your questions in a way to not bias the answer

Fake it til you make it

A bit about my journey.

DTP freelance/webagency student
Computer Science —> Information Science (UX Design)
Accenture, Google: design on the side
Startups: delta method brandwatch
Accenture: product design, design system

How UX relates to business analyst?

This will probs feel rushed. Ask questions throughout.

Intro
What is prototyping?
Where does it fit?
How do you convert requirements into prototypes
Types:
which
what they’re good/ bad for
when to use which

Design Thinking according to Stanford School, is a linear process
building a product, is a circular process

This design flow exists on many levels, scales and variants
GOAL:
Validate assumptions
Generate confidence in direction

Design process is about making -> Doing is the best kind of thinking —> show don’t tell
Find the quickest path to the experience
Use methods and materials that move at the speed of though to maximise learning

At what stage are you at? and how can we make the learning loop smaller?

Test the right thing, know your riskiest assumption, ask the right question
Test it in the right way, figure out how to measure it,
Build it in the right way: Get there fast, Cheap, easy, Choose the right tool for the job

So what are the tools

How do you bring ideas to life?

Ranges in fidelity, complexity and testability

Range from wireframes -> lofi mocks -> hifi mocks -> click through dummies

Range micro interactions -> flows -> parts of apps -> A/B testing

A/B Prototypes

Design Thinking -> linear
Product -> circular
GOAL:
Validate assumptions and
Generate confidence in direction

Ask the right question

Doing is the best kind of thinking —> show don’t tell
Find the quickest path to the experience

Use methods and materials that move at the speed of though to maximise learning

Test the right thing
Ask the right question

Test it in the right way
Figure out how to measure it

Build it in the right way
Choose the right tool for the job

We're hiring

Transcript

1. ALLARD VAN HELBERGEN | SR UX DESIGNER | @VANHELBERGEN Prototyping At all fidelity levels
2. Who loves fitness? THE LIE THE TRUTH
3. Who wants to volunteer to do planks during my talk to help me demonstrate a point? Who loves fitness? THE LIE THE TRUTH
4. SOMETIMES YOU HAVE TO LIE IN ORDER TO GET LESS BIASED ANSWERS.
5. LIAR | LIAR | @PANTSONFIRE Fake it At all fidelity levels
6. JUST A GUY | DESIGNER | @FIGURINGSTUFFOUT Asking the right question At all fidelity levels
7. Not a bio Because they say you shouldn’t do one
8. Freelance and Web agency work as a student Computer science, then Information Science Google, Brandwatch and now Atlassian.
9. What’s the difference between BA and UX?
10. Prototypes yay! image courtesy of @alecuffia, unsplash.com
11. Define Ideate Prototype Test Understand & Empathise
12. It’s about asking the right question at the right time.
13. Prototyping fidelity levels From least complex to most complex Mocks Code Paper Physical
14. Prototyping fidelity levels From least complex to most complex Mocks Code Paper Physical
15. Hanmail Paper Prototype, https://youtu.be/GrV2SZuRPv0
16. The One Academy, Game Paper Prototype, https://youtu.be/8lUYlo08qtI
17. Paper Prototyping Overview Pros Cons The easiest by far Get started immediately Print or sketch your UI flows, arrange them as needed, move components by hand when a user “clicks” on them. Modify on the fly If a user does something unexpected, simply sketch a new flow to support it on the fly.
18. Paper Prototyping Overview Pros Cons Pros Time to become an expert: 52s seconds 
 Tell your story with little preparation Change your flow on the fly
19. Paper Prototyping Overview Pros Cons Cons Bad for late stage prototypes. Paradox of choice means some users wont enjoy the flexibility and lack of rails. Low fidelity mockups confuse some users
20. Prototyping fidelity levels From least complex to most complex Mocks Code Paper Physical
21. Atlassian, Roadmap Hi-Fi mocks
22. Adobe, Prototyping 101, https://theblog.adobe.com/prototyping-difference-low-fidelity-high-fidelity-prototypes-use/
23. Clickthrough Prototyping Overview Pros Cons Real look, fast execution Reactive hotspots High fidelity mockups that are a series of images with hotspots that react to events Tools (oh gosh, so many) Sketch, Framer, Adobe XD, UX pin, Principle Axure, Balsamiq Invision, gallery.io, …Insert new hipster tool here…
24. Clickthrough Prototyping Overview Pros Cons Pros Time to become an expert: 1 day 
 Relatively easy once your designs are done High fidelity appearance
25. Clickthrough Prototyping Overview Pros Cons Cons Hard rails highly limit what a user can do. No micro interactions detracts from the overall feel of the prototype. Get caught on the wrong details for both users and designers.
26. Prototyping fidelity levels From least complex to most complex Mocks Code Paper Physical
27. Atlassian, Roadmap code prototype
28. Code Prototyping Overview Pros Cons I can’t believe it isn’t real! As real as the Tupac hologram Practically indistinguishable from the actual product within the parts that are built out. Infinite flexibility Anything you can do for real you can do with a code prototype. Tools Existing libraries (node, react, bootstrap) Existing codebase
29. Code Prototyping Overview Pros Cons Pros Visually identical pages, including transitions and animations 
 Reference app for the devs. Lets them pull code directly resulting in pixel perfect final products. Microinteractions are testable
30. Code Prototyping Overview Pros Cons Cons Time to become an expert: 15 days No live data means you aren’t testing the exact projects the user is familiar with Late stage or mid stage is the only appropriate time for a code prototype.
31. Prototyping fidelity levels From least complex to most complex Mocks Code Paper Physical
32. Google, Rapid prototyping, https://youtu.be/d5_h1VuwD6g
33. image courtesy of @spendude, unsplash.com
34. Code Prototyping Overview Pros Cons I can’t believe this works! The most basic functionality Mimic the experience by repurposing parts from other things things that already work Infinite flexibility Your own imagination is the limit Tools Clay, plastic, any raw material Arduino, Rasberry pi Anything you can think of…
35. Code Prototyping Overview Pros Cons Pros Very powerful gives you lots of insight 
 Allows you to move around giving insight into what it would be like to use physically. Technical implications become apparent very quickly
36. Code Prototyping Overview Pros Cons Cons Time to become an expert: 30 days Prior Knowledge helps a lot when doing this, e.g. Coding. Materials can be a challenge. Creativity is your friend here.
37. Conclusion double-yay! image courtesy of @alecuffia, unsplash.com
38. Define Ideate Prototype Test Understand & Empathise
39. Prototyping fidelity levels From least complex to most complex Mocks Code Paper Physical
40. Test the right thing Ask the right question Asking the right question at the right time Test it in the right way Find the quickest path to the experience Build it fast Use methods and materials that move at the speed of though to maximise learning
41. DON’T TEST MORE THAN YOU NEED TO. WORK SMART. PROTOTYPE QUICKLY.