This class was taught as part of UX Sunday, hosted by HourSchool.com: http://hourschool.com/courses/advanced-ux-wireframing-and-detailed-design-sf-in-san-francisco-ca The class covered how wireframing fits into the larger design process, and what tools can be used to create wireframes. We also explored the use of wireframing as a sketching mechanism and thinking tool for user interface and UX design.

1. ADVANCED UX:
Wireframing and
Detailed Design
HourSchool.com | UX “Sundae” SF | April 1, 2012

2. Who am I?
Christina Tran
sodelightful.com
Visual design > fd2s & service design >
teaching > ac4d & interaction design > ???

3. What we’ll cover
• What is a wireframe?
• How does it fit into the design process?
• What does my wireframe need to be
able to do?
• What should I use to make one?
• Now what?

4. But first…Who are you?
• “Vote with your feet”
• “Graphic Jam”

5. So what is a wireframe?
“Wireframes are a set of documents that show
structure, information hierarchy,
functionality, and content…Wireframes are a
means of documenting the features of a
product, as well as the technical and business
logic, with only a veneer of visual design. They
are the blueprints of a product.”
Designing for Interaction, Dan Saffer

6. Wireframes

7. Wireframes

8. Wireframes

9. Wireframes

10. So what is a wireframe?
We often think of wires as deliverables.
But wireframing is a process.
They are a communication tool between the
interaction/UX designer and:
– Clients, funders, business people
– Other designers (visual, industrial, UX)
– Developers
– Copywriters
– His/herself

11. The messy design process
Central Story’s Process

12. The messy design process
frog / Jon Kolko Process

13. 0$'1%0)
The messy design process
)$"%)070$%8<)
'$=(%).2)$"%)
.2)$"%)=0%()
&(#8'(7)',4)
)#,$%('-$#.,0)
(%0%,$'$#.,
)8=5$#&5%)
(.>%-$H)I.()
<)4%0#1,)
#$%&'()%('*+,-,./01)
9,)%:'8&5%)2(.8)$"%);%54).2)'(-"#$%-$<(%)#55<0$('$%0)$"%)#8&.($',-%) #,-5<4#,1)#$0)?#0<'5)',4)$'-$#5%)-"'('-$%(#0$#-0@)9$)%'-")&"'0%A)
.2)#$%('$#,1)4%0#1,)=.(>)'-(.00)0%?%('5)&"'0%0@)!"%,)-.,-%#?#,1)') $"%)'(-"#$%-$)#0)#4%'$#,1A)8.4%5#,1)',4)$%0$#,1).<$)#4%'0)=#$")
".<0%A)$"%)'(-"#$%-$)B%1#,0)=#$")<,4%(0$',4#,1)#$0)(%0#4%,$0)',4) #,-(%'0#,1)5%?%50).2);4%5#$7A)2(.8)&'&%()0>%$-"%0)$.)0-'5%)8.4%50)',4)
.>%-$)&"'0%H)
5.-'$#,1)$"%)".<0%C0)2.<,4'$#.,).,)$"%)&(.&%($7@)D"%,)$"%)'(-"#$%-$) &%(0&%-$#?%)4('=#,10@)K"',1#,1)$"%)0"'&%).2)$"%)2.<,4'$#.,)5'$%)#,)
:):%%F0<)
"%4=5%H) 4%;,%0)$"%)(%5'$#.,0"#&0)B%$=%%,)(..80)'0)=%55)'0)$"%#()&(#,-#&'5) $"%)&(.L%-$)=.<54)B%)')-.0$57)4#0'0$%(@)D"(.<1".<$)$"%)&(.L%-$A)$"%)
)2%:)
H)L%-'=0%) 2%'$<(%0A)',4)%,0<(%0)$"'$)5.'4EB%'(#,1)='550)'(%)&5'-%4)-.((%-$57@) '(-"#$%-$)'50.)-.55'B.('$%0)=#$")$"%)-5#%,$)'0)=%55)'0)&%.&5%)=".)=#55)
B2(.,$)
<)#$)4.%0),.$)
F#,'557A)$"%)'(-"#$%-$)'44(%00%0)$"%);,%()2%'$<(%0).2)$"%)".<0%A) B%)-"'(1%4)$.)B<#54)',4).<$;$)$"%)".<0%@)
4=-%)(#0F) 6=--%00#;%)#$%('$#.,0).2)$"%)4%0#1,)&(.-%00)0$'1%0):#$"#,)%'-").2)$"%)
&(.>%-$)&"'0%0)4%5#;%()0.5=$#.,0).2)#,-(%'0#,1)@4%5#$7)',4)-.((%-$,%00)
5%'4#,1)$.:'(40)#8&5%8%,$'$#.,)M:'$%(2'55)8.4%5)0".:,NH)
!"#$%&'(&#)&*!'+#)
$*,+-)(."/0*1#"2
!"#$%&'&%()*)+,$%('-$#.,)/%0#1,)2.()3%4#-'5)670$%80) !"
$*'/+3*$($*,+-)
20)1('/*1,3)'*+,-*14)$)5,'*%605)7
20)1('/*1,3)'*+,-*14)$)5,'*%605)7
*) F.()=".8)%:'-$57)#0)$"#0)".<0%)B%#,1)
20)1('/*1,3)'*+,-*14)$)5,'*%605)7
B<#5$G *) H.=)8',7)B'$"(..80)'(%),%%4%4G)
*) !"%(%)0".<54)$"%)".<0%)B%)0#$<'$%4).,) *) !"'$C0)$"%)%:'-$)(%5'$#.,0"#&)B%$=%%,) *) !"'$)0$75%)2'<-%$0)0".<54)B%)#,0$'55%4G)
$"%)&(.&%($7G) $"%)>#$-"%,)',4)$"%)4#,#,1)(..8G *) !"'$)>#,4).2)8'$%(#'5)0".<54)-.?%()$"%)
Devise’s Process
*) H.=)B#1)=#55)$"%)4=%55#,1)B%G)) *) /.%0)$"%)0-'5%)8.4%5)(%?%'5)',7) >#$-"%,)J..(G
*) !"'$)I<'5#$#%0).2)$"%)".<0%)'(%)8.0$) 2%'0#B#5#$7).()<0'B#5#$7)#00<%0G)) *) !"'$)#0)$"%)-.0$).2)')1#?%,)8'$%(#'5)
#8&.($',$)$.)$"%)-5#%,$G) *) 9(%)$"%)"'55='70)=#4%)%,.<1")$.)-.8&57) -".#-%G)))

