codeless prototyping for web and mobile apps
DESCRIPTION
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/learnTRANSCRIPT
Maggie SteciukDESIGNER, TERRIBLE LABS@MSTECIUK
Prototype your way to beer products.
Agenda
• Beyond “failing cheaply”, or why prototyping really maers• Fidelity is overrated• Tools that work (hands-on demos)• Case study• Sketch, build and share prototypes.• pbon.es/proto
Ideas
ProductData
Build
Measure
Learn
THE LEAN STARTUP PROCESS
Ideas
ProductData
Build
Measure
Learn
Ideas
PROTOTYPINGPROCESS
PROTOTYPINGPROCESS: Plan
Build
Measure
Learn
Number of Test Users
Usab
ility P
roble
ms Fo
und
0 3 6 9 12 150%
25%
50%
75%
100%
Jakob Nielsen: “Why You Only Need to Test with 5 Users”
From: Anonymous User
I didn’t get it. What’s the point of this app again? I couldn’t figure it out.
WHAT AN
IDIOT
? ??
Quality vs. Quantity
Quantity:
Quality:
We can’t
THINK our way to solutions.
We have to
DISCOVER our way to solutions.
“You’re doing it wrong.”- MY INNER VOICE
No perfect, magical process
Communication
Good design processis about
“Chair”
Communication
“Oh, I get it!”
People understandwhat they can see.
Words + Images are
more memorable than words alone.
Prototypes help us communicate.
“...and here’s what I think...”
Our clients like prototypes, too
Communicate &Prototypes help us:
Understand
So, what’s the best prototypingtool?
PEN & PAPER INVISION FLINTO KEYNOTE orPOWERPOINT
PROTO.IO
XCODE
QUARTZCOMPOSER APPCOOKER FIREWORKS + TAP BALSAMIQ
BRIEFSPOP APPAXUREVARIOUSFRAMEWORKS
FRAMER REFINE.IO
QUALITY OF
Interactivity
Choose the best tool for the job
EASE OF
DistributionLEARNABILITY &
FamiliarityIMPORTANCE OF
Collaboration
Experiment
Fast & Easy
Pen & Paper
BETTER IDEASNEED MORE IDEAS
Sketching
Your first idea may not be your best
Your first idea may not be your best
BETTER IDEASNEED MORE IDEAS
FOCUSTHE CONVERSATION,
Sketching
How done something looks≈
how done something is
Fidelity is overrated
Notes:___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Mobile:
width 320pxcols 60pxgutters 16pxfold 480pxrows 16px
Tablet:
width 768pxcols 48pxgutters 16pxfold 1024pxrows 16px
Wireframe Sheet: Tablet & Mobile (Portrait)Title/Version: Date:
BETTER IDEASNEED MORE IDEAS
FOCUSTHE CONVERSATION,
INTERACTIVITYIN 5 MINUTES FLAT
Sketching
Almost magic
BETTER IDEASNEED MORE IDEAS
FOCUSEDREVIEW MEETINGS
INTERACTIVITYIN 5 MINUTES FLAT
VALIDATEEVEN EARLIER
Sketching
Geing Started
What am I trying to learn / figure out?
TicketZen
TicketZen
TicketZen
How can we improve this?
Begin with the flow
Get a ticket Open App Scan ticketTicket available:
Review ticket info
Select or add acredit card to pay
the citation
Review amount, and payment info,
submit
Ticket not yet in the system: save for later
(app will send alertwhen ticket is ready to be paid)
Is this a car you drive often?Save registration so app
can search for tickets
First time user:we ask for location
Assume that currentlocation is also thecity where ticket was issued
If not, provide a listof nearby citiesTicketZen supports
Sketch each screen
Make it interactive
Share, Learn, Improve
PROTO.IO
PrototypingWeb Applications
Maggie SteciukBOSTON, MA
Maggie SteciukBOSTON, MA
Contact Maggie
Send
Maggie SteciukBOSTON, MA
Contact Maggie
Send
Hey, Maggie! Just thought I’d let you know this presentationis going exceptionally well. Hardly anybody in the front of the room fell asleep.
Maggie SteciukBOSTON, MA
Your message has been sent.
More great examples at:hp://www.designstaff.org/articles/product-design-sprint-day-4-
prototype-2013-01-07.html
InVision
Prototyping can be easy Right tool, right time
So, remember:
Prototyping can be easy Right tool, right time
So, remember:
Thank you!Resources: pbon.es/proto