Codeless Prototyping for Web and Mobile Apps

•

6 j'aime•3,850 vues

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

Design Technologie

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

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’tﬁgureitout.
WHAT
AN
IDIOT

“Oh,Igetit!”
Peopleunderstand
whattheycansee.

Words+Imagesare
morememorablethanwordsalone.

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

Communicate &
Prototypeshelpus:
Understand

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

BETTERIDEAS
NEEDMOREIDEAS
FOCUS
THECONVERSATION,
Sketching

Howdonesomethinglooks
≈
howdonesomethingis

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

BETTERIDEAS
NEEDMOREIDEAS
FOCUSED
REVIEWMEETINGS
INTERACTIVITY
IN5MINUTESFLAT
VALIDATE
EVENEARLIER
Sketching

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

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.designstaﬀ.org/articles/product-design-sprint-day-4-
prototype-2013-01-07.html

Prototypingcanbeeasy Righttool,righttime
So,remember:

Recommandé

Challenges of managing Data Science ProjectLamjed Ben Jabeur

The 4 Deadly Sins of ITSM InvGate

What it takes to build production ready AI solutionNenad Bozic

"Don't Start Big" at StartupWeekend Hong KongLong Hoang

Lauren Isaacson - Productized Masterclasses Productized

How to Interview Customers with Square's PMProduct School

Why Content Projects Fail - Deane Barker - Presentation at eZ Conference 2017eZ Systems

Leveling up DevelopersJeff Dickey

Recommandé

Challenges of managing Data Science ProjectLamjed Ben Jabeur

The 4 Deadly Sins of ITSM InvGate

What it takes to build production ready AI solutionNenad Bozic

"Don't Start Big" at StartupWeekend Hong KongLong Hoang

Lauren Isaacson - Productized Masterclasses Productized

How to Interview Customers with Square's PMProduct School

Why Content Projects Fail - Deane Barker - Presentation at eZ Conference 2017eZ Systems

Leveling up DevelopersJeff Dickey

Continuous Learning and Delivery @ DPM Summit 2013Joshua Seiden

Beyond Brainstorming: Idea-Finding for InnovationJoshua Seiden

endoverend ABpatrikmalmberg-eoe

Agile Greece Summit - Closing Keynote Bringing it all back homeAgile Greece

Teresa Torres - Productized MasterclassesProductized

Lean UX for Agile TeamsJoshua Seiden

Inspirational web Designs 2021VirrgoTech

What the %$!# do product managers do anyway?Lindsay Rothman

Managing Products at Scale Lindsay Rothman

Agile Tour 2016 Pune -Innovate your agile quotient. be the leader not the fol...India Scrum Enthusiasts Community

Rapid Product Design In The WildMichele Ide-Smith

Prototyping 101 TajRibaErik Flowers

Rapid Product Design in the Wild - ProductTankMichele Ide-Smith

"Behind the AI Curtain - Designing for Machine Learning Products" by Crystal YanProductized

Kontagent sxsw2011krismet

Rapid Product Design in the WildMichele Ide-Smith

Designing the right productMichele Ide-Smith

Rapid Product Design in the Wild - Agile IcelandMichele Ide-Smith

Big data, Big ResultsSteven Stegman

Entrepreneurialitis - Pitfalls in StartupsStowe Boyd

How to Market Unsexy ProductsIntelligent_ly

Immigration Issues for StartupsIntelligent_ly

Contenu connexe

Tendances

Continuous Learning and Delivery @ DPM Summit 2013Joshua Seiden

Beyond Brainstorming: Idea-Finding for InnovationJoshua Seiden

endoverend ABpatrikmalmberg-eoe

Agile Greece Summit - Closing Keynote Bringing it all back homeAgile Greece

Teresa Torres - Productized MasterclassesProductized

Lean UX for Agile TeamsJoshua Seiden

Inspirational web Designs 2021VirrgoTech

What the %$!# do product managers do anyway?Lindsay Rothman

Managing Products at Scale Lindsay Rothman

Agile Tour 2016 Pune -Innovate your agile quotient. be the leader not the fol...India Scrum Enthusiasts Community

Rapid Product Design In The WildMichele Ide-Smith

Prototyping 101 TajRibaErik Flowers

Rapid Product Design in the Wild - ProductTankMichele Ide-Smith

"Behind the AI Curtain - Designing for Machine Learning Products" by Crystal YanProductized

Kontagent sxsw2011krismet

Rapid Product Design in the WildMichele Ide-Smith

Designing the right productMichele Ide-Smith

Rapid Product Design in the Wild - Agile IcelandMichele Ide-Smith

Big data, Big ResultsSteven Stegman

Entrepreneurialitis - Pitfalls in StartupsStowe Boyd

Tendances (20)

Continuous Learning and Delivery @ DPM Summit 2013

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

En vedette

How to Market Unsexy ProductsIntelligent_ly

Immigration Issues for StartupsIntelligent_ly

2010 UXEYE 혁신적인 UI를 위해 하지말아야할 7가지Jay Chaeyong Yi

Top 5 Usability PrinciplesErik Ralston

Sales 101: How to Write an Email that Everyone Responds To Intelligent_ly

Prototyping for Lean UX - NEXTTony (Soo) Kim

Lean prototyping: Prototyping for Lean ProcessTony (Soo) Kim

2014 Lean UX 컨퍼런스 : 국내 기업의 Lean UX 실험사례Sue Kim

Product Management and the Search for Product Market Fit Intelligent_ly

After Google AdWords: How to Generate Sales, Not Just Clicks and LeadsIntelligent_ly

Open Prototyping - An early stage process modelDrew Hemment

TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSNurhuda Hayati

En vedette (12)

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

Similaire à Codeless Prototyping for Web and Mobile Apps

Hypothesize your Way into Better Product DevelopmentElias Nema

Lean Startup 101Sam Hysell

Prototyping to the North StarUXDXConf

Paper Prototyping Rakuten OsakaMandy Meissner

Prototyping Services Rakuten Group, Inc.

EIA2019HK - Prototyping and Design Hacks - Alar KolkEuropean Innovation Academy

SINY Leanstartup Introduction | Reduce waste, run experiments!Adam Berk

Validating business ideas quickly with Lean - Tadas LabudisTadas Labudis

MVP: Minimum Viable Product vs. Maximum Value ProductLiquid Reality

UX Antwerp Meetup January 2019 "User Centricity in a Corporate Environment"UX Antwerp Meetup

Customer Development for StartupsGVA

Just UX it upKhal Weir

Fast prototypes and customer development for start upsSerdar Temiz

AI Models For Fun and Profit by Walmart Director of Artificial IntelligenceProduct School

Intro to PrototypingJorge Baltazar

Customer Development Fast ProtypingSerdar Temiz

How to create a product that people love (in 12 weeks!)The Happy Startup School

How to Innovate for Profit - insideinnovation.coLeslie Barry

Experimentation Excellence Webinar Series: Time to scale upOptimizely

What is Product ManagementMind the Product

Similaire à Codeless Prototyping for Web and Mobile Apps (20)

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

AI Models For Fun and Profit by Walmart Director of Artificial Intelligence

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

Plus de Intelligent_ly

Legal Land Mines: Raising CapitalIntelligent_ly

Craft Your Marketing To-Do List Like a Growth HackerIntelligent_ly

The UX Playbook: Tools, Tips, & TricksIntelligent_ly

Founder Selling: How to Win Deals & Close Critical SalesIntelligent_ly

Tech for the Non Technical - Anatomy of an Application StackIntelligent_ly

Fundamentals of Facebook AdvertisingIntelligent_ly

Introduction to Paid Customer AcquisitionIntelligent_ly

Get funded Expert Advice from the People Who KnowIntelligent_ly

Dave Balter's Advocacy Marketing ClassIntelligent_ly

The Short List: Choosing Critical Features for Your Minimum Viable ProductIntelligent_ly

Whale Hunting: How to Get Intros and Sell to Big Brands as a Startup Intelligent_ly

Don't Get Funded: How to Use Your Customers to Bootstrap Intelligent_ly

Facebook Advertising: Launch a Campaign That Really WorksIntelligent_ly

UX & Wireframes Know Your Weapon of ChoiceIntelligent_ly

Content 101: How to Create Content People Actually Care About Intelligent_ly

Ramping Up: B2C Acquisition Marketing for Start-UpsIntelligent_ly

Email Strategy, Design and User Experience: Keys to SuccessIntelligent_ly

Keys to Responsive DesignIntelligent_ly

Meditation: Startup's Secret WeaponIntelligent_ly

Plus de Intelligent_ly (20)

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

Dernier

Peaches App development presentation decktbatkhuu1

B. Smith. (Architectural Portfolio.).pdfUniversity of Wisconsin-Milwaukee

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR

Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja Nehwal

Pastel Portfolio _ by Slidesgo.pptx. XxxSegundoManuelFaichin1

VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Servicearoranaina404

Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...amitlee9823

FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756dollysharma2066

Design Inspiration for College by Slidesgo.pptxTusharBahuguna2

Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel

VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY

(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls

Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh

Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588

Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...amitlee9823

CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵anilsa9823

Dernier (20)

Peaches App development presentation deck

B. Smith. (Architectural Portfolio.).pdf

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️

Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...

Pastel Portfolio _ by Slidesgo.pptx. Xxx

VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service

Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...

FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756

Design Inspiration for College by Slidesgo.pptx

Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...

VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...

(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779

Call Girls in Kalkaji Delhi 8264348440 call girls ❤️

Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...

Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...

CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵

Codeless Prototyping for Web and Mobile Apps

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’tﬁgureitout. WHAT AN IDIOT

9. ? ??

10.

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

25.

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. Yourﬁrstideamaynotbeyourbest

34. Yourﬁrstideamaynotbeyourbest

35. BETTERIDEAS NEEDMOREIDEAS FOCUS THECONVERSATION, Sketching

36.

37. Howdonesomethinglooks ≈ howdonesomethingis

38. Fidelityisoverrated

39.

40.

41.

42.

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:

44.

45.

46.

47. BETTERIDEAS NEEDMOREIDEAS FOCUS THECONVERSATION, INTERACTIVITY IN5MINUTESFLAT Sketching

48. Almostmagic

49.

50. BETTERIDEAS NEEDMOREIDEAS FOCUSED REVIEWMEETINGS INTERACTIVITY IN5MINUTESFLAT VALIDATE EVENEARLIER Sketching

51.

52.

53. Don’ttakemywordforit: cl.ly/QPlW

54. GeingStarted

55. WhatamItryingtolearn/ﬁgureout?

56.

57. TicketZen

58. TicketZen

59. TicketZen

60. Howcanweimprovethis?

61. Beginwiththeﬂow

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

63.

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

65. Sketcheachscreen

66.

67. Makeitinteractive

68.

69. ﬂinto.com/p/e25a9d3d

70. Share,Learn,Improve

71.

72.

73.

74. PROTO.IO

75.

76. Prototyping WebApplications

77.

78.

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.

83.

84.

85.

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

87. InVision

88.

89.

90.

91.

92.

93.