This was presented at SXSW Interactive 2016. -- Prototypes are a great way to design and communicate a user flow or interaction model to stakeholders, visual designers, and developers. However, there are so many tools on the market! How do you pick the best one based on the goals you are trying to accomplish? In this workshop, we’ll run through the basics of prototyping and the benefits and pitfalls of some of the more popular tools. You'll also receive hands-on training in order to master the basics of prototyping with InVision (medium fidelity) and Axure (high fidelity).

1. #protoSXSW
HOW TO PROTOTYPE
FOR BETTER DESIGN
Kristy Okada | Interaction Designer @ Chaotic Moon
Quinn Brennolt | Experience Designer @ PwC

2. #protoSXSW2
#PROTOSXSW

3. #protoSXSW
• Introductions
• Workshop Goals
• What is User Experience?
• Prototyping 101
• 3 Prototyping Methods
• Paper Prototyping
• InVision Workshop
• Axure Workshop
3
AGENDA

4. #protoSXSW4
INTRODUCTIONS

5. #protoSXSW5
INTRODUCTIONS
Kristy Okada
Interaction Designer
Quinn Brennolt
Experience Designer

6. #protoSXSW6
WORKSHOP GOALS

7. #protoSXSW
• Understand what we mean by “prototype”
• Learn the benefits of prototyping
• Gain hands-on experience with Axure and InVision
• Understand when it is best to prototype with Paper, Axure or InVision
7
WORKSHOP GOALS

8. #protoSXSW8
WHAT IS USER EXPERIENCE?

9. #protoSXSW9 REPLACE ME WITH DOCUMENT TITLE
the process of designing (digital
or physical) products that are
useful, easy to use, and delightful
to interact with.
User Experience is…
Image Credit: Drew Lepp Designs
#protoSXSW

10. #protoSXSW10
Image Credit: Damien Newman
Research Concept Develop
Uncertainty/Patterns/Insights Clarity/Focus

11. #protoSXSW11 #protoSXSW

12. #protoSXSW12
PROTOTYPING 101

13. #protoSXSW13
A PROTOTYPE IS NOT…

14. #protoSXSW14
Image Credit: Kevernicius

15. #protoSXSW15
Image Credit: Wirify

16. #protoSXSW16
Image Credit: Dominos

17. #protoSXSW17
A PROTOTYPE IS….

18. #protoSXSW18
PROTOTYPING 101

19. #protoSXSW
Prototypes are simulations of how a product will work. They let you
experience how the product flows, how its interactions work, and
test the usability and feasibility of your designs.
19
PROTOTYPING 101

20. #protoSXSW20
WHY WE PROTOTYPE?

21. #protoSXSW21
Image Credit: Corofloat
PROTOTYPING 101

22. #protoSXSW22
PROTOTYPING 101

23. #protoSXSW
• Visually represent the actual interactions
• Find design issues early in the process
• Effective way to communicate with clients and developers
• Gather feedback via user testing
23
PROTOTYPING 101
WHY WE PROTOTYPE?

24. #protoSXSW24
TOOLS OF THE TRADE

25. #protoSXSW25
PROTOTYPING 101
(Form)
(Framer)
(Principle)

26. #protoSXSW26
PROTOTYPING 101

27. #protoSXSW27
PROTOTYPING 101
• Very quick to learn and easy to use
• Great for showing flows
• Limited interactions—cannot
show motion or microinteractions
LIGHTWEIGHT
• Harder to learn
• Great for showing motion,
microinteractions, or logic
ROBUST
• Hardest to learn (unless you are
familiar with code)
• Great for showing motion,
microinteractions, or logic
CODE-BASED

28. #protoSXSW28
PROTOTYPING 101
ROBUSTLIGHTWEIGHT
(Form)
(Framer)
CODE-BASED
(Principle)

