kill your darlings: solving design by throwing away prototypes

43
Kill Your Darlings Solving Design by Throwing Away Prototypes March 24, 2015 Joe Sokohl @RegJoeConsults @MojoGuzzi

Upload: regular-joe-consulting

Post on 16-Jul-2015

252 views

Category:

Design


4 download

TRANSCRIPT

Page 1: 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

Page 2: Kill your darlings: Solving design by throwing away prototypes

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

Page 3: Kill your darlings: Solving design by throwing away prototypes

!3@RegJoeConsults

Page 4: Kill your darlings: Solving design by throwing away prototypes

!3@RegJoeConsults

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

Page 5: Kill your darlings: Solving design by throwing away prototypes

!3@RegJoeConsults

Page 6: Kill your darlings: Solving design by throwing away prototypes

!4@RegJoeConsults

Page 7: Kill your darlings: Solving design by throwing away prototypes

!4@RegJoeConsults

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

Page 8: Kill your darlings: Solving design by throwing away prototypes

!4@RegJoeConsults

Page 9: Kill your darlings: Solving design by throwing away prototypes

!5@RegJoeConsults

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

Page 10: Kill your darlings: Solving design by throwing away prototypes

!6@RegJoeConsults

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

Page 11: Kill your darlings: Solving design by throwing away prototypes

!7@RegJoeConsults

Page 12: Kill your darlings: Solving design by throwing away prototypes

!8@RegJoeConsults

Page 13: Kill your darlings: Solving design by throwing away prototypes

!9@RegJoeConsults

…version 28!

Page 14: Kill your darlings: Solving design by throwing away prototypes

!10

PrototypesCats and dogs living together

Page 15: Kill your darlings: Solving design by throwing away prototypes

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

Page 16: Kill your darlings: Solving design by throwing away prototypes

Why Should We Prototype?

!12@RegJoeConsults

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

Page 17: Kill your darlings: Solving design by throwing away prototypes

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

Page 18: Kill your darlings: Solving design by throwing away prototypes

!14@RegJoeConsults

Page 19: Kill your darlings: Solving design by throwing away prototypes

!14@RegJoeConsults

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

Page 20: Kill your darlings: Solving design by throwing away prototypes

!15@RegJoeConsults

Page 21: Kill your darlings: Solving design by throwing away prototypes

!15@RegJoeConsults

Page 22: Kill your darlings: Solving design by throwing away prototypes

!16

Throwaway versus EvolutionaryWhich do we use?

Page 23: Kill your darlings: Solving design by throwing away prototypes

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

Cycle of Design

Page 24: Kill your darlings: Solving design by throwing away prototypes

�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

Page 25: Kill your darlings: Solving design by throwing away prototypes

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

Page 26: Kill your darlings: Solving design by throwing away prototypes

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?

Page 27: Kill your darlings: Solving design by throwing away prototypes

!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

Page 28: Kill your darlings: Solving design by throwing away prototypes

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

Page 29: Kill your darlings: Solving design by throwing away prototypes

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

Page 30: Kill your darlings: Solving design by throwing away prototypes

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

Sketching vs. Prototyping

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

Page 31: Kill your darlings: Solving design by throwing away prototypes

!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

Page 32: Kill your darlings: Solving design by throwing away prototypes

!24

Melding sketches, quick wireframes, and prototyping

Case Study

Page 33: Kill your darlings: Solving design by throwing away prototypes

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

!25@RegJoeConsults

From this… To this…

Page 34: Kill your darlings: Solving design by throwing away prototypes

We Did…

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

!26@RegJoeConsults

Page 35: Kill your darlings: Solving design by throwing away prototypes

Mobile First

Page 36: Kill your darlings: Solving design by throwing away prototypes

Mobile 2

Page 37: Kill your darlings: Solving design by throwing away prototypes

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

Page 38: Kill your darlings: Solving design by throwing away prototypes

!30

Desktop sketch

Page 39: Kill your darlings: Solving design by throwing away prototypes

..

!31

Page 40: Kill your darlings: Solving design by throwing away prototypes

More Realized Sketches -- Version 1

!32

Page 41: Kill your darlings: Solving design by throwing away prototypes

More Realized Sketches -- Version 2

!33

Page 42: Kill your darlings: Solving design by throwing away prototypes

Prototyping in Axure (but it could be anything)

!34@RegJoeConsults

Page 43: Kill your darlings: Solving design by throwing away prototypes

!35

Many thanks!

Joe Sokohl

[email protected]

@RegJoeConsults