University of Illinois WebCon 2016 Rapid prototyping allows you to quickly test out ideas, discover the duds and build up the winners, efficiently steering towards the best solutions. However, creating prototypes rapidly is often easier said than done. This talk will advance the discussion beyond simply high-fidelity or low-fidelity to a more nuanced understanding of prototype complexity. We'll explore how fine tuning each of the six dimensions of fidelity can significantly reduce the amount of effort needed to accomplish your prototypes goals. I will share real world examples of how this approach has helped to hone building prototypes on a fast-paced agile development team. In this presentation you'll learn: How prototyping can fit into your design process How to identify and focus your prototyping goals How to select the right level of fidelity to achieve those goals

1. Beyond High or Low:
Multi-fidelity Rapid Prototyping
Hannah Deering @hannahd_ux
Unsplash | Caleb George
Senior UX Designer, Workiva

3. UX Designers UX Developers
Visual
Designers
UX Researchers
Content
Writers

4. Rapid Prototyping is
Intentional Prototyping
Unsplash | Caleb George

5. 1 Process
2 Goals & Constraints
3 Fidelities
4 Examples & Tools

6. 1 Process
2 Goals & Constraints
3 Fidelities
4 Examples & Tools

7. Prototype
an inexpensive, experimental preliminary
model of something, from which other
forms are developed or copied

8. Why Rapid?
1) Time is money
2) Try more ideas
3) Fail faster

9. Think &
Empathize
Make
Check

10. 1 Process
2 Goals & Constraints
3 Fidelities
4 Examples & Tools

11. Identify Your Current Goal

12. 1
Explore
concepts yourself or with others
Unsplash | Lacey Raper

13. 2
Validate
concepts with users
Unsplash | timothy muza

14. 3
Prove
concepts are feasible
Unsplash | ⻉贝莉⼉儿 NG

15. 4
Communicate
concepts with others
startupstockphotos.com

16. Identify Your Constraints
Collaborators?
Audience?
Time?
Tools?
Platform?

17. Everytime you begin prototype, ask yourself:
What is the CHEAPEST,
FASTEST way to
?
INSERT GOAL
INSERT WHAT YOU ARE PROTOTYPING

18. 1 Process
2 Goals & Constraints
3 Fidelities
4 Examples & Tools

19. Low-Fidelity Prototype
sabazaidi.com

20. Mixed-Fidelity Prototype
StockSnap.io | Marcin Milewski

21. Mixed-Fidelity Prototype
StockSnap.io | Marcin Milewski
By using these dimensions to inform prototype development, and
recognizing that each is fully independent and can be manipulated
separately, it is possible to create mixed-fidelity prototypes that
more precisely apply prototyping resources in support of specific
end goals.
“Breaking the Fidelity Barrier” - CHI 2006
Michael McCurdy, Christopher Connors, Guy Pyrzak1, Bob Kanefsky, and Alonso Vera

22. Star Wars The Old Republic | swtor.com

23. StockSnap.io | Marcin Milewski
Rapid Prototyping is
Intentional Prototyping

24. 6 Dimensions of Fidelity

25. Breadth
FOCUSED EXPANSIVE
Jaimee DunningRay Luong

26. Depth
SHALLOW DEEP
Asia VanderbiltAsia Vanderbilt

27. Visuals
onextrapixel.com torquemag.io dribbble | Tiberiu Neamu
SKETCHY POLISHED

28. Interactions
STEP THROUGH MICROINTERACTIONS
DrupalNintendo

29. Data Model
PLACEHOLDERS LIVE DATA

30. Context
STANDIN IN THE FIELD
* not from McCurdy et al.
Cosmic RaySoftonic

31. What is the CHEAPEST, FASTEST way to
?
Breadth
Depth
Interactions
Visuals
Data Model
Context
Explore Validate Prove Communicate
Focused Expansive
Shallow Deep
Steps MicroIX
Sketchy Polished
Placeholder Live Data
Stand-in In the Field

32. 1 Process
2 Goals & Constraints
3 Fidelities
4 Examples & Tools

33. 1
2
complexity
phase in process
4
3

34. 1
2
complexity
phase in process
4
3
1

35. Breadth
Depth
Interactions
Visuals
Data Model
Context
Focused Expansive
Shallow Deep
Steps MicroIX
Sketchy Polished
Placeholder Live Data
Stand-in In the Field
What is the CHEAPEST, FASTEST way to
the value of adding task functions to the app
x
x
x
x
x
x
VALIDATE
1

36. + quick & easy
+ present linear story
+ add basic animation
creativebloq.com
Tools1

37. 1
2
complexity
phase in process
4
3
2

38. Breadth
Depth
Interactions
Visuals
Data Model
Context
Focused Expansive
Shallow Deep
Steps MicroIX
Sketchy Polished
Placeholder Live Data
Stand-in In the Field
What is the CHEAPEST, FASTEST way to
various concepts for filtering tasks
EXPLORE
x
x
x
x
x
x
2

39. + wysiwyg editor
+ quickly add object
interactions
Tools2

40. 1
2
complexity
phase in process
4
33

41. Breadth
Depth
Interactions
Visuals
Data Model
Context
Focused Expansive
Shallow Deep
Steps MicroIX
Sketchy Polished
Placeholder Live Data
Stand-in In the Field
What is the CHEAPEST, FASTEST way to
the potential for improving call center system
COMMUNICATE
x
x
x
x
x
x
3

42. + templates/reuse
+ static site generator
+ prebuilt widgets & grid
Tools3

43. 1
2
complexity
phase in process
4
3
4

44. Breadth
Depth
Interactions
Visuals
Data Model
Context
Focused Expansive
Shallow Deep
Steps MicroIX
Sketchy Polished
Placeholder Live Data
Stand-in In the Field
What is the CHEAPEST, FASTEST way to
the value of adding task functions to the app
x
x
x
x
x
x
VALIDATE
4

45. + prebuilt widgets & grid
+ simple authentication
+ persistent data in JSON
Tools4

46. InVision
+ really fast
+ click through mocks
Principle & Atomic
+ animations
+ micro-interactions
UXPin
+ collaboration
+ prebuilt widgets
Other Tools
cooper.com/prototyping-tools

47. StockSnap.io | Marcin Milewski
Rapid Prototyping is
Intentional Prototyping

48. Activity

49. Further Reading
Breaking the Fidelity Barrier - Michael McCurdy et al.
http://dl.acm.org/citation.cfm?id=1124959
Flavors of Prototypes - Marty Cagan
svpg.com/flavors-of-prototypes
High-Fidelity Prototypes - Marty Cagan
svpg.com/high-fidelity-prototypes
Product Discovery With Live-Data Prototypes - Marty Cagan
svproduct.com/product-discovery-with-live-data-prototypes
Design Better And Faster With Rapid Prototyping - Lyndon Cerejo
smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping