Communication Toggle

Mobile Prototyping, the 4 types of prototype

This is number 1 in a 3 part series on mobile prototyping for beginners, and in particular people who want to design their first app or mobile experience, or even product managers who normally work with a designer but want to get their hands a little dirty in the design phase.

According to Marty Cagan, there are four different types of prototypes and each of them has different applications that you can use to fulfill your goal of realizing value and building products with as little waste as possible. Another way of putting this is that prototypes can be awesome for making sure you are not building a product that nobody wants (the number 1 problem in a startup according to Ash Maurya).

Four Types of Mobile Prototyping

There are four types of prototype (mobile or not)

  • Low-fi
  • High-fi
  • Live Data
  • Hybrid
PROTOTYPE WHAT IS IT HOW TO USE IT
Low-fi  Prototype that doesn’t look real
  • Demonstrate a concept to someone
  • Figure out / show / agree the major page elements
  • Figure out / show / agree the flows in an app
  • Communicate with other people working on it
High-fi  Prototype where a screenshot would look real, but actual functionality isn’t real
  • Get end-users to evaluate the app
  • Find out what’s wrong with the app (product market fit)
  • Figure out / show / agree the polished UX
Live Data  Prototype that is quickly built, but uses real data
  • End-user evaluation for more complex software (perhaps B2B)
Hybrid  A combination of the above Depends on the hybrid mix

 

Building Products with Prototypes – A Staged Approach

One of the most interesting things you will find if you are building up a complex product is that you might do a prototype for each of these stages.

Lo-Fi to Begin With

In the early days, when you are just brainstorming or trying to bounce your ideas off people, you might design a low-fidelity prototype. I often do this with pen and paper, which is really fast and often good enough. If you wanted to use a tool, then Balsamiq is a good option (see below for a Balsamiq screenshot, it’s obvious that it isn’t a real app yet!). After getting some feedback from some people in your team or some trusted colleagues, you might decide to test the idea out on 10 typical customers to get their feedback.

Balsamiq

High-Fi to Show to Customers

To do this, you might decide that building a high-fidelity prototype is a good idea that would justify a week or two of a designer’s time. Sharing the low-fidelity prototype with your designer (as it is an excellent communication tool), you could build a high-fidelity prototype that would feel real to a typical new customer, and bring the 10 typical customers into the office for an afternoon so that they could use the app and evaluate it. At this stage, Marty Cagan tells us that what you will get is people telling you what is wrong (great to know!) but still not yet have proof that you have a winning product. However, knowing that 9 out of 10 people wouldn’t use it because of  some reason is exactly what you want to find. [See below for a facebook screenshot that shows what level of detail a high-fidelity screen would have, so that you can contrast it with the low-fi Balsamiq version above)

FB 3CTAs

Then building a live data or live prototype (which is really a simplified production release), you can give an actual working thing to say 50 customers as the next step. They would be able to use this app or software to actually do something (say book a dentist), and now based on actual usage, you can tell how much booking of dentistry is actually happening, where people are clicking, how often they are logging in etc. There will surely be enhancements that this data will lead you to.

So you see that each prototype stage is useful in itself, and often going through each stage will allow you to share, communicate and test the concept in deeper ways.

Working With Clients

If you are someone who works with a client, then you might use a low-fi prototype to agree the major page elements and the flows between screens. Then use a high-fidelity prototype to agree the more detailed UX. This can be really helpful, as if you have full UX in the early stages, you might find clients arguing over the colour of the logo, when what you really want the conversation to be is “do we allow customers to do X and Y or just Y”. Staging the prototypes like this can help to direct the conversation so the most important decisions happen first, whether with clients (external) or stakeholders (often internal).

Building Low-Fidelity Prototypes in an Hour

In my next post, I will show you how you can build a low-fidelity prototype in a few hours, even if you are not technical at all. All you will need is a pen and paper and your mobile phone.

About the author

Patrick Patrick O’Malley is an Internet and web professional passionate about building products that people love.

Now a product based consultant, he is ex-Head of Product, Yahoo! Answers, ex-Head of Operations MoveMe and an Imperial MBA.

Based in Paris (a bit) and London (a bit).

You can follow him on and Twitter or check his bio

Click here to submit your review.




Submit your review
* Required Field


Leave a Reply