prototipando como ninja! seu mockup em 15 minutos
TRANSCRIPT
![Page 1: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/1.jpg)
Product Design Sprint
@americano
![Page 2: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/2.jpg)
Roadmap1 - One use case
2 - One core journey
3 - Zoning
4 - Mockup
5 - Prototyping
![Page 3: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/3.jpg)
Objective
Demo your app tonight
As if you had coded it :)
![Page 4: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/4.jpg)
1 - One use case verb + complement
![Page 5: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/5.jpg)
Do ONE thing only, do it good
book a place
share a story
order a cab
manage a project
discover recipes
![Page 6: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/6.jpg)
Find a new angle. Your UVPDiscovery
Beautiful stories
Convenience
Simplest UI possible
Experience a place like a local
It’s not a post, it’s a story
Get a ride in one click
PM for everyone
Each step needs a nice pictureIllustrated recipes
![Page 7: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/7.jpg)
Best alumni projects do ONE thing
plan your staff
organize your festival
build a guide
find a job
![Page 8: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/8.jpg)
social price
Find your UVP
VS
![Page 9: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/9.jpg)
price
![Page 10: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/10.jpg)
![Page 11: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/11.jpg)
2 - Core user journey 5 views max
![Page 12: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/12.jpg)
5 views maxkill frictions
![Page 13: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/13.jpg)
Best alumni projects have 5 views max
![Page 14: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/14.jpg)
What’s the core user journey?
Book a flat
![Page 15: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/15.jpg)
home
results
show
confirm
search
choose
book
pay
![Page 16: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/16.jpg)
home results show confirm
For each view
Action I want my user to…
Context For that he/she needs to know…
Angle He/she understands my UVP because…
![Page 17: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/17.jpg)
home index show confirm
What should I see?
What should I do?
search form + suggestions
search for a flat
it feels about culture and people
Why is it different?
Action I want my user to search for a flat
Context For that he/she needs to know how to search thanks to placeholders (location/checkin/checkout/guests)
Angle He/she understands my UVP because there are suggestions with people’s flat and pictures below
![Page 18: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/18.jpg)
home index show confirm
Action I want my user to choose a flat
Context For that he/she needs to know which one is the cheapest, best rated, best located
Angle He/she understands my UVP because he sees rating and owner’s picture for each result
![Page 19: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/19.jpg)
home index show confirm
Action I want my user to book the flat
Context For that he/she needs to know how much it would cost in total, and if the flat suits his/her needs
Angle He/she understands my UVP because there are detailed travellers’ comments and several pictures of the flat
![Page 20: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/20.jpg)
home index show confirm
Action I want my user to pay
ContextFor that he/she needs to know if he/she did not make mistakes in the booking, and how to enter credit card details
Angle He/she understands my UVP because…
![Page 21: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/21.jpg)
What should the user see?
LESS IS MORE
![Page 22: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/22.jpg)
What’s key for the understanding?
- Title & description - Price - Equipment & beds - Reviews - Pictures - Owner’s profile picture - Owner’s other flats - Similar flat offers - District pictures - Nearby cool places - Other renters’ details
![Page 23: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/23.jpg)
What do I want my user to do?
One call to action
![Page 24: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/24.jpg)
3 - Zoning
![Page 25: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/25.jpg)
Drawing rectangles
![Page 26: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/26.jpg)
Map
Flat results view
Result Result
Result Result
Filters
![Page 27: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/27.jpg)
Picture
Title, rating
Booking form
Reviews
Map
Owner
Equipment
Flat show view
![Page 28: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/28.jpg)
4 - Mockup
![Page 29: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/29.jpg)
Fill the zones
![Page 30: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/30.jpg)
Picture
Title, rating
Booking form
Reviews
Map
Owner
Equipment
Show view (zoning)
![Page 31: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/31.jpg)
Show view (mockup)
![Page 33: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/33.jpg)
5 - Prototyping
![Page 34: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/34.jpg)
Connect mockup views
![Page 35: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/35.jpg)
Import PNG in marvelapp
![Page 36: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/36.jpg)
Marvelapp Demo
https://www.youtube.com/watch?v=MFIlW68giDY
![Page 37: Prototipando como ninja! Seu mockup em 15 minutos](https://reader034.vdocuments.net/reader034/viewer/2022042520/58aceb2b1a28ab40588b60dd/html5/thumbnails/37.jpg)
Happy prototyping :)