The guide to your first prototype
-
Upload
ashiqur-rahman -
Category
Design
-
view
515 -
download
0
Transcript of The guide to your first prototype
![Page 1: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/1.jpg)
Prototype of a mouse in 1964
The Guide to your First Prototype
Astrolabs, Dubai ‘16
![Page 3: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/3.jpg)
Remember Fred Flintstone?
![Page 4: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/4.jpg)
![Page 5: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/5.jpg)
This would be perfect !
![Page 6: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/6.jpg)
So what features can Fred leave out for now?
![Page 7: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/7.jpg)
![Page 8: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/8.jpg)
![Page 9: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/9.jpg)
The MVP
![Page 10: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/10.jpg)
Dont forget the ‘V’ of
MVP
![Page 11: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/11.jpg)
Do people really want this?
![Page 12: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/12.jpg)
Types of MVPsThe Half Baked •Facebook
![Page 13: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/13.jpg)
Types of MVPsBlog-first •Groupon
![Page 14: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/14.jpg)
Types of MVPs
Landing Page Tests•Running Lean
![Page 15: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/15.jpg)
Types of MVPsVideos •Dropbox
![Page 16: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/16.jpg)
Types of MVPs
Crowdfunded •Pebble
![Page 17: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/17.jpg)
Types of MVPs
Concierge MVP •AirBnb
![Page 18: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/18.jpg)
![Page 19: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/19.jpg)
“I’m not saying every product needs to be perfect before you ship, the first Macintosh was hardly perfect, but it was still
revolutionary.”
Guy Kawasaki Former Apple Chief Evangelist
![Page 20: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/20.jpg)
Key Takeaways• An MVP is the first version of your idea intended to communicate value to
your target users or customers
• Almost anything can be an MVP as long as it can prove your idea to be a viable business opportunity
• It’s absolutely normal for your MVP to suck
• The MVP should be a way to learn more about your users and the problem you’re trying to solve
![Page 21: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/21.jpg)
Jeff Hawkin’s Palm Pilot Prototype
![Page 22: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/22.jpg)
“People thought Jeff Hawkins was crazy when they saw him taking notes, checking appointments, and synchronizing a small block of wood with his PC, pretending all the while that the block was a handheld computer.”
![Page 23: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/23.jpg)
![Page 24: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/24.jpg)
Prototypes help stakeholders think about the experience
![Page 25: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/25.jpg)
Prototype vs MVP
A Prototype’s goal is to test product design or technical hypotheses.
An MVP’s goal is to test business hypotheses as well as product design or technical hypotheses.
![Page 26: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/26.jpg)
Can we really build this?
![Page 27: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/27.jpg)
Paper Prototypes
Tools often used:
● Paper● Pen● Markers
Example Here
![Page 28: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/28.jpg)
Paper prototypes are best for
•Producing tangible ideas from abstract ideas•Preliminary team discussions•Drafting layouts and flows
![Page 29: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/29.jpg)
Low Fidelity Prototypes
Tools often used:
● Balsamiq● Axure
![Page 30: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/30.jpg)
Low fidelity prototypes are best for
•Content driven•Focuses on layouts and flows •Free from arguments related to aesthetic values like
colors, typography, illustrations, images.
![Page 31: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/31.jpg)
High Fidelity Prototypes
Tools often used:
● Invision● Marvel● Sketch● Photoshop
Example Here
![Page 32: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/32.jpg)
High fidelity prototypes are best for:
•Content driven•Focuses on layouts and flows •Represents the look and feel of the real product•Can be used for user research as long as the app
interactions are simple, minimal input fields, lots of button tapping
![Page 33: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/33.jpg)
FunctionalPrototypes
Tools often used:
● App Inventor● Origami● Framer● Twitter Bootstrap● HTML & CSS or
more
![Page 34: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/34.jpg)
Functional prototypes are best for
•Content driven•Focuses on layouts and flows •Represents the look and feel as well as the actual
experience of the product•Can be used for user research and will product the best
results
![Page 35: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/35.jpg)
Key Takeaways
•Different types of prototypes with their own usecase
•Prototypes are meant for iterations and progressions. for e.g. sketching to low fidelity prototype to high fidelity prototype to functional prototypes
•Testing technical hypotheses
![Page 36: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/36.jpg)
![Page 37: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/37.jpg)
![Page 38: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/38.jpg)
Experiment/Feedback Loop
![Page 39: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/39.jpg)
Before the Prototype, there is the Business Model
![Page 40: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/40.jpg)
![Page 41: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/41.jpg)
And now, the prototyping sessionGet your hands dirty
![Page 42: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/42.jpg)
Understand the Problems of Customer Segments
Problem
Revenue Streams
UVP Unfair Advantage
Customer Segments
Channels
Solution
Key Metrics
Cost Structure
![Page 43: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/43.jpg)
Problem
Revenue Streams
UVP Unfair Advantage
Customer Segments
Channels
Solution
Key Metrics
Cost Strucute
Define the Solution and Unique Value Proposition
![Page 44: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/44.jpg)
•Bachelors who are university students and professionals•Age 20 to 35•Primarily expatriates •Do not own cars
Customer Segment
![Page 45: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/45.jpg)
•Don’t know who to call or where to find affordable places•Difficulty in knowing whether a roommate is the right fit•Don’t know if the neighborhood has all the necessary facilities nearby (including supermarkets, hospitals, public transport)
Problems
![Page 46: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/46.jpg)
User PersonasJanet● 19 years old● International Student from South Africa● Lives on Campus● Prefers roommates who are clean, non party animals and ready to give
space during study hours
Ali● 28 years old● Banking professional at EmiratesNBD● Lives in Discovery Gardens● Prefers roommates who do their share of the cleaning, cooking as well
as pays rents timely
![Page 47: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/47.jpg)
Map the User Journey
with 3 Solutions and UVP
Group - 15 minutes
![Page 48: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/48.jpg)
Sketch Your App
Individual - 15 minutes
![Page 49: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/49.jpg)
Critique each other’s sketches
10 minutes
![Page 50: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/50.jpg)
Pool best ideas from sketches into one final version then use Marvel to prototype
Group - 20 minutes
![Page 51: The guide to your first prototype](https://reader031.fdocuments.in/reader031/viewer/2022020410/58f9a9e2760da3da068b7320/html5/thumbnails/51.jpg)
So what next?
Depending on your level of confidence:•Start with a low fidelity prototype - useful if you’re working with a team of developers and a designer who can convert to high fidelity
•Or skip to high fidelity prototype - useful if you’re skilled in Sketch or Photoshop to create a glimpse of the look and feel
•Or skip to functional prototype if you have mapped out all the use cases thoroughly.