The document provides tips for overcoming a fear of drawing and designing user experiences through sketching. It recommends visually mapping users' stories and designing to match their goals and mental schemas. Tips include stacking drawing sizes to reduce repetition and using different markers for details, actions, and emphasis. The goal is designing the right experience by capturing a user's essence cheaply and quickly, not about making art. Resources for templates, tutorials, and organizations are listed at the end.

1. the users experience &
user’s
Hello!
Im
I’m dennis @ dna co za
dna.co.za
(supermonkey)
Overcoming my fear of drawing
plus some practical tips from a
someone who still can’t draw!

3. My post-grad…
(university of applied Arts)
(library of cheat sheets)

5. Walk a mile in your users shoes…
user’s shoes

6. ability dislikes
di lik
context
p
preferences
emotions
goals
l
circumstance
Mental schema

9. Visually map their stories…
stories

10. Design to match user’s goals and story…
users story

11. tip! Draw these up and let them use it for speed – and when shy to draw…

12. Starting the prototype

13. Stacking sizes for
g
Main nav or
changing areas, reduce
page structure repetitive drawing off
elements…
Stack on top
Per page detail
Sub nav or
sections
Stack on top

14. User Centered Design P
U C t d D i Process
Find story
& understand
drt d
Design to
match
Validate &
iterate
= good experience for the user

15. to t by
t get b
It’s not about making art…
g
It’s about designing
the right experience
by capturing your user’s essence,
and doing it cheaply and quickly!

16. Stuff that make a difference:
Post-it = design notes
P
Super fine = detail & writing
Fine black = sketch
Medium black = accent
Thick black = copy lines / weight
Grey marker = shading
Red pen = actions

19. tip!!
My iStock
iSto k
Cheat sheet
I print this, keep it in my
pencil case and
refer to it before I draw

21. Changes on screen
C
Copy lines
Copy links
Picture boxes
Buttons
Actions
Low and high def paper prototypes

22. post it icons:
http://www.istockphoto.com/file_search.php?action=file&lightboxID=
2191862
hairstyles and faces:
http://www.istockphoto.com/stock-illustration-10287796-set-of-
dood e aces p p
doodle-faces.php
drawing on the right side of the brain:
http://www.drawright.com/
vizthink workshops – www.vizthink.com
Templates for prototypes:
http://www.adaptivepath.com/ideas/essays/archives/000863.php
p p p y p p
cartoon face tuts: part 1 -3
http://www.youtube.com/watch?v=GP3PcwYS4c8
http://www.youtube.com/watch?v=MTgpB01Lm9s
p y gp
http://www.youtube.com/watch?v=j6QDnUHtORc
+ follow related links - will keep you busy.
organisations /sites:
g
www.vizthink.com
http://www.ifvp.org/
http://www.thebackofthenapkin.com/