14. The messy design process
teehan + lax Process

15. Where wireframing fits in
Storyboards, Use cases, Digital wires, Visual/brand Annotated
Hand-drawn
Scenarios, Task analysis, Task flows, IA, language, wires, User
wires
Personas (Hero) flows Prototypes Comps stories
Card sorts, Usability
Co-design Testing
Concepting Refining

16. HOW NUDGE WORKS
Nudge is an easy way for care providers to check
in with their patients between appointments.
Automated text messages help patients better patientnudge.com
understand and stick to their treatment plans.
Kyle has just had ACL knee surgery. He receives
1 instructions and medicine from his primary physician.
During his discharge process, nurse Tina schedules
2 Kyle to receive their standard set of follow-up Nudge
messages for ACL patients.
How are you
feeling today?
Storyboards, Reply on a scale
of 0 (terrible)
to 5 (great), and
Scenarios, if you’d like add
a note.
Personas
At home over the next week, Kyle automatically
3 receives text messages each day asking him how he is
feeling and what his pain levels are.
Who’s using it, why, how?
S C H E D U L E . C ON N E C T. R E F L E C T.
NurseWelcome, Jennie | My Account | FAQsreplies on Nudge
Tina monitors all her patient | Log Out
4 and notices that Kyle’s pain levels are getting worse
DASHBOARD MY PATIENTS CHECK-IN MESSAGE
when they should be getting better.
< Back to all patients
Katie Nabovky 5 weeks Send Katie a 1-Time Message
512-555-5555 Edit
Hi Kyle. How is your knee
feeling? If your pain is
Notes: Edit
getting worse, give us a
Enter patient notes here
call so we can schedule a
follow-up appointment.
Credit: Christina Tran for PatientNudge, Adobe Illustrator
Select All | Select None Archive Selected | Delete Selected | Flag Selected
When?
MESSAGE WHEN IN REPLY TO
Today Now

17. Use cases,
Task analysis,
(Hero) flows
What are the main things people’ll be
doing (hero flow)? In what order?
Credit: Jon Kolko

18. Hand-drawn
wires
How will the content be shown and how
will the actions work? (Start small. Then
draw it over & over again—each time
bigger and with more details.)
Credit: Christina Tran

19. Digital wires,
Task flows,
Prototypes
Where does everything go?
What’s the hierarchy? Which UI
patterns will be used?
Credit: Christina Tran for TeamOne, Omnigraffle

