A comparison of traditional UX design documentation vs using prototypes to communicate and test design. Given at the San Francisco UX Designers meetup in January 2016.
2. make it better
Who’s this guy?
tweet @skotcarruthdescribing designs
prepared for san francisco ux designers
• Web design and development since 1996
• Founded Philosophie in 2008
• Worked on 200+ web/mobile projects
• UXD Instructor, UXDi Curriculum Fellow @ GA
• New to San Francisco!
3. make it better
When I was a boy…
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
4. make it better
tweet @skotcarruth
prepared for san francisco ux designers
Web Designer
describing designs
5. make it better
Now we have specialization
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
• Visual/Graphic Designer
• Motion Designer
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
6. make it better
Now we have specialization
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
• Visual/Graphic Designer
• Motion Designer
tweet @skotcarruth
prepared for san francisco ux designers
• Content Strategist
• Business Analyst
• Product Manager
• Front-end Developer
• Back-end Developer
• DevOps
describing designs
7. make it better
tweet @skotcarruth
prepared for san francisco ux designers
How do you coordinate with
all of these people?
describing designs
8. make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
10. make it better
Each role has its deliverables
• User Researcher
• Information Architect
• Interaction Designer
• UI Designer
• Visual/Graphic Designer
• Motion Designer
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
11. make it better
User Research
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
12. make it better
Information Architecture
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
13. make it better
Interaction Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
14. make it better
UI Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
15. make it better
Visual Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
16. make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
17. make it better
Motion Design
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
18. make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
19. make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
20. make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
21. make it better
The Spec
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
22. make it better
Traditional specs can work well when:
• There are many specialists on the team
• There is ample time to create them
• They are done well
• Development is outsourced or remote
• Work is done in a waterfall fashion
• The scope doesn’t change much
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
23. make it better
But they also suck.
• TL;DR
• Time-intensive
• Hard to keep up-to-date
• What about testing?
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
24. make it better
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
25. make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
describing designs
26. make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs
27. make it better
The Prototype
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
28. make it better
It’s about mindset
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs
29. make it better
tweet @skotcarruth
What you make depends on
what you want to learn.
prepared for san francisco ux designers
describing designs
30. make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wireframe-much
describing designs
31. make it better
tweet @skotcarruth
prepared for san francisco ux designers
http://www.cennydd.com/writing/why-i-dont-wireframe-much
describing designs
32. make it better
Types of Prototypes
tweet @skotcarruth
prepared for san francisco ux designers
Low Visual Fidelity
Low Functional Fidelity
High Functional Fidelity
High Visual Fidelity
Paper Prototypes
Wireframes
Comps
Proof of concept Working Software
Static front-end
describing designs
33. make it better
Types of Prototypes
tweet @skotcarruth
prepared for san francisco ux designers
Low Visual Fidelity
Low Functional Fidelity
High Functional Fidelity
High Visual Fidelity
Paper Prototypes
Wireframes
Comps
Proof of concept
Static front-end
Working Software
describing designs
34. make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
35. make it better
Prototype on Paper (POP)
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
39. make it better
Prototypes are more powerful…
• A picture’s worth 1000 words
• Easier to test with
• Easier than ever to create
• More fun
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
40. make it better
tweet @skotcarruth
But don’t forget:
there’s no magic bullet.
prepared for san francisco ux designers
describing designs
41. make it better
tweet @skotcarruth
prepared for san francisco ux designers
1) Communicate
2) Test
describing designs