kill your darlings: solving design by throwing away your prototypes

34
Kill Your Darlings Solving Design by Throwing Away Prototypes October 24, 2014 Joe Sokohl @RegJoeConsults @MojoGuzzi

Upload: regular-joe-consulting

Post on 05-Dec-2014

188 views

Category:

Design


1 download

DESCRIPTION

Wireframing has held sway over UXers for the past 20 years. From its metaphoric origins in filmmaking to its pinnacle in countless UX books, wireframing stood as a key approach in defining both structure & interaction. In recent years, however, wireframing has come under attack. UX thinkers propose replacing wireframes with sketches and prototypes; yet we need to understand that bridge between idea and specification.

TRANSCRIPT

Page 1: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

Kill Your Darlings Solving Design by Throwing Away Prototypes

October 24, 2014

Joe Sokohl

@RegJoeConsults @MojoGuzzi

Page 2: Kill Your Darlings: Solving Design by Throwing Away Your 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 Your Prototypes

!3@RegJoeConsults

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

Page 4: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!4@RegJoeConsults

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

Page 5: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!5@RegJoeConsults

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

Page 6: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!6@RegJoeConsults

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

Page 7: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!7@RegJoeConsults

Page 8: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!8@RegJoeConsults

Page 9: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!9@RegJoeConsults

…version 28!

Page 10: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!10

PrototypesCats and dogs living together

Page 11: Kill Your Darlings: Solving Design by Throwing Away Your 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 12: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

Why Should We Prototype?

!12@RegJoeConsults

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

Page 13: Kill Your Darlings: Solving Design by Throwing Away Your 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 14: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!14@RegJoeConsults

Page 15: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!15@RegJoeConsults

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

Page 16: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!16

Throwaway versus EvolutionaryWhich do we use?

Page 17: Kill Your Darlings: Solving Design by Throwing Away Your 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 18: Kill Your Darlings: Solving Design by Throwing Away Your 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 19: Kill Your Darlings: Solving Design by Throwing Away Your 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

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

Page 20: Kill Your Darlings: Solving Design by Throwing Away Your 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 21: Kill Your Darlings: Solving Design by Throwing Away Your 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 22: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!22@RegJoeConsults

TAP TAP/EVP

EVPTAP

Paper

Screen  comps

Axure/Balsamiq/ iPlotz/iMockup...

Sketchflow/Expression  Edge

Fireworks

Hand-­‐coded  HTML

Page 23: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!23

Melding sketches, quick wireframes, and prototyping

Case Study

Page 24: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

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

!24@RegJoeConsults

From this… To this…

Page 25: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

We Did…

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

!25@RegJoeConsults

Page 26: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

Mobile First

Page 27: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

Mobile 2

Page 28: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

Digital Exploration

!28

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 29: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!29

Desktop sketch

Page 30: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

..

!30

Page 31: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

More Realized Sketches -- Version 1

!31

Page 32: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

More Realized Sketches -- Version 2

!32

Page 33: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

Prototyping in Axure (but it could be anything)

!33@RegJoeConsults

Page 34: Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

!34

Many thanks!

Joe Sokohl

[email protected]

@RegJoeConsults