Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#protoSXSW
HOW TO PROTOTYPE
FOR BETTER DESIGN
Kristy Okada | Interaction Designer @ Chaotic Moon
Quinn Brennolt | Experien...
#protoSXSW2
#PROTOSXSW
#protoSXSW
• Introductions
• Workshop Goals
• What is User Experience?
• Prototyping 101
• 3 Prototyping Methods
• Paper P...
#protoSXSW4
INTRODUCTIONS
#protoSXSW5
INTRODUCTIONS
Kristy Okada
Interaction Designer
Quinn Brennolt
Experience Designer
#protoSXSW6
WORKSHOP GOALS
#protoSXSW
• Understand what we mean by “prototype”
• Learn the benefits of prototyping
• Gain hands-on experience with Ax...
#protoSXSW8
WHAT IS USER EXPERIENCE?
#protoSXSW9 REPLACE ME WITH DOCUMENT TITLE
the process of designing (digital
or physical) products that are
useful, easy t...
#protoSXSW10
Image Credit: Damien Newman
Research Concept Develop
Uncertainty/Patterns/Insights Clarity/Focus
#protoSXSW11 #protoSXSW
#protoSXSW12
PROTOTYPING 101
#protoSXSW13
A PROTOTYPE IS NOT…
#protoSXSW14
Image Credit: Kevernicius
#protoSXSW15
Image Credit: Wirify
#protoSXSW16
Image Credit: Dominos
#protoSXSW17
A PROTOTYPE IS….
#protoSXSW18
PROTOTYPING 101
#protoSXSW
Prototypes are simulations of how a product will work. They let you
experience how the product flows, how its i...
#protoSXSW20
WHY WE PROTOTYPE?
#protoSXSW21
Image Credit: Corofloat
PROTOTYPING 101
#protoSXSW22
PROTOTYPING 101
#protoSXSW
• Visually represent the actual interactions
• Find design issues early in the process
• Effective way to commu...
#protoSXSW24
TOOLS OF THE TRADE
#protoSXSW25
PROTOTYPING 101
(Form)
(Framer)
(Principle)
#protoSXSW26
PROTOTYPING 101
#protoSXSW27
PROTOTYPING 101
• Very quick to learn and easy to use
• Great for showing flows
• Limited interactions—cannot...
#protoSXSW28
PROTOTYPING 101
ROBUSTLIGHTWEIGHT
(Form)
(Framer)
CODE-BASED
(Principle)
#protoSXSW
• Which flow/use case do I want to prototype? Do I need to do more than one?
• What’s the purpose of my prototy...
#protoSXSW
• InVision Example: https://invis.io/876FA7CS5
• Axure Example: http://bpdi3d.axshare.com/household_members.htm...
#protoSXSW31
3 Prototyping Methods:
PAPER, INVISION, AXURE
#protoSXSW32
PAPER PROTOTYPING
#protoSXSW33
Image Credit: Shruti Knr
#protoSXSW34
Image Credit: Conjoured Images/Ray Warren
#protoSXSW
• Paper
• Writing utensils (pens, sharpies, pencils, highlighters)
• Glue
• Post-it Notes
• UI elements (phone ...
#protoSXSW36
PAPER PROTOTYPING
PAPER
Pros
• Cost-effective.
• Facilitates creativity across multi-
disciplinary team.
• No...
#protoSXSW
• Great for communicating flow, not interactions.
• Get everyone in the same location.
• Assign roles: User, Mo...
#protoSXSW38
#protoSXSW39
INVISION PROTOTYPING
#protoSXSW40
INVISION PROTOTYPING
INVISION
Pros
• Free!
• Easy to Learn
• Real-time sharing and commenting
• Asset managem...
#protoSXSW41
LET’S GET INTO IT!
GO TO WWW.INVISIONAPP.COM
#protoSXSW
• Set Expectations
• Organization is key!
• Use the commenting tools, it saves time and headaches
• Masters sav...
#protoSXSW43
AXURE PROTOTYPING
#protoSXSW44
AXURE PROTOTYPING
AXURE
Pros
• Good training and support.
• Fine-grain controls for adding interactivity
to i...
#protoSXSW45
LET’S GET INTO IT!
#protoSXSW
• Organization is key!
• Don’t get attached to your prototype
• Prototype with a test plan or flow in mind
• Us...
#protoSXSW47
QUESTIONS?
THANK YOU
KRISTY OKADA
@KRISTYOKADA
LINKEDIN
/IN/KRISTYOKADA
TWITTER
QUINN BRENNOLT
@BRENNOLT
LINKEDIN
/IN/QUINN-BRENNOLT
...
Upcoming SlideShare
Loading in …5
×

How to Prototype for Better Design

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).

  • Be the first to comment

