Prototype of a mouse in 1964

The Guide to your First Prototype

Astrolabs, Dubai ‘16

Ashiqur RahmanSajjad Kamal

sk@inov.io ar@inov.io

Remember Fred Flintstone?

This would be perfect !

So what features can Fred leave out for now?

The MVP

Dont forget the ‘V’ of

MVP

Do people really want this?

Types of MVPsThe Half Baked •Facebook

Types of MVPsBlog-first •Groupon

Types of MVPs

Landing Page Tests•Running Lean

Types of MVPsVideos •Dropbox

Types of MVPs

Crowdfunded •Pebble

Types of MVPs

Concierge MVP •AirBnb

“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

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

Jeff Hawkin’s Palm Pilot Prototype

“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.”

Prototypes help stakeholders think about the experience

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.

Can we really build this?

Paper Prototypes

Tools often used:

● Paper● Pen● Markers

Example Here

Paper prototypes are best for

•Producing tangible ideas from abstract ideas•Preliminary team discussions•Drafting layouts and flows

Low Fidelity Prototypes

Tools often used:

● Balsamiq● Axure

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.

High Fidelity Prototypes

Tools often used:

● Invision● Marvel● Sketch● Photoshop

Example Here

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

FunctionalPrototypes

Tools often used:

● App Inventor● Origami● Framer● Twitter Bootstrap● HTML & CSS or

more

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

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

Experiment/Feedback Loop

Before the Prototype, there is the Business Model

And now, the prototyping sessionGet your hands dirty

Understand the Problems of Customer Segments

Problem

Revenue Streams

UVP Unfair Advantage

Customer Segments

Channels

Solution

Key Metrics

Cost Structure

Problem

Revenue Streams

UVP Unfair Advantage

Customer Segments

Channels

Solution

Key Metrics

Cost Strucute

Define the Solution and Unique Value Proposition

•Bachelors who are university students and professionals•Age 20 to 35•Primarily expatriates •Do not own cars

Customer Segment

•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

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

Map the User Journey

with 3 Solutions and UVP

Group - 15 minutes

Sketch Your App

Individual - 15 minutes

Critique each other’s sketches

10 minutes

Pool best ideas from sketches into one final version then use Marvel to prototype

Group - 20 minutes

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.