Building working prototypes without code
-
Upload
invision-app -
Category
Design
-
view
16.138 -
download
1
Transcript of Building working prototypes without code
![Page 1: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/1.jpg)
![Page 2: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/2.jpg)
Building Functional Prototypes*
@wadefoster
* No Coding required.
![Page 3: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/3.jpg)
WHO AM I?
• CEO of Zapier
• Built original Zapier prototypein 54 hours at a hackathon
• Now over 800,000 users WADE FOSTER
![Page 4: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/4.jpg)
What You’ll Learn
![Page 5: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/5.jpg)
LEARN HOW TO…
• Build and launch in days, not months
![Page 6: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/6.jpg)
LEARN HOW TO…
• Build and launch in days, not months
• Get v1 into the market prior to "the real version"
![Page 7: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/7.jpg)
LEARN HOW TO…
• Build and launch in days, not months
• Get v1 into the market prior to "the real version"
• Use off-the-shelf software to make working apps
![Page 8: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/8.jpg)
LEARN HOW TO…
• Build and launch in days, not months
• Get v1 into the market prior to "the real version"
• Use off-the-shelf software to make working apps
• Make money
![Page 9: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/9.jpg)
What is functional prototyping?
![Page 10: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/10.jpg)
An experience that delivers on a promise.
One where the user doesn't have to
pretend to get the desired result.
![Page 11: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/11.jpg)
PAY NO ATTENTION
TO THE MAN BEHIND THE CURTAIN
Wizard of Oz
![Page 12: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/12.jpg)
Why Functional Prototyping
![Page 13: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/13.jpg)
WHY FUNCTIONAL PROTOTYPING
• Let the user experience the "a ha!" moment
![Page 14: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/14.jpg)
WHY FUNCTIONAL PROTOTYPING
• Let the user experience the "a ha!" moment
• Use it in production before a polished version is ready
![Page 15: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/15.jpg)
WHY FUNCTIONAL PROTOTYPING
• Let the user experience the "a ha!" moment
• Use it in production before a polished version is ready
• It's as easy as non-functional prototypes
![Page 16: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/16.jpg)
3 Case Studies
![Page 17: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/17.jpg)
CASE STUDY #1
![Page 18: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/18.jpg)
![Page 19: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/19.jpg)
CASE STUDY: MAGIC
• Shared with a few friends
• Went viral on Product Hunt and Hacker News
• 30 users to thousands
![Page 20: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/20.jpg)
CASE STUDY #2
![Page 21: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/21.jpg)
![Page 22: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/22.jpg)
![Page 23: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/23.jpg)
CASE STUDY: GREEN SOCKS
• Live for 4 months
• 140 customers with mowed lawns
![Page 24: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/24.jpg)
CASE STUDY #3
PIETER LEVELS
![Page 25: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/25.jpg)
![Page 26: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/26.jpg)
![Page 27: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/27.jpg)
CASE STUDY: PIETER LEVELS
• Launched 12 startups in 12 months using these techniques
• NomadList, Taylor, Makebook.io are 3 of many
![Page 28: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/28.jpg)
Tools for the Job
![Page 29: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/29.jpg)
TOOLS: FORMS
• Typeform
• Google Forms
• Wufoo
• Gravity Forms
![Page 30: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/30.jpg)
TOOLS: DATABASE
• Google Sheets
• Airtable
![Page 31: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/31.jpg)
TOOLS: NOTIFICATIONS
• Twilio
• Gmail
• Mandrill
• Mailgun
![Page 32: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/32.jpg)
POW!
![Page 33: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/33.jpg)
When should I polish?
![Page 34: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/34.jpg)
Are conversion rates low?
Can you keep up with demand?
Is it time to scale?
![Page 35: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/35.jpg)
RECAP
• Let the user experience the "a ha!" moment
• Use it in production before a polished version is ready
• It's as easy as non-functional prototypes
![Page 36: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/36.jpg)
LEARN MORE
https://zapier.com/blog/prototype-app-zapier/
https://makebook.io/
“UX for Lean Startups” by Laura Klein
![Page 37: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/37.jpg)
QUESTIONS?
Follow @wadefoster on Twitter to learn more
![Page 38: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/38.jpg)
Slides designed by Zapier alum Bryan Landers.
If you need help making prototypes, visit:
http://bryanlanders.com/work/cobble/
![Page 39: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/39.jpg)
zapier.com
![Page 40: Building working prototypes without code](https://reader035.fdocuments.in/reader035/viewer/2022062523/58cf1bbc1a28abc05f8b5479/html5/thumbnails/40.jpg)