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)
- Live Data
|PROTOTYPE||WHAT IS IT||HOW TO USE IT|
|Low-fi||Prototype that doesn’t look real||
|High-fi||Prototype where a screenshot would look real, but actual functionality isn’t real||
|Live Data||Prototype that is quickly built, but uses real data||
|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.
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)
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.