MaggieSteciuk
DESIGNER, TERRIBLE LABS
@MSTECIUK
Prototypeyourwaytobeerproducts.
Agenda
•Beyond“failingcheaply”,orwhyprototypingreallymaers
•Fidelityisoverrated
•Toolsthatwork(hands-ondemos)
•Casestudy
•Sketch,buildandshareprototypes.
•pbon.es/proto
Ideas
ProductData
Build
Measure
Learn
THELEANSTARTUPPROCESS
Ideas
ProductData
Build
Measure
Learn
PROTOTYPING
PROCESS
PROTOTYPING
PROCESS: Plan
Build
Measure
Learn
NumberofTestUsers
UsabilityProblemsFound
0 3 6 9 12 15
0%
25%
50%
75%
100%
Jakob Nielsen:“WhyYouOnlyNeedtoTestwith5Users”
From:AnonymousUser
Ididn’tgetit. What’sthe
pointofthisappagain?
Icouldn’tfigureitout.
WHAT
AN
IDIOT
? ??
Quality vs.Quantity
Quantity:
Quality:
Wecan’t
THINKourwaytosolutions.
Wehaveto
DISCOVERourwaytosolutions.
“You’redoingitwrong.”
- MY INNER VOICE
Noperfect,magicalprocess
Communication
Gooddesignprocess
isabout
“Chair”
Communication
“Oh,Igetit!”
Peopleunderstand
whattheycansee.
Words+Imagesare
morememorablethanwordsalone.
Prototypeshelpus
communicate.
“...andhere’swhat
Ithink...”
Ourclientslikeprototypes,too
Communicate &
Prototypeshelpus:
Understand
So,what’sthebest
prototyping
tool?
PEN&PAPER INVISION
FLINTO KEYNOTEor
POWERPOINT
PROTO.IO
XCODE
QUARTZ
COMPOSER APPCOOKER FIREWORKS+TAP
BALSAMIQ
BRIEFSPOPAPP
AXUREVARIOUS
FRAMEWORKS
FRAMER REFINE.IO
QUALITY OF
Interactivity
Choosethebesttoolforthejob
EASEOF
Distribution
LEARNABILITY &
Familiarity
IMPORTANCEOF
Collaboration
Experiment
Fast&Easy
Pen&Paper
BETTERIDEAS
NEEDMOREIDEAS
Sketching
Yourfirstideamaynotbeyourbest
Yourfirstideamaynotbeyourbest
BETTERIDEAS
NEEDMOREIDEAS
FOCUS
THECONVERSATION,
Sketching
Howdonesomethinglooks
≈
howdonesomethingis
Fidelityisoverrated
Notes:
______________________________
_______________
_______________
_______________
_______________
_______________
_______________
______________________________
_______________
_______________
_______________
Mobile:
width 320px
cols 60px
gutters 16px
fold 480px
rows 16px
Tablet:
width 768px
cols 48px
gutters 16px
fold 1024px
rows 16px
Wireframe Sheet: Tablet & Mobile (Portrait)
Title/Version: Date:
BETTERIDEAS
NEEDMOREIDEAS
FOCUS
THECONVERSATION,
INTERACTIVITY
IN5MINUTESFLAT
Sketching
Almostmagic
BETTERIDEAS
NEEDMOREIDEAS
FOCUSED
REVIEWMEETINGS
INTERACTIVITY
IN5MINUTESFLAT
VALIDATE
EVENEARLIER
Sketching
Don’ttakemywordforit:
cl.ly/QPlW
GeingStarted
WhatamItryingtolearn/figureout?
TicketZen
TicketZen
TicketZen
Howcanweimprovethis?
Beginwiththeflow
Getaticket OpenApp Scanticket
Ticketavailable:
Reviewticketinfo
Selectoradda
creditcardtopay
thecitation
Reviewamount,
andpaymentinfo,
submit
Ticketnotyetinthesystem:
saveforlater
(appwillsendalert
whenticketisreadytobepaid)
Isthisacaryoudriveoften?
Saveregistrationsoapp
cansearchfortickets
Firsttimeuser:
weaskforlocation
Assumethatcurrent
locationisalsothe
citywhereticketwas
issued
Ifnot,providealist
ofnearbycities
TicketZensupports
Sketcheachscreen
Makeitinteractive
flinto.com/p/e25a9d3d
Share,Learn,Improve
PROTO.IO
Prototyping
WebApplications
Maggie Steciuk
BOSTON, MA
Maggie Steciuk
BOSTON, MA
Contact Maggie
Send
Maggie Steciuk
BOSTON, MA
Contact Maggie
Send
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.
Maggie Steciuk
BOSTON, MA
Your message has been sent.
Moregreatexamplesat:
hp://www.designstaff.org/articles/product-design-sprint-day-4-
prototype-2013-01-07.html
InVision
invisionapp.com | cl.ly/QOuc
Prototypingcanbeeasy Righttool,righttime
So,remember:
Prototypingcanbeeasy Righttool,righttime
So,remember:
Thankyou!
Resources:pbon.es/proto

Codeless Prototyping for Web and Mobile Apps