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.

1. make it better
Describing Designs
Traditional Design Specifications vs. Prototyping

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

9. make it better
Documentation
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

36. make it better
InVision
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

37. make it better
Framer.js
tweet @skotcarruth
prepared for san francisco ux designers
describing designs

38. make it better
Framer.js
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

42. make it better
Questions?
tweet @skotcarruth
prepared for san francisco ux designers
describing designs
skot@philosophie.is