How to Build an App Prototype: Secure Buy-In & Build Hype

Prototyping is a critical part of any app’s development cycle. For many businesses, a working prototype helps win stakeholder approval, secure management buy-in or begin customer testing. For Startups, who live and die on funding, getting a prototype together is even more critical and can be the difference between success and failure.

With that in mind, prioritising app development around getting your prototype launched as soon as you can is a sensible option. To do that, you’ll need to bear in mind a few different factors before starting the prototyping process. These are, in no particular order:

1. Don’t rush: while a prototype should come at an early stage, rushing into designing one can be a mistake. Ensure you’ve still done the fundamentals before you build anything (we’ll cover this shortly.)

2. Understand the purpose: a prototype is all about getting something in front of users or stakeholders to help progress your project. It isn’t about getting everything right from the beginning - but it IS about understanding the problems you’re trying to solve.

3. It’s not an MVP: your prototype is not your MVP (minimum viable product) - it is not a functioning product that can be launched to users. Features and interactions are only mocked up in prototyping; they aren’t actually designed and built until you progress to MVP.

4. Don’t develop it for a platform: Many of the world’s most popular Android and IoS apps started life as prototypes on sites like InVision and Figma. These allow you to create interactive prototypes without relying on specific platforms or features and can really free up the creative process.

Benefits of an app prototype:

• They’re quick to build and require minimal development input. Changes and testing can be performed without eating into your budget.

• Most prototypes are non-technical, so anyone can build them. This also means you can let the team who have the most insight into how to meet user needs - your UX design team - work on the prototype.

• Helps secure funding, investment and interest at an early stage.

"If a picture is worth 1000 words, a prototype is worth 1000 meetings." —saying at @ideo

— John Maeda (@johnmaeda) October 5, 2014

With these points in mind, let’s take a look at how to build an app prototype that can win over even the most sceptical of stakeholders. The secret? Understanding your users.

Step 1: Set the scene

The start of any app prototype needs to involve boiling down its core purpose. What is your app going to accomplish, and specifically, whose and what problem is it solving? Most apps and startups fail because they don’t solve any specific problem or fulfil a customer’s need. In fact, according to a survey from CBInsight (Source: Fundera) found:

• 42% of startups failed because they didn’t meet user needs.

• 14% failed to pay attention to their customers.

So that’s well over half of the 101 startups interviewed in the CBInsights study.

The first step of your prototype is therefore understanding what problem your app solves and who it is solving it for. You’ll need to perform some user research to do this - you can’t just rely on traditional marketing personas because they generally don’t have defined problems.

You must build your user personas with requirements in mind, which you can do by understanding your audience’s pain points and goals. In our innovation workshops, we walk businesses through this process - but you can also take it even further by commissioning paid user research. These user requirements then become tangible problem statements that your app can be shaped around.

Step 2: Look at the competition

Whether you’re technical or non-technical, looking into your market and assessing competing apps is never a bad idea. While your app should ideally be offering a unique solution to user problems, you’re still likely to have competitors with similar apps that you can learn from.

At the prototyping stage, you don’t need to delve deep into competitor research. Instead, just take a ‘top level’ view of competitor apps and create a list of likes and dislikes you can use to inspire your prototype. This should factor in the visual elements and the technical aspects - both of which are important for your initial prototype.

Step 3: Key functionality mapping

After the first two steps, you’ll have an idea of user requirements and assess your competitors. Now you’ll need to map out the critical functionalities of your app - what is it that it MUST accomplish for it to be successful? List them out in order, creating a priority-based list.

An app like Spotify, for example, likely had a list of key functionality that included:

1. Music streaming

2. Social sharing

3. Playlist creation

4. Listening offline

5. Automated mix creation

6. Video playback

For your prototype, you only need to concentrate on the first steps of your key functionalities. These are the most critical to answering user needs and will be the framework you build the rest of your app around.

Step 4: Create sketches & wireframes

Prototypes, as we said earlier, aren’t functional apps. They aren’t MVPs yet - so you can simplify your approach and avoid incurring development costs/time by sticking to the basics.

Sketching involves literally drawing out how your app will look and perform, focusing on how the primary screens interact with one another and which elements will be interactive. This is where a UX designer is invaluable, as they’ll be involved from the very first step of your project and help create a user-friendly approach from the beginning.

You’ll then take your sketches and create wireframes - clear outlines of each screen with annotations or indicator graphics like arrows to show how each element will relate to the other. This is a good stage to gather user feedback as you can pivot or add new functionality without having committed too much time.

However much time you invest in this stage, the most crucial thing is that you can now begin gathering feedback because you have something to show. Make sure you do, as it’ll make the next part easier...

Step 5: Create a prototype

Once you have feedback, you can start creating a prototype. There are two types of mobile app prototypes - low fidelity and high. Low fidelity prototypes are ideal for fast-moving businesses and start-ups looking to launch quickly, as they are minimalist in nature. They aren’t built with any level of technicality and are usually created in a dedicated interactive prototyping tool like InVision.

High fidelity prototypes are more involved, aiming to capture the look and feel of the intended final version. You will usually only progress to a high fidelity prototype if you have already secured funding or have a high level of confidence in your user research.

This article might be called ‘how to create an app prototype’, but honestly, this is a stage where we can’t go into the details of actually creating one. It depends entirely on what your app is, what it aims to do and what your users need.

Most prototypes are fine to be launched as a low-fidelity proof of concept, allowing you to secure stakeholder buy-in or see what users think. High-fidelity app prototyping requires more involvement and investment - but also simplifies the MVP stage as you’ll have something close to an MVP by the end of it.

Step 6: Present and progress to MVP

With your prototype ‘alive’, you can begin securing stakeholder/management/user buy-in. Get it in front of as many decision-makers as you can and gather as much feedback as you can. If your prototype is met with negative feedback, try not to be disheartened - at least you haven’t invested all of the time and money used in a typical development project.

Once you have all of your feedback and secured the go-ahead from decision-makers, you can take your prototype to your delivery teams and build a plan for progressing to an MVP launch.