Beyond High or Low: Multi-fidelity Rapid Prototyping

Hannah Deering @hannahd_ux

Unsplash | Caleb George

Senior UX Designer, Workiva

UX Designers UX Developers

Visual Designers

UX Researchers

Content Writers

Rapid Prototyping is Intentional Prototyping

Unsplash | Caleb George

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

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

Prototype

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

Why Rapid?

1) Time is money 2) Try more ideas 3) Fail faster

Think & Empathize

Make

Check

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

Identify Your Current Goal

1

Explore concepts yourself or with others

Unsplash | Lacey Raper

2

Validate concepts with users

Unsplash | timothy muza

3

Prove concepts are feasible

Unsplash | ⻉贝莉⼉儿 NG

4

Communicate concepts with others

startupstockphotos.com

Identify Your Constraints

Collaborators? Audience? Time? Tools? Platform?

Everytime you begin prototype, ask yourself:

What is the CHEAPEST, FASTEST way to

?INSERT GOAL

INSERT WHAT YOU ARE PROTOTYPING

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

Low-Fidelity Prototype

sabazaidi.com

Mixed-Fidelity Prototype

StockSnap.io | Marcin Milewski

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

Star Wars The Old Republic | swtor.com

StockSnap.io | Marcin Milewski

Rapid Prototyping is Intentional Prototyping

6 Dimensions of Fidelity

Breadth

FOCUSED EXPANSIVEJaimee DunningRay Luong

Depth

SHALLOW DEEPAsia VanderbiltAsia Vanderbilt

Visuals

onextrapixel.com torquemag.io dribbble | Tiberiu Neamu

SKETCHY POLISHED

Interactions

STEP THROUGH MICROINTERACTIONSDrupalNintendo

Data Model

PLACEHOLDERS LIVE DATA

Context

STANDIN IN THE FIELD

* not from McCurdy et al.

Cosmic RaySoftonic

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

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

12

complexity

phase in process

4

3

12

complexity

phase in process

4

3

1

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

xx

xxx

x

VALIDATE1

+ quick & easy

+ present linear story + add basic animation

creativebloq.com

Tools1

12

complexity

phase in process

4

3

2

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

xx

xx

xx

2

+ wysiwyg editor + quickly add object

interactions

Tools2

12

complexity

phase in process

4

33

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

xx

xx

xx

3

+ templates/reuse + static site generator

+ prebuilt widgets & grid

Tools3

12

complexity

phase in process

4

3

4

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

xx

xx

xx

VALIDATE4

+ prebuilt widgets & grid

+ simple authentication + persistent data in JSON

Tools4

InVision + really fast + click through mocks

Principle & Atomic + animations+ micro-interactions

UXPin + collaboration + prebuilt widgets

Other Tools

cooper.com/prototyping-tools

StockSnap.io | Marcin Milewski

Rapid Prototyping is Intentional Prototyping

Activity

Further ReadingBreaking 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