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.

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

2. 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

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

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

5. http://en.wikipedia.org/wiki/Prograph
@RegJoeConsults!5

6. http://www.levenez.com/NeXTSTEP/InterfaceBuilder.jpg
@RegJoeConsults!6

7. @RegJoeConsults!7

8. @RegJoeConsults!8

9. …version 28!
@RegJoeConsults!9

10. !10
Prototypes
Cats and dogs living together

11. 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

12. Why Should We Prototype?
@RegJoeConsults!12
Reduced
risk
Smaller
systems
Less
complex
systems
Reduc)on
in
creeping
requirements
Improved
visibility

13. 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

14. @RegJoeConsults!14

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

16. !16
Throwaway versus Evolutionary
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 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

19. 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

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: Redesign site into a modern, user-centered experience
@RegJoeConsults!24
From this… To this…

25. We Did…
§Heuristic analysis
§Data analysis
§Market research analysis
§ Personas
§Mood boards & visual design
§ User journeys/scenarios
@RegJoeConsults!25

26. Mobile First

27. Mobile 2

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. !29
Desktop sketch

30. ..
!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