SlideShare a Scribd company logo
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
? ??
Codeless Prototyping for Web and Mobile Apps
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
Codeless Prototyping for Web and Mobile Apps
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
Codeless Prototyping for Web and Mobile Apps
Howdonesomethinglooks
≈
howdonesomethingis
Fidelityisoverrated
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
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:
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
BETTERIDEAS
NEEDMOREIDEAS
FOCUS
THECONVERSATION,
INTERACTIVITY
IN5MINUTESFLAT
Sketching
Almostmagic
Codeless Prototyping for Web and Mobile Apps
BETTERIDEAS
NEEDMOREIDEAS
FOCUSED
REVIEWMEETINGS
INTERACTIVITY
IN5MINUTESFLAT
VALIDATE
EVENEARLIER
Sketching
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Don’ttakemywordforit:
cl.ly/QPlW
GeingStarted
WhatamItryingtolearn/figureout?
Codeless Prototyping for Web and Mobile Apps
TicketZen
TicketZen
TicketZen
Howcanweimprovethis?
Beginwiththeflow
Getaticket OpenApp Scanticket
Ticketavailable:
Reviewticketinfo
Selectoradda
creditcardtopay
thecitation
Reviewamount,
andpaymentinfo,
submit
Ticketnotyetinthesystem:
saveforlater
(appwillsendalert
whenticketisreadytobepaid)
Isthisacaryoudriveoften?
Saveregistrationsoapp
cansearchfortickets
Codeless Prototyping for Web and Mobile Apps
Firsttimeuser:
weaskforlocation
Assumethatcurrent
locationisalsothe
citywhereticketwas
issued
Ifnot,providealist
ofnearbycities
TicketZensupports
Sketcheachscreen
Codeless Prototyping for Web and Mobile Apps
Makeitinteractive
Codeless Prototyping for Web and Mobile Apps
flinto.com/p/e25a9d3d
Share,Learn,Improve
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
PROTO.IO
Codeless Prototyping for Web and Mobile Apps
Prototyping
WebApplications
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
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.
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Moregreatexamplesat:
hp://www.designstaff.org/articles/product-design-sprint-day-4-
prototype-2013-01-07.html
InVision
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
Codeless Prototyping for Web and Mobile Apps
invisionapp.com | cl.ly/QOuc
Prototypingcanbeeasy Righttool,righttime
So,remember:
Prototypingcanbeeasy Righttool,righttime
So,remember:
Thankyou!
Resources:pbon.es/proto

More Related Content

PPTX
Challenges of managing Data Science Project
PDF
The 4 Deadly Sins of ITSM
PDF
What it takes to build production ready AI solution
PPTX
"Don't Start Big" at StartupWeekend Hong Kong
PDF
Lauren Isaacson - Productized Masterclasses
PDF
Why Content Projects Fail - Deane Barker - Presentation at eZ Conference 2017
PDF
Leveling up Developers
PDF
Continuous Learning and Delivery @ DPM Summit 2013
Challenges of managing Data Science Project
The 4 Deadly Sins of ITSM
What it takes to build production ready AI solution
"Don't Start Big" at StartupWeekend Hong Kong
Lauren Isaacson - Productized Masterclasses
Why Content Projects Fail - Deane Barker - Presentation at eZ Conference 2017
Leveling up Developers
Continuous Learning and Delivery @ DPM Summit 2013

What's hot (20)

