kill your darlings: solving design by throwing away prototypes

Kill Your Darlings Solving Design by Throwing Away Prototypes

March 24, 2015

Joe Sokohl

@RegJoeConsults @MojoGuzzi

What We’ll Talk About

§A brief history of wireframing

§The benefits of prototyping

§Why throw away your work?

§A case study showing a redesign process as an archetypal and practical approach

!2@RegJoeConsults

!3@RegJoeConsults

!3@RegJoeConsults

http://deneroff.com/blog/wp-content/uploads/2012/01/Futureworld-02.jpg

!3@RegJoeConsults

!4@RegJoeConsults

!4@RegJoeConsults

http://www.fastaanytimelock.com/Frank-Lloyd-Wright-Falling-Water-Site-Blueprint-by-BlueprintPlace.html

!4@RegJoeConsults

!5@RegJoeConsults

http://en.wikipedia.org/wiki/Prograph

!6@RegJoeConsults

http://www.levenez.com/NeXTSTEP/InterfaceBuilder.jpg

!7@RegJoeConsults

!8@RegJoeConsults

!9@RegJoeConsults

…version 28!

!10

PrototypesCats and dogs living together

What is a prototype, anyway?

!11@RegJoeConsults

Representa)ve  model  or  simula)on  of  the  final  system

Todd  Zaki  Warfel,Prototyping:  A  Prac//oner’s  Guide

Why Should We Prototype?

!12@RegJoeConsults

Reduced  risk  Smaller  systems  Less  complex  systems  Reduc)on  in  creeping  requirements  Improved  visibility

Why Should We Prototype?

!13@RegJoeConsults

Genera)ve  Show,  tell  &  experience  Reduc)on  of  misinterpreta)on  Savings  in  )me/effort/money  Reduc)on  of  waste  Real-­‐world  value

!14@RegJoeConsults

!14@RegJoeConsults

…taken to design meetings where they are used to provide a physical reference for discussion and analysis.

!15@RegJoeConsults

!15@RegJoeConsults

!16

Throwaway versus EvolutionaryWhich do we use?

�17@RegJoeConsultshttp://www.flickr.com/photos/rosenfeldmedia/3978302604/

Cycle of Design

�17@RegJoeConsultshttp://www.flickr.com/photos/rosenfeldmedia/3978302604/

As I see it, knowing how to prototype, test, and evaluate results quickly is the most valuable skill for designers of persuasive technology. BJ  Fogg,  “Crea)ng  Persuasive  Technologies:  An  Eight-­‐Step  Design  Process”

Cycle of Design

The Perils of Prototyping

Which is harder to change: a program with 1000 lines of code or a 1000 square foot slab of concrete? § The concrete is ten inches thick and has steel reinforcing rods

criss-crossing within it. Every cubic foot of it weighs almost 100 pounds.

§ The software has almost no physical existence at all. It weighs nothing. It consumes no space. A few microamps and those bits flip from zero to one without a second glance.

!18@RegJoeConsults

http://www.cooper.com/journal/2008/05/the_perils_of_prototyping

The Perils of Prototyping

Which is harder to change: a program with 1000 lines of code or a 1000 square foot slab of concrete? § The concrete is ten inches thick and has steel reinforcing rods

criss-crossing within it. Every cubic foot of it weighs almost 100 pounds.

§ The software has almost no physical existence at all. It weighs nothing. It consumes no space. A few microamps and those bits flip from zero to one without a second glance.

!18@RegJoeConsults

http://www.cooper.com/journal/2008/05/the_perils_of_prototyping

The answer to my question seems a simple one, doesn’t it?

!19@RegJoeConsults

This is the first one. This is it exactly. This is my hand-wired prototype, not a real Apple I or Apple ][ PC board. There are 4 white 2KB EPROMs on the upper board - that's how I developed BASIC and all the other routines of the Apple I. This is an Apple ][ prototype. I can tell by how few chips it is. The Apple I had a computer board attached to my video terminal board, in the prototype stage." __Steve Wozniak

hTp://www.geekculture.com/joyoWech/joystuff/apple1cake/firstapple.jpg

Use evolutionary prototypes (EVPs) when…

§User requirements are (almost) defined. §Few interaction and visual design problems exist, and information architecture is defined.

§UX team is highly experienced. §UXers also create the deployable front-end code. §Usability testing is summative, not formative. §Project requires little documentation.

!20

Use throwaway prototypes (TAPs) when…

§User requirements are ill-defined. §Major interaction or visual design (or both) issues remain, and the IA is not well defined.

§You have less experienced UXers. §UX does not do development. §Usability testing is formative and occurs multiple times throughout the project.

§Project requires detailed documentation.

!21

�22@RegJoeConsultshttp://www.flickr.com/photos/rosenfeldmedia/3978302604/

Sketching vs. Prototyping

Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design

!23@RegJoeConsults

TAP TAP/EVP

EVPTAP

Paper

Axure

Macaw/Webflow

Fireworks/Sketch/Photoshop/Illustrator/InDesign….

HTML/JS/CSS

Balsamiq/ iPlotz/iMockup... + Firm Reqs– Vague Reqs

+ Design Details

– Design Details

!24

Melding sketches, quick wireframes, and prototyping

Case Study

The Project: Redesign site into a modern, user-centered experience

!25@RegJoeConsults

From this… To this…

We Did…

§Heuristic analysis §Data analysis §Market research analysis § Personas §Mood boards & visual design §User journeys/scenarios

!26@RegJoeConsults

Mobile First

Mobile 2

Digital Exploration

!29

Carrier 12:00 PM

Page Title

http://www.domain.com Google

Up to 150% of amount purchased

Up to 150% of amount purchased

Up to 150% of amount purchased

Trip interruption protection

Trip interruption protection

Trip interruption protection

Trip interruption protection

Trip interruption protection

1 2 3

1 Classic w/Trip +

2 Classic

3 Basic

$356

$326

$256

Benefits Coverages

!30

Desktop sketch

..

!31

More Realized Sketches -- Version 1

!32

More Realized Sketches -- Version 2

!33

Prototyping in Axure (but it could be anything)

!34@RegJoeConsults

!35

Many thanks!

Joe Sokohl

joe@RegularJoeConsulting.com

@RegJoeConsults