29. #protoSXSW
• Which flow/use case do I want to prototype? Do I need to do more than one?
• What’s the purpose of my prototype? Showing flow? Showing complex
interactions? Showing logic?
• How quickly do I need to make this?
29
PROTOTYPING 101
QUESTIONS TO ASK BEFORE STARTING A PROTOTYPE

30. #protoSXSW
• InVision Example: https://invis.io/876FA7CS5
• Axure Example: http://bpdi3d.axshare.com/household_members.html
30
PROTOTYPING 101
PROTOTYPE EXAMPLES

31. #protoSXSW31
3 Prototyping Methods:
PAPER, INVISION, AXURE

32. #protoSXSW32
PAPER PROTOTYPING

33. #protoSXSW33
Image Credit: Shruti Knr

34. #protoSXSW34
Image Credit: Conjoured Images/Ray Warren

35. #protoSXSW
• Paper
• Writing utensils (pens, sharpies, pencils, highlighters)
• Glue
• Post-it Notes
• UI elements (phone frame, social icons, etc.)
• People to test
35
PAPER PROTOTYPING
WHAT YOU NEED

36. #protoSXSW36
PAPER PROTOTYPING
PAPER
Pros
• Cost-effective.
• Facilitates creativity across multi-
disciplinary team.
• No code or software skills needed.
• Rapid feedback and iteration.
• Not limited to a screen or device.
Cons
• Cannot stand-alone, requires a
moderator.
• Remote participation is not feasible.
• Very limited transitions.
ideal for very fast turnaround for web, mobile and wearables

37. #protoSXSW
• Great for communicating flow, not interactions.
• Get everyone in the same location.
• Assign roles: User, Moderator, ‘Human-Computer’ and Observer(s)
• Know the audience, might not be the best choice for clients.
• Think outside of the box!
37
PAPER PROTOTYPING
KEY TAKEAWAYS

38. #protoSXSW38

39. #protoSXSW39
INVISION PROTOTYPING

40. #protoSXSW40
INVISION PROTOTYPING
INVISION
Pros
• Free!
• Easy to Learn
• Real-time sharing and commenting
• Asset management (InVision sync, web
app, Dropbox, etc.)
• Customer Support
• Frequent product updates
• Great community
Cons
• Requires internet connection (to build)
• Cannot design within the app
• Bugs (sometimes!)
• Limited transitions & animations
(unless you make custom GIFs)
ideal for lightweight projects for web, mobile and certain wearables

41. #protoSXSW41
LET’S GET INTO IT!
GO TO WWW.INVISIONAPP.COM

42. #protoSXSW
• Set Expectations
• Organization is key!
• Use the commenting tools, it saves time and headaches
• Masters save time!
• When possible, present from a downloaded version
42
INVISION PROTOTYPING
KEY TAKEAWAYS

43. #protoSXSW43
AXURE PROTOTYPING

44. #protoSXSW44
AXURE PROTOTYPING
AXURE
Pros
• Good training and support.
• Fine-grain controls for adding interactivity
to individual elements.
• Good for prototyping complex
interactions.
• Flexible—can be used to prototype
products for any digital platform.
• Design & prototyping tool
Cons
• Steep learning curve; not easy to use
for a first-time user.
• No device-specific templates or
features.
• Not the best design tool
ideal for robust projects for web & mobile

45. #protoSXSW45
LET’S GET INTO IT!

46. #protoSXSW
• Organization is key!
• Don’t get attached to your prototype
• Prototype with a test plan or flow in mind
• Use a dynamic panel to create different states
• Take advantage of masters and base styles
46
AXURE PROTOTYPING
KEY TAKEAWAYS

47. #protoSXSW47
QUESTIONS?

48. THANK YOU
KRISTY OKADA
@KRISTYOKADA
LINKEDIN
/IN/KRISTYOKADA
TWITTER
QUINN BRENNOLT
@BRENNOLT
LINKEDIN
/IN/QUINN-BRENNOLT
TWITTER