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