how to prototype for better design
TRANSCRIPT
#protoSXSW
HOW TO PROTOTYPE FOR BETTER DESIGNKristy Okada | Interaction Designer @ Chaotic Moon
Quinn Brennolt | Experience Designer @ PwC
#protoSXSW2
#PROTOSXSW
#protoSXSW
• Introductions
• Workshop Goals
• What is User Experience?
• Prototyping 101
• 3 Prototyping Methods
• Paper Prototyping
• InVision Workshop
• Axure Workshop
3
AGENDA
#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 Axure and InVision
• Understand when it is best to prototype with Paper, Axure or InVision
7
WORKSHOP GOALS
#protoSXSW8
WHAT IS USER EXPERIENCE?
#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
#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 interactions work, and
test the usability and feasibility of your designs.
19
PROTOTYPING 101
#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 communicate with clients and developers
• Gather feedback via user testing
23
PROTOTYPING 101
WHY WE PROTOTYPE?
#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
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
#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 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
#protoSXSW
• InVision Example: https://invis.io/876FA7CS5
• Axure Example: http://bpdi3d.axshare.com/household_members.html
30
PROTOTYPING 101
PROTOTYPE EXAMPLES
#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 frame, social icons, etc.)
• People to test
35
PAPER PROTOTYPING
WHAT YOU NEED
#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
#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
#protoSXSW38
#protoSXSW39
INVISION PROTOTYPING
#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
#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
#protoSXSW43
AXURE PROTOTYPING
#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
#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
• Use a dynamic panel to create different states
• Take advantage of masters and base styles
46
AXURE PROTOTYPING
KEY TAKEAWAYS
#protoSXSW47
QUESTIONS?
THANK YOU
KRISTY OKADA
@KRISTYOKADA
/IN/KRISTYOKADA
QUINN BRENNOLT
@BRENNOLT
/IN/QUINN-BRENNOLT