How to Prototype for Better Design

  1. 1. #protoSXSW HOW TO PROTOTYPE FOR BETTER DESIGN Kristy Okada | Interaction Designer @ Chaotic Moon Quinn Brennolt | Experience Designer @ PwC
  2. 2. #protoSXSW2 #PROTOSXSW
  3. 3. #protoSXSW • Introductions • Workshop Goals • What is User Experience? • Prototyping 101 • 3 Prototyping Methods • Paper Prototyping • InVision Workshop • Axure Workshop 3 AGENDA
  4. 4. #protoSXSW4 INTRODUCTIONS
  5. 5. #protoSXSW5 INTRODUCTIONS Kristy Okada Interaction Designer Quinn Brennolt Experience Designer
  6. 6. #protoSXSW6 WORKSHOP GOALS
  7. 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. 8. #protoSXSW8 WHAT IS USER EXPERIENCE?
  9. 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. 10. #protoSXSW10 Image Credit: Damien Newman Research Concept Develop Uncertainty/Patterns/Insights Clarity/Focus
  11. 11. #protoSXSW11 #protoSXSW
  12. 12. #protoSXSW12 PROTOTYPING 101
  13. 13. #protoSXSW13 A PROTOTYPE IS NOT…
  14. 14. #protoSXSW14 Image Credit: Kevernicius
  15. 15. #protoSXSW15 Image Credit: Wirify
  16. 16. #protoSXSW16 Image Credit: Dominos
  17. 17. #protoSXSW17 A PROTOTYPE IS….
  18. 18. #protoSXSW18 PROTOTYPING 101
  19. 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. 20. #protoSXSW20 WHY WE PROTOTYPE?
  21. 21. #protoSXSW21 Image Credit: Corofloat PROTOTYPING 101
  22. 22. #protoSXSW22 PROTOTYPING 101
  23. 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. 24. #protoSXSW24 TOOLS OF THE TRADE
  25. 25. #protoSXSW25 PROTOTYPING 101 (Form) (Framer) (Principle)
  26. 26. #protoSXSW26 PROTOTYPING 101
  27. 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. 28. #protoSXSW28 PROTOTYPING 101 ROBUSTLIGHTWEIGHT (Form) (Framer) CODE-BASED (Principle)
  29. 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. 30. #protoSXSW • InVision Example: https://invis.io/876FA7CS5 • Axure Example: http://bpdi3d.axshare.com/household_members.html 30 PROTOTYPING 101 PROTOTYPE EXAMPLES
  31. 31. #protoSXSW31 3 Prototyping Methods: PAPER, INVISION, AXURE
  32. 32. #protoSXSW32 PAPER PROTOTYPING
  33. 33. #protoSXSW33 Image Credit: Shruti Knr
  34. 34. #protoSXSW34 Image Credit: Conjoured Images/Ray Warren
  35. 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. 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. 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. 38. #protoSXSW38
  39. 39. #protoSXSW39 INVISION PROTOTYPING
  40. 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. 41. #protoSXSW41 LET’S GET INTO IT! GO TO WWW.INVISIONAPP.COM
  42. 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. 43. #protoSXSW43 AXURE PROTOTYPING
  44. 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. 45. #protoSXSW45 LET’S GET INTO IT!
  46. 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. 47. #protoSXSW47 QUESTIONS?
  48. 48. THANK YOU KRISTY OKADA @KRISTYOKADA LINKEDIN /IN/KRISTYOKADA TWITTER QUINN BRENNOLT @BRENNOLT LINKEDIN /IN/QUINN-BRENNOLT TWITTER

×