20. No No Yes Yes Yes Yes
Alert User
Output
Directions
Go to Store
Start Shopping Alert User: Item on
Optimize No LSC List = Yes Yes Is there a Yes Take Photo Yes Item LSC Yes Item Crossed
Arrive at Store LSC List = 0 Your list is Proceed? Find Item Pre-LSC or
List? Non-LSC List = 0 Pre-LSC List complete. UPC? of UPC Pre-Non-LSC Eligible? Off Pre-LSC List
Now Balance = $0 List?
Yes No No No No No
Alert User:
Alert User: Weigh produce Non-LSC List
Shortest Yes LSC Balance Yes Item currently not
Sort List Your list total = +1
Time? Exceeded? on any list.
exceeds your
LSC funds.
No No
Retrieve printed
Yes Item Crossed
UPC sticker
Confirm Off Pre-Non-LSC
Now and place on item.
Alert User: Add? List
Shortest Yes Balance Yes
Sort List Your list total
Distance? > LSC
exceeds your
Balance?
LSC funds.
No
No No
Shortest Yes Finished No
Sort List
Distance? Shopping?
Yes
No
Digital wires,
Alert User:
Proceed to
Task flows, IA,
Checkout.
Prototypes
Is Now
Enter Cashier Total List = Yes Purchase Total Purchase Yes Pay Using Yes Yes PIN Yes
Balance <= Enter PIN
Checkout Line Scans Item LSC List + Appears on iPhone Total = Now LSC Funds? correct?
to Purchase? PIN = +1
Total List = 0 Total List = +1 Non-LSC Screen Balance?
List?
No No No No No
What are ALL the possible
No
Alert User:
Confirm Purchase Pay Using Yes User Pays Using Alert User:
Total with Cashier. Other Another Form PIN = +4?
PIN Incorrect.
Payment? of Payment
No Yes
routes someone can take? Abandon
Purchase
Alert User: Too many
incorrect PIN
attempts. Use
another form of
payment.
Credit: Scott Magee for AC4D, Omnigraffle

21. Visual/brand
language,
Comps
What’s the hierarchy?
What’s the visual language?
What do the pixels look like?
Credit: Christina Tran for Fugaboo, Illustrator/Photoshop

22. Annotated
wires, User
stories
What does the developer need to know?
E.g. what a button does and WHY.
(Controls, conditional items, constraints)
Credit: Kristine Mudd for AC4D, Illustrator/InDesign

23. Annotated
wires, User
stories
What should people be able to do?
What does the developer need to
start planning their sprints?

24. Where wireframing fits in
Storyboards, Use cases, Digital wires, Visual/brand Annotated
Hand-drawn
Scenarios, Task analysis, Task flows, IA, language, wires, User
wires
Personas (Hero) flows Prototypes Comps stories
Card sorts, Usability
Co-design Testing
Concepting Refining

25. How do you make ’em?
Depends…
• The project & your role in it
• What stage you’re at (what you need the
wires to do, and what fidelity you need, what
the wires need to communicate)
• Who else will need to work on the same
wire files? What do they use?
• How much money & time you have?
• Do you need to also annotate in the same
program? Prototype in same program?

26. Wireframing tools
Tool (in order of fidelity) Why
Analog (handdrawn, pen When you’re thinking,
& paper, whiteboard, Quick iterations,
stencils) Playing with options,
Collaborative, Cheap
Repurposing other apps If you already love the
(Powerpoint, Keynote, program, If it can help
Fireworks) your team collaborate

27. Wireframing tools
Tool (in order of fidelity) Why
Wireframe-specific apps When you’re focused on
(Visio, Omnigraffle, Axure, content & structure instead
Balsamiq, MockFlow, so of visual, easy consistency,
many more…) Stencil libraries, some
prototyping abilities
Digital (Illustrator, When you’ll need to give
Photoshop) someone hi-fi pixels, 960
grid
Prototype it (HTML, Ruby on Some interactions just need
Rails, Flash, Adobe Catalyst, to be seen, Easier to test
etc.) user interactions

28. A note about usability testing
Do it early and often! You are not the user!
“Testing is really more like having friends
visiting from out of town. Inevitably, as you
make the tourist rounds with them, you see
things about your home town that you usually
don’t notice because you’re so used to them.
And at the same time, you realize that a lot of
things you take for granted aren’t obvious
to everyone.” Don’t Make Me Think by Steve Krug

29. A note about usability testing
“Testing one user is 100 percent better than
testing none.” Don’t Make Me Think by Steve Krug
Can be done:
• Easily
• Cheap-ily
• Fun-ily
Just look up Jakob Nielsen’s “Discount
Usability Testing”. Explore think-aloud
method, paper prototyping, & co-design.

30. Practice makes…process
“Enlightened trial and error triumphs over the
wisdom of the lone genius.”
IDEO person on 60 Minutes
Wanna try it out?
Wanna ask questions?
Want feedback on your wires?

31. Resources
• Patterns: http://ui-patterns.com
• Patterns: http://patterntap.com
• Kits & Stencils:
http://www.smashingmagazine.com/2010/02/05/50-
free-ui-and-web-design-wireframing-kits-resources-
and-source-files/
• Books:
http://www.kickerstudio.com/blog/2009/12/the-top-
ten-essential-interaction-design-books/
• Books: http://rosenfeldmedia.com/
• Schools & bootcamps: http://www.ac4d.com/
• Blog: http://www.wireframewednesday.com/
• Blog: http://boxesandarrows.com/

32. Thanks!
Christina Tran
christina@sodelightful.com
HourSchool.com | UX “Sundae” SF | April 1, 2012