Kill Your Darlings 
Solving Design by Throwing Away Prototypes 
October 24, 2014 
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 
@RegJoeConsults!2
http://deneroff.com/blog/wp-content/uploads/2012/01/Futureworld-02.jpg 
@RegJoeConsults!3
http://www.fastaanytimelock.com/Frank-Lloyd-Wright-Falling-Water-Site-Blueprint-by-BlueprintPlace.html 
@RegJoeConsults!4
http://en.wikipedia.org/wiki/Prograph 
@RegJoeConsults!5
http://www.levenez.com/NeXTSTEP/InterfaceBuilder.jpg 
@RegJoeConsults!6
@RegJoeConsults!7
@RegJoeConsults!8
…version 28! 
@RegJoeConsults!9
!10 
Prototypes 
Cats and dogs living together
What is a prototype, anyway? 
Representa)ve 
model 
or 
simula)on 
of 
the 
final 
system 
Todd 
Zaki 
Warfel, 
Prototyping: 
A 
Prac//oner’s 
Guide 
@RegJoeConsults!11
Why Should We Prototype? 
@RegJoeConsults!12 
Reduced 
risk 
Smaller 
systems 
Less 
complex 
systems 
Reduc)on 
in 
creeping 
requirements 
Improved 
visibility
Why Should We Prototype? 
@RegJoeConsults!13 
Genera)ve 
Show, 
tell 
& 
experience 
Reduc)on 
of 
misinterpreta)on 
Savings 
in 
)me/effort/money 
Reduc)on 
of 
waste 
Real-­‐world 
value
@RegJoeConsults!14
…taken to design meetings 
where they are used to provide a 
physical reference for discussion 
and analysis. 
@RegJoeConsults!15
!16 
Throwaway versus Evolutionary 
Which do we use?
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” 
http://www.flickr.com/photos/rosenfeldmedia/3978302604/ @RegJoeConsultsI17 
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. 
The answer to my question seems a simple one, 
doesn’t it? 
http://www.cooper.com/journal/2008/05/the_perils_of_prototyping 
@RegJoeConsults!18
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 
@RegJoeConsults!19
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
Screen 
comps 
Axure/Balsamiq/ 
iPlotz/iMockup... 
Hand-­‐coded 
HTML 
TAP TAP/EVP 
@RegJoeConsults!22 
TAP EVP 
Paper 
Sketchflow/Expression 
Edge 
Fireworks
!23 
Case Study 
Melding sketches, quick wireframes, and prototyping
The Project: Redesign site into a modern, user-centered experience 
@RegJoeConsults!24 
From this… To this…
We Did… 
§Heuristic analysis 
§Data analysis 
§Market research analysis 
§ Personas 
§Mood boards & visual design 
§ User journeys/scenarios 
@RegJoeConsults!25
Mobile First
Mobile 2
Digital Exploration 
!28 
Carrier 12:00 PM 
Page Title 
http://www.domain.com Google 
1 Classic w/Trip + 
2 Classic 
3 Basic 
Benefits Coverages 
Up to 150% 
of amount 
purchased 
Up to 150% 
of amount 
purchased 
$356 
$326 
$256 
Up to 150% of 
amount 
purchased 
Trip interruption 
protection 
Trip interruption 
protection 
Trip interruption 
protection 
Trip interruption 
protection 
Trip interruption 
protection 
1 2 3
!29 
Desktop sketch
.. 
!30
More Realized Sketches -- Version 1 
!31
More Realized Sketches -- Version 2 
!32
Prototyping in Axure (but it could be anything) 
@RegJoeConsults!33
!34 
Many thanks! 
Joe Sokohl 
joe@RegularJoeConsulting.com 
@RegJoeConsults

Kill Your Darlings: Solving Design by Throwing Away Your Prototypes

  • 1.
    Kill Your Darlings Solving Design by Throwing Away Prototypes October 24, 2014 Joe Sokohl @RegJoeConsults @MojoGuzzi
  • 2.
    What We’ll TalkAbout §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 @RegJoeConsults!2
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    !10 Prototypes Catsand dogs living together
  • 11.
    What is aprototype, anyway? Representa)ve model or simula)on of the final system Todd Zaki Warfel, Prototyping: A Prac//oner’s Guide @RegJoeConsults!11
  • 12.
    Why Should WePrototype? @RegJoeConsults!12 Reduced risk Smaller systems Less complex systems Reduc)on in creeping requirements Improved visibility
  • 13.
    Why Should WePrototype? @RegJoeConsults!13 Genera)ve Show, tell & experience Reduc)on of misinterpreta)on Savings in )me/effort/money Reduc)on of waste Real-­‐world value
  • 14.
  • 15.
    …taken to designmeetings where they are used to provide a physical reference for discussion and analysis. @RegJoeConsults!15
  • 16.
    !16 Throwaway versusEvolutionary Which do we use?
  • 17.
    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” http://www.flickr.com/photos/rosenfeldmedia/3978302604/ @RegJoeConsultsI17 Cycle of Design
  • 18.
    The Perils ofPrototyping 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. The answer to my question seems a simple one, doesn’t it? http://www.cooper.com/journal/2008/05/the_perils_of_prototyping @RegJoeConsults!18
  • 19.
    This is thefirst 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 @RegJoeConsults!19
  • 20.
    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
  • 21.
    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.
    Screen comps Axure/Balsamiq/ iPlotz/iMockup... Hand-­‐coded HTML TAP TAP/EVP @RegJoeConsults!22 TAP EVP Paper Sketchflow/Expression Edge Fireworks
  • 23.
    !23 Case Study Melding sketches, quick wireframes, and prototyping
  • 24.
    The Project: Redesignsite into a modern, user-centered experience @RegJoeConsults!24 From this… To this…
  • 25.
    We Did… §Heuristicanalysis §Data analysis §Market research analysis § Personas §Mood boards & visual design § User journeys/scenarios @RegJoeConsults!25
  • 26.
  • 27.
  • 28.
    Digital Exploration !28 Carrier 12:00 PM Page Title http://www.domain.com Google 1 Classic w/Trip + 2 Classic 3 Basic Benefits Coverages Up to 150% of amount purchased Up to 150% of amount purchased $356 $326 $256 Up to 150% of amount purchased Trip interruption protection Trip interruption protection Trip interruption protection Trip interruption protection Trip interruption protection 1 2 3
  • 29.
  • 30.
  • 31.
    More Realized Sketches-- Version 1 !31
  • 32.
    More Realized Sketches-- Version 2 !32
  • 33.
    Prototyping in Axure(but it could be anything) @RegJoeConsults!33
  • 34.
    !34 Many thanks! Joe Sokohl joe@RegularJoeConsulting.com @RegJoeConsults