How to prototype your mobile app in 6 easy steps

So you’ve had an absolute humdinger of an idea for a mobile app. But how do you take that idea and turn it into a genuine working prototype that will knock investors for six? Before you get carried away with lofty ambitions of being the next Instagram or WhatsApp, there’s a whole heap of work to do and crucial steps to take before you make your millions.

Define your app

The first step in the product development of any app is understand its purpose. Your idea may be brilliant, but this is the stage where you need to get the definition of your app down on paper. Ask yourself: Who will your app be aimed at? What will it do? And what problem will it try to solve?

You don’t need to write a lengthy dissertation-style piece for this. Keeping it simple will be enough at this stage, as it’s all about understanding what your app will do, who will use it, and, is it really necessary? This is important, as over 70% of people never use an app after 3 days of installing it.[1]

Do your research

While your idea sounds like a sure fire hit to you, and maybe even to friends and family, you’re still some way off convincing the rest of the world. This is where you really need to dig deep and research everything in the mobile app marketplace, as well as understanding your potential end users.

Research is vital. Not only to see who your competitors are and what they’re doing, but to understand the needs of your app’s users, and their feelings, good or bad, towards it. There are different ways to get this information effectively, and we talk about it more in our Building A Product With Purpose blog.

Define functionality that solves the problem

Once you’ve got a clear definition and understanding of your app, and the problem you’re attempting to solve, you can start working on your app’s functionality to overcome it. When we started planning our own Tea Minus app to take the stress out of who makes the office tea round, its main functionality needed to be the ability to automatically choose someone to make the drinks.

By choosing someone randomly, it removes the problem of anyone else having to decide, and reduces the chances of the task falling to either the same person, or a particular person who’s not pulling their weight. And by adding a function allowing people to create their own drink preferences and add them to each round, we removed the odds of getting served a builders brew with three sugars and the bag left it, instead of the milky tea with one sugar you actually wanted.

Map your users journey

The next step is to work out how to get your user from downloading the app, to getting value out of it. By physically drawing the user journey on paper, or using an online tool like draw.io, it will help clarify what steps need to be taken, either as a frequent or a first time user.

This will help you understand the journey better, but more importantly, it will confirm the steps the user takes and in what order for the app to make sense to them. Users want ease of use and this process will make sure that’s what they get.

Wireframe your interface

Now you’ve done most of the hard work, it’s time to get creative. Once you’ve mapped the user journey, you’ll see a lot of blank screens needing content, and that’s where wireframing comes in. Think of a wireframe as your apps skeleton - it will show the bones of your app and how it works.

The best thing to do is grab some paper and pencils and get sketching. It doesn’t have to be detailed at this point, as you’re just looking at getting a structure in place. This will help you get more clarity on the app’s functionality, and it’s easy to rethink certain things to get the best functionality and UX.

Build your prototype

Once you’ve successfully wireframed your app and made it as perfect as it can be, now’s the time to put it all together and build and refine your prototype. Using high-fidelity prototype software, you can get a level of detail and functionality that’s as close to a real app as possible, letting you see where every possible interaction is.

You may be convinced that your wireframes are precise, but in building the prototype you might discover something’s not quite right. This will give you the chance to correct and refine any elements along the way before you put your app to a user test. We prefer using InVision to develop prototypes, however you could also use tools like Proto.io or Marvel App.

Once your high-fidelity prototype is complete, get it in front of your potential users. Proving that your concept works will put you in a stronger position when showcasing your app to potential investors. Further usability tests beyond this point, probably based on investor feedback, will also help your app make an impact on the market.

Now what?

These six steps should give you a good sense of what’s required to build the app you know the world needs. It will take time and every ounce of determination, but the pay off will be worth it. And don’t forget we’re always open to helping with your app creation at any stage - just contact us and we’ll be happy to have a chat.

‍