PDF
Beyond Brainstorming: Idea-Finding for Innovation
PPTX
endoverend AB
PDF
Agile Greece Summit - Closing Keynote Bringing it all back home
PDF
Teresa Torres - Productized Masterclasses
PDF
Lean UX for Agile Teams
PDF
Inspirational web Designs 2021
PDF
What the %$!# do product managers do anyway?
PDF
Managing Products at Scale
PDF
Agile Tour 2016 Pune -Innovate your agile quotient. be the leader not the fol...
PDF
Rapid Product Design In The Wild
PDF
Prototyping 101 TajRiba
PDF
Rapid Product Design in the Wild - ProductTank
PDF
"Behind the AI Curtain - Designing for Machine Learning Products" by Crystal Yan
PPT
Kontagent sxsw2011
PDF
Rapid Product Design in the Wild
PDF
Designing the right product
PDF
Rapid Product Design in the Wild - Agile Iceland
PPTX
Big data, Big Results
PDF
Entrepreneurialitis - Pitfalls in Startups
PPTX
Pct2010 product design
Beyond Brainstorming: Idea-Finding for Innovation
endoverend AB
Agile Greece Summit - Closing Keynote Bringing it all back home
Teresa Torres - Productized Masterclasses
Lean UX for Agile Teams
Inspirational web Designs 2021
What the %$!# do product managers do anyway?
Managing Products at Scale
Agile Tour 2016 Pune -Innovate your agile quotient. be the leader not the fol...
Rapid Product Design In The Wild
Prototyping 101 TajRiba
Rapid Product Design in the Wild - ProductTank
"Behind the AI Curtain - Designing for Machine Learning Products" by Crystal Yan
Kontagent sxsw2011
Rapid Product Design in the Wild
Designing the right product
Rapid Product Design in the Wild - Agile Iceland
Big data, Big Results
Entrepreneurialitis - Pitfalls in Startups
Pct2010 product design
Ad

Viewers also liked (12)

PDF
How to Market Unsexy Products
PDF
Immigration Issues for Startups
PDF
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
PDF
Top 5 Usability Principles
PDF
Sales 101: How to Write an Email that Everyone Responds To
PDF
Prototyping for Lean UX - NEXT
PDF
Lean prototyping: Prototyping for Lean Process
PDF
2014 Lean UX 컨퍼런스 : 국내 기업의 Lean UX 실험사례
PDF
Product Management and the Search for Product Market Fit
PPTX
After Google AdWords: How to Generate Sales, Not Just Clicks and Leads
PDF
Open Prototyping - An early stage process model
PPT
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
How to Market Unsexy Products
Immigration Issues for Startups
2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지
Top 5 Usability Principles
Sales 101: How to Write an Email that Everyone Responds To
Prototyping for Lean UX - NEXT
Lean prototyping: Prototyping for Lean Process
2014 Lean UX 컨퍼런스 : 국내 기업의 Lean UX 실험사례
Product Management and the Search for Product Market Fit
After Google AdWords: How to Generate Sales, Not Just Clicks and Leads
Open Prototyping - An early stage process model
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
Ad

Similar to Codeless Prototyping for Web and Mobile Apps (20)

PDF
Hypothesize your Way into Better Product Development
PDF
Lean Startup 101
PDF
Prototyping to the North Star
PDF
Paper Prototyping Rakuten Osaka
PDF
Prototyping Services
PPTX
EIA2019HK - Prototyping and Design Hacks - Alar Kolk
PPTX
SINY Leanstartup Introduction | Reduce waste, run experiments!
PDF
Validating business ideas quickly with Lean - Tadas Labudis
PPT
MVP: Minimum Viable Product vs. Maximum Value Product
PDF
UX Antwerp Meetup January 2019 "User Centricity in a Corporate Environment"
PDF
Customer Development for Startups
KEY
Just UX it up
PDF
Fast prototypes and customer development for start ups
PDF
Intro to Prototyping
PDF
Customer Development Fast Protyping
PDF
How to create a product that people love (in 12 weeks!)
PPTX
How to Innovate for Profit - insideinnovation.co
PPTX
Experimentation Excellence Webinar Series: Time to scale up
KEY
What is Product Management
PDF
Growth Patterns: Building a foundation for expansion — Driving, or being driv...
Hypothesize your Way into Better Product Development
Lean Startup 101
Prototyping to the North Star
Paper Prototyping Rakuten Osaka
Prototyping Services
EIA2019HK - Prototyping and Design Hacks - Alar Kolk
SINY Leanstartup Introduction | Reduce waste, run experiments!
Validating business ideas quickly with Lean - Tadas Labudis
MVP: Minimum Viable Product vs. Maximum Value Product
UX Antwerp Meetup January 2019 "User Centricity in a Corporate Environment"
Customer Development for Startups
Just UX it up
Fast prototypes and customer development for start ups
Intro to Prototyping
Customer Development Fast Protyping
How to create a product that people love (in 12 weeks!)
How to Innovate for Profit - insideinnovation.co
Experimentation Excellence Webinar Series: Time to scale up
What is Product Management
Growth Patterns: Building a foundation for expansion — Driving, or being driv...

More from Intelligent_ly (20)

PPTX
Legal Land Mines: Raising Capital
PDF
Legal Land Mines: Raising Capital
PDF
Craft Your Marketing To-Do List Like a Growth Hacker
PDF
The UX Playbook: Tools, Tips, & Tricks
PDF
Founder Selling: How to Win Deals & Close Critical Sales
PDF
Tech for the Non Technical - Anatomy of an Application Stack
PDF
Fundamentals of Facebook Advertising
PDF
Introduction to Paid Customer Acquisition
PDF
Get funded Expert Advice from the People Who Know
PDF
Dave Balter's Advocacy Marketing Class
PDF
The Short List: Choosing Critical Features for Your Minimum Viable Product
PDF
Whale Hunting: How to Get Intros and Sell to Big Brands as a Startup
PDF
Don't Get Funded: How to Use Your Customers to Bootstrap
PDF
Facebook Advertising: Launch a Campaign That Really Works
PDF
UX & Wireframes Know Your Weapon of Choice
PDF
Content 101: How to Create Content People Actually Care About
PDF
Ramping Up: B2C Acquisition Marketing for Start-Ups
PDF
Email Strategy, Design and User Experience: Keys to Success
PDF
Keys to Responsive Design
PDF
Meditation: Startup's Secret Weapon
Legal Land Mines: Raising Capital
Legal Land Mines: Raising Capital
Craft Your Marketing To-Do List Like a Growth Hacker
The UX Playbook: Tools, Tips, & Tricks
Founder Selling: How to Win Deals & Close Critical Sales
Tech for the Non Technical - Anatomy of an Application Stack
Fundamentals of Facebook Advertising
Introduction to Paid Customer Acquisition
Get funded Expert Advice from the People Who Know
Dave Balter's Advocacy Marketing Class
The Short List: Choosing Critical Features for Your Minimum Viable Product
Whale Hunting: How to Get Intros and Sell to Big Brands as a Startup
Don't Get Funded: How to Use Your Customers to Bootstrap
Facebook Advertising: Launch a Campaign That Really Works
UX & Wireframes Know Your Weapon of Choice
Content 101: How to Create Content People Actually Care About
Ramping Up: B2C Acquisition Marketing for Start-Ups
Email Strategy, Design and User Experience: Keys to Success
Keys to Responsive Design
Meditation: Startup's Secret Weapon

Recently uploaded (20)

PDF
Quality Control Management for RMG, Level- 4, Certificate
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PDF
The Advantages of Working With a Design-Build Studio
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPT
Machine printing techniques and plangi dyeing
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PPTX
Media And Information Literacy for Grade 12
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
PPTX
12. Community Pharmacy and How to organize it
PPTX
An introduction to AI in research and reference management
PPT
UNIT I- Yarn, types, explanation, process
PDF
Phone away, tabs closed: No multitasking
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
SEVA- Fashion designing-Presentation.pdf
Quality Control Management for RMG, Level- 4, Certificate
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
The Advantages of Working With a Design-Build Studio
YV PROFILE PROJECTS PROFILE PRES. DESIGN
Machine printing techniques and plangi dyeing
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Media And Information Literacy for Grade 12
DOC-20250430-WA0014._20250714_235747_0000.pptx
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
12. Community Pharmacy and How to organize it
An introduction to AI in research and reference management
UNIT I- Yarn, types, explanation, process
Phone away, tabs closed: No multitasking
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
SEVA- Fashion designing-Presentation.pdf

Codeless Prototyping for Web and Mobile Apps