Design and prototype your product following Le Wagon's methodology.

1. Product Design
Sprint
@bpapillard

2. Roadmap
1 - One use case
2 - One core journey
3 - Zoning
4 - Mockup
5 - Prototyping

3. Objective
Demo your app tonight
As if you had coded it :)

4. 1 - One use case
verb + complement

5. Do ONE thing only, do it good
book a place
share a story
order a cab
manage a project
discover recipes

6. Find a new angle. Your UVP
Discovery
Beautiful stories
Instantaneous
Nothing more than lists and cards
Experience a place like a local
It’s not a post, it’s a story
Get a ride in one click
Simplest UI possible
Each step needs a nice picture
Illustrated recipes

7. Best alumni projects do ONE thing
plan your staff
organize your festival
build a guide
find a job

8. social price
Find your UVP
VS

9. price

11. 2 - Core user journey
5 views max

12. 5 views max
kill frictions

13. Best alumni projects have 5 views max

14. What’s the core user journey?
Book a flat

15. home
results
show
confirm
search
choose
book
pay

16. 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…

17. 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

18. 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

19. 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

20. home index show confirm
Action I want my user to pay
Context
For 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…

21. What should the user see?
LESS IS MORE

22. 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

23. What do I want my user to do?
One call to action

24. 3 - Zoning

25. Drawing rectangles

26. Map
Flat results view
Result Result
Result Result
Filters

27. Picture
Title, rating
Booking form
Reviews
Map
Owner
Equipment
Flat show view

28. 4 - Mockup

29. Fill the zones

30. Picture
Title, rating
Booking form
Reviews
Map
Owner
Equipment
Show view (zoning)

31. Show view (mockup)

32. Sketch Demo
https://www.youtube.com/watch?
v=zR-6RW3kHyM

33. 5 - Prototyping

34. Connect mockup views

35. Import PNG in marvelapp

36. Marvelapp Demo
https://www.youtube.com/watch?
v=MFIlW68giDY

37. Happy prototyping :)