Prototyping: what is it, why should you care, common mistakes, and how to choose the right tools. Presented at IxDA Sydney Meetup: The Prototype Edition - 28 May 2015

1. Prototyping

2. Overview
● What is prototyping?
● Why should I care?
● Common mistakes
● Choosing the right tool
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 2

3. Prototyping
Prototype noun
a first or preliminary version of a device or
vehicle from which other forms are developed.
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 3

4. Prototyping
A prototype is not the final product,
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 4

5. Prototyping
A prototype is not the final product, it’s a
simulation of the final product.
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 5

6. Prototyping
A prototype is not the final product, it’s a
simulation of the final product.
(Or a part of the final product)
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 6

7. Why prototype?
● Prototyping is generative
● Prototypes show, not tell
● Prototyping encourages collaboration
● Prototyping creates a rapid feedback loop,
which ultimately reduces risk
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 7

8. Why prototype?
● Prototyping is generative
● Prototypes show, not tell
● Prototyping encourages collaboration
● Prototyping creates a rapid feedback loop,
which ultimately reduces risk
● Prototyping saves time, effort, and money
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 8

9. Sense

10. Sense
“To get to where we are today, we’ve
iterated literally hundreds of times. By being
able to 3D print and laser cut our way out of
almost anything, we’ve settled on a design
that’s beautiful, and also functions perfectly
with the sensors we have inside.”
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 10

11. Common mistakes
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 11

12. Common mistakes
● Prototyping too little, or too much
● Prototyping the wrong thing
● Not setting expectations for what the
prototype will be
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 12

13. Common mistakes
● Determine what you need to learn
● Set appropriate expectations
● Determine the right level of fidelity
● Pick the right tool for the job
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 13

14. The right tool
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 14

15. The right tool
● Fidelity
● Familiarity / learning curve
● Time and effort
● Support for multiple devices
● Collaboration / feedback
● Integration with other tools
● Versioning
● Price
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 15

16. The right tool
● Fidelity
● Familiarity / learning curve
● Time and effort
● Support for multiple devices
● Collaboration / feedback
● Integration with other tools
● Versioning
● Price
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 16

17. Fidelity
● Visual fidelity
● Functional fidelity
● Content fidelity
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 17

18. Tools

19. Paper
Paper prototyping is a widely used method in
the user-centered design process, a process
that helps developers to create software that
meets the user's expectations and needs—in
this case, especially for designing and testing
user interfaces.
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 19

21. Balsamiq
Balsamiq Mockups is a rapid wireframing tool
that helps you Work Faster & Smarter. It
reproduces the experience of sketching on a
whiteboard, but using a computer.
http://balsamiq.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 21

22. Sketch
Easily create complex shapes with our state-of-
the-art vector boolean operations and take
advantage of our extensive layer styles.
Sketch’s fully vector-based workflow makes it
easy to create beautiful, high-quality artwork
from start to finish.
http://bohemiancoding.com/sketch/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 22

23. InVision
The world's leading prototyping, collaboration &
workflow platform.
http://invisionapp.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 23

26. Proto.io
Create fully-interactive high-fidelity prototypes
that look and work exactly like your app should.
No coding required.
http://proto.io
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 26

27. Atomic
The fastest way to design beautiful interactions.
http://atomic.io/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 27

28. Pixate
Pixate is a next-generation mobile interaction
design service aimed at helping designers
create complex animations and interactions
without writing code.
http://www.pixate.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 28

29. Framer.js / Framer Studio
Invent, design and experiment with interaction.
http://framerjs.com/
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 29

30. Designing Twitter Video
30

31. HTML/CSS
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 31

32. Summary
● Determine what you need to learn
● Set appropriate expectations
● Determine the right level of fidelity
● Pick the right tool for the job
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 32

33. Thanks!
@mattdothurley
@ArlenInUX
Matt Hurley & Arlen McCarthy - IxDA Sydney Meetup: The Prototype Edition - May 2015 33

34. Resources
● Designing Sense
https://vimeo.com/106241277
● Prototyping: A Practitioner's Guide
http://www.amazon.com/Prototyping-Practitioners-Todd-
Zaki-Warfel/dp/1933820217
● Design Better And Faster With Rapid Prototyping
http://www.smashingmagazine.com/2010/06/16/design-
better-faster-with-rapid-prototyping/
● Top 10 Evaluation Criteria when Selecting a Prototyping
Tool
http://www.savahapp.com/blog/ten-evaluation-criteria-
on-selecting-a-prototyping-tool/
34

35. Resources
● Paper Prototyping: The Fast and Easy Way to Design
and Refine User Interfaces
http://www.amazon.com/Paper-Prototyping-Interfaces-
Interactive-Technologies/dp/1558608702
● Linking Mockups Together (Balsamiq)
http://support.balsamiq.com/customer/portal/articles/111
742
● Transitional Interfaces
https://medium.com/@pasql/transitional-interfaces-
926eb80d64e3
● Designing Twitter Video
http://paulstamatiou.com/twitter-video/
35