Learn what it takes to create a working prototype for a web or mobile app without having to code at all. Maggie Steciuk, UI designer at Terrible Labs in Boston covers the process and all the tools you need to design your prototype. Learn more from the experts by visiting http://intelligent.ly/learn

1. MaggieSteciuk
DESIGNER, TERRIBLE LABS
@MSTECIUK
Prototypeyourwaytobeerproducts.

2. Agenda
•Beyond“failingcheaply”,orwhyprototypingreallymaers
•Fidelityisoverrated
•Toolsthatwork(hands-ondemos)
•Casestudy
•Sketch,buildandshareprototypes.
•pbon.es/proto

3. Ideas
ProductData
Build
Measure
Learn
THELEANSTARTUPPROCESS

4. Ideas
ProductData
Build
Measure
Learn

5. PROTOTYPING
PROCESS

6. PROTOTYPING
PROCESS: Plan
Build
Measure
Learn

7. NumberofTestUsers
UsabilityProblemsFound
0 3 6 9 12 15
0%
25%
50%
75%
100%
Jakob Nielsen:“WhyYouOnlyNeedtoTestwith5Users”

8. From:AnonymousUser
Ididn’tgetit. What’sthe
pointofthisappagain?
Icouldn’tfigureitout.
WHAT
AN
IDIOT

9. ? ??

11. Quality vs.Quantity

12. Quantity:

13. Quality:

14. Wecan’t
THINKourwaytosolutions.

15. Wehaveto
DISCOVERourwaytosolutions.

16. “You’redoingitwrong.”
- MY INNER VOICE

17. Noperfect,magicalprocess

18. Communication
Gooddesignprocess
isabout

19. “Chair”
Communication

20. “Oh,Igetit!”
Peopleunderstand
whattheycansee.

21. Words+Imagesare
morememorablethanwordsalone.

22. Prototypeshelpus
communicate.
“...andhere’swhat
Ithink...”

23. Ourclientslikeprototypes,too

24. Communicate &
Prototypeshelpus:
Understand

26. So,what’sthebest
prototyping
tool?

27. PEN&PAPER INVISION
FLINTO KEYNOTEor
POWERPOINT
PROTO.IO
XCODE
QUARTZ
COMPOSER APPCOOKER FIREWORKS+TAP
BALSAMIQ
BRIEFSPOPAPP
AXUREVARIOUS
FRAMEWORKS
FRAMER REFINE.IO

28. QUALITY OF
Interactivity
Choosethebesttoolforthejob
EASEOF
Distribution
LEARNABILITY &
Familiarity
IMPORTANCEOF
Collaboration

29. Experiment

30. Fast&Easy

31. Pen&Paper

32. BETTERIDEAS
NEEDMOREIDEAS
Sketching

33. Yourfirstideamaynotbeyourbest

34. Yourfirstideamaynotbeyourbest

35. BETTERIDEAS
NEEDMOREIDEAS
FOCUS
THECONVERSATION,
Sketching

37. Howdonesomethinglooks
≈
howdonesomethingis

38. Fidelityisoverrated

43. 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:

47. BETTERIDEAS
NEEDMOREIDEAS
FOCUS
THECONVERSATION,
INTERACTIVITY
IN5MINUTESFLAT
Sketching

48. Almostmagic

50. BETTERIDEAS
NEEDMOREIDEAS
FOCUSED
REVIEWMEETINGS
INTERACTIVITY
IN5MINUTESFLAT
VALIDATE
EVENEARLIER
Sketching

53. Don’ttakemywordforit:
cl.ly/QPlW

54. GeingStarted

55. WhatamItryingtolearn/figureout?

57. TicketZen

58. TicketZen

59. TicketZen

60. Howcanweimprovethis?

61. Beginwiththeflow

62. Getaticket OpenApp Scanticket
Ticketavailable:
Reviewticketinfo
Selectoradda
creditcardtopay
thecitation
Reviewamount,
andpaymentinfo,
submit
Ticketnotyetinthesystem:
saveforlater
(appwillsendalert
whenticketisreadytobepaid)
Isthisacaryoudriveoften?
Saveregistrationsoapp
cansearchfortickets

64. Firsttimeuser:
weaskforlocation
Assumethatcurrent
locationisalsothe
citywhereticketwas
issued
Ifnot,providealist
ofnearbycities
TicketZensupports

65. Sketcheachscreen

67. Makeitinteractive

69. flinto.com/p/e25a9d3d

70. Share,Learn,Improve

74. PROTO.IO

76. Prototyping
WebApplications

79. Maggie Steciuk
BOSTON, MA

80. Maggie Steciuk
BOSTON, MA
Contact Maggie
Send

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

82. Maggie Steciuk
BOSTON, MA
Your message has been sent.

86. Moregreatexamplesat:
hp://www.designstaff.org/articles/product-design-sprint-day-4-
prototype-2013-01-07.html

87. InVision

95. invisionapp.com | cl.ly/QOuc

96. Prototypingcanbeeasy Righttool,righttime
So,remember:

97. Prototypingcanbeeasy Righttool,righttime
So,remember:

98. Thankyou!
Resources:pbon.es/proto