7. Agenda
⢠Why prototype?
⢠Selecting the right approach
⢠Dive into speciďŹc methods
⢠How to get started?
⢠Which tools to use?
⢠Limits of prototyping
⢠Q&A
27. Criteria for picking
The right approach
⢠Intent & Audience
⢠Cost & time
⢠Familiarity & learnability
⢠Collaboration
⢠Distribution
⢠Throwaway vs. reusable
28. Sketches & Storyboards
Wireframes
HTML Paper
prototypes prototypes
Interactive Interactive
wireframes design comps
High-ďŹdelity Production-ready
comps prototypes
47. User goals Business goals
Showcase their talents Improve engagement
Create a beautiful profile Increase conversion
Inward Paths Outward Paths
External search Register to join the site
Core content / functionality
Internal search Contact user
Navigation Engage with content
Linked in email signature
Shared via social net work
User profile See similar people
Share
Link from website Add content
Trigger words Core elements Calls to Action
My name Avatar, name, loc, interests âAwesomeâ
Showcase Audio, written posts Sign up, Log in
Talents, interests Photos, videos
63. Inward Paths Outward Paths
Home page Share or forward to a friend
Search engine Favorite / Like / etc...
Social media (Twitter, etc) CORE Download
Other sites Buy
64. User goals Business goals
Showcase their talents Connect users
Become a destination for great
Create a beautiful profile
content
Inward Paths Outward Paths
External search Register to join the site
Core content / functionality
Internal search Add content
Navigation âLikeâ content
Linked in email signature User profile See similar people
Shared via social net work Share
Link from website Contact a user
Trigger words Core elements Calls to Action
âMaggie Steciukâ Avatar, name, loc, interests âAwesomeâ
âshowcase talentsâ Audio, written posts Sign up, Log in
âeportfolioâ Photos, videos
65. User goals Business goals
Inward Paths Outward Paths
Core content / functionality
Trigger words Core elements Calls to Action
78. Maggie SteciukMaggie
Contact
BOSTON, MA
Hey, Maggie!
Just thought Iâd let you know this presentation
is going exceptionally well. Hardly anybody in the
front of the room fell asleep.
Send
84. Back Ticket Fairy
823879389349
02/02/2013 3:15pm
Chevrlolet
OPP 98 DARTMOUTH ST
METER FEE UNPAID - CD252
$30.00
Pay ticket Remind me
85. Back Ticket Fairy
Visa ending in 2355
MasterCard ending in 3234
Add a Card
86. Back Ticket Fairy
Youâre almost done!
Violation number 32453456
issued on 2/2/2013
near Darmouth St
will be paid using VISA ending in 2145
$30.00
Submit Payment
87. Back Ticket Fairy
Success!
Your payment was submitted. You
will receive an email conďŹrmation
from the City of Boston.
Scan Another Ticket
88.
89.
90. Keynote
⢠Powerful drawing tools
⢠Master slides make it easy to reuse
UI elements
⢠Hyperlinks add âclickabilityâ
⢠Works well with Adobe CS
91.
92.
93.
94. User goals Business goals
Showcase their talents Improve engagement
Create a beautiful profile Increase conversion
Inward Paths Outward Paths
External search Register to join the site
Core content / functionality
Internal search Contact user
Navigation Engage with content
Linked in email signature
Shared via social net work
User profile See similar people
Share
Link from website Add content
Trigger words Core elements Calls to Action
My name Avatar, name, loc, interests âAwesomeâ
Showcase Audio, written posts Sign up, Log in
Talents, interests Photos, videos
123. Takeaways
⢠Sketch a user ďŹow
⢠Beginning with the core, sketch or create simple
wireframes of application screens
⢠Add interactivity and visual polish as needed
⢠Consider audience & intent when selecting the
right approach, but make it minimally real.
⢠Prototype early and often (no need to code)
⢠Have a nice app!*
