What is an app prototype and why make one?

How do you know you have a winning app idea?

You can probably conduct a feasibility study. Or, you can ask the opinion of an experienced developer. But for most people, it’s simply having a strong gut feeling that their app will succeed.

Unfortunately, none of those are surefire indicators of success.

The best way to verify if you have a winning app idea is to validate it.

And that’s what prototypes are for.

What is an app prototype?

A prototype is a preliminary, interactive version of your app that shows its design and visual elements.

However, it does not contain functional code. All features and interactions are just simulated.

For example, this prototype of a gamified messaging app uses pre-generated content and pre-set clickable areas (highlighted in blue) to show how it would work in real life.

It doesn’t let users send actual messages.

Source: Marvel App

An app prototype is primarily a design validation tool to verify whether the app’s visual elements and user experience are acceptable to stakeholders and potential users.

This helps you refine your app’s UX before committing further resources to it.

Prototypes are usually the next step after the development team has used wireframes and mockups, but before releasing an MVP (minimum viable product).

Compared to these other validation tools, a prototype is considered a mid-cost, mid-impact solution, making it an easy addition to the development cycle.

Source: HSTK

However, creating a prototype isn’t always straightforward. It requires early and tight collaboration between the developers and designers.

Without it, you risk creating a prototype that looks pretty but is expensive or impossible to pull off.

For instance, UX designers might go all-out in creating a UI with stunning visuals that costs you twice your budget. Or they might introduce a feature that is risky to implement.

However, when done right, a prototype can lead to a more usable app overall.

Why should you make an app prototype?

Prototypes take time, effort, and money to create, there’s no doubt about it. However, they’re almost always well worth the resources you put into them.

Here are some benefits you can expect from them.

Securing buy-in from stakeholders

One of the hardest tasks for an app startup isn’t to convince people to use the product. Rather, it’s to get stakeholders to invest money into your app concept before it’s even a reality.

That’s a tall order.

But a prototype simplifies this process and increases your chances of getting a yes from stakeholders.

Need an mobile app?
We have a dedicated team just for you →

You’ll be talking with our technology experts.

Let’s talk

That’s because it lets them experience the app first-hand, thus giving them a clearer picture of what they’re investing in.

Prototypes are especially useful for stakeholders who are not design or tech-savvy. It would be hard for them to understand the technical capabilities of an app only by describing it.

One successful example of prototyping is Instagram. When the now-famous app started, it was a location-based platform called Burbn.

Source: Think Growth

Burbn began as a prototype built by its founder, Kevin Systrom.

He then showed this prototype to two venture capitalists from Baseline Ventures and Andreessen Horowitz, who got very interested in the project.

They eventually invested $500,000 as seed capital.

The interesting thing is that, on paper, Burbn was just another location-based app, much like Foursquare.

But it had an edge—Burbn allowed photo sharing. And thanks to his prototype, Systrom could clearly illustrate this capability to his investors.

Validating the app’s concept

Validation is perhaps the primary reason for a prototype’s existence. It tells you whether your app concept works in the real world.

This is important because lack of market need is the number one reason most apps fail. No one is immune to it—not even an app backed by $2 billion and an industry veteran.

One noteworthy example of this is the social media platform TeeBeeDee.

Source: Venture Beat

TeeBeeDee had a unique proposition—a social media platform for 40+ year-olds. The goal was to have a place where baby boomers could interact with each other.

The concept seemed so intriguing that founder Robin Wolaner managed to secure $4.8 million in funding.

Unfortunately, it failed just two years later. Here’s how the founder reflected on the reasons behind its failure:

The site’s business model wasn’t able to grow its user base big enough and fast enough to survive.

In other words, there wasn’t a real market need for the platform.

At the time when Facebook was just in its infancy, it was the younger generation that was more prone to being active on social media.

Contrast this with Twitter, which used a low-cost prototype to prove a market fit before going all-in.

Source: Clearcode

Twitter began as an internal messaging tool for the podcast company Odeo. It was then released publicly in June 2006 before gaining popularity in 2007.

Only then, after a proven market fit, did it receive its first big funding round.

Designing a great user experience

Prototypes are also vital as a usability testing tool. They allow you to gauge the user experience with those who’ll use them.

You can then use the feedback gained to refine your app design further.

The thing is that when you’re designing your UX, it’s almost always a guess. You’re not 100% sure it will resonate with users until they try it out.

A prototype is useful for this purpose because it closely mirrors the look and feel of the final app. That gives you the most accurate UX feedback compared to mockups and wireframes.

Prototypes also allow you to extract specific metrics that measure specific aspects of your app UX. One of these is the System Usability Scale or SUS.

SUS is a metric that measures the usability of your app. Specifically, it evaluates the following aspects:

Source: Hubspot

SUS is a great approach because it tells you where your UX is falling short. It’s also very repeatable, which allows you to compare your app’s UX before and after a revision.

Reducing the cost of app development

Despite their cost, prototypes can help you save money in the long run. Here’s why.

Generally, software projects are harder and more expensive to revise the further they are in development. This is called the 1-10-100 Rule.

The rule states that bugs cost 100 times more to fix in production compared to the design phase. In other words:

Source: Accuvance

But a prototype helps you avoid this problem by helping you spot issues earlier in the process.

For instance, you can get end users to assess a prototype before any code is written during the design phase.

If they spot any issues, you can save 90% of revision costs at this point, according to the 1-10-100 Rule.

Prototypes also help you launch a product and gain traction quickly. It can even help you nail down a monetization strategy at a minimal cost.

What are the types of prototypes?

Prototypes come in many different forms, each for a specific purpose. In this section, we introduce three of the most used.

Low-fidelity prototypes

Low-fidelity prototypes focus only on the interactions and functions of the app. Because of this, they only use basic shapes like squares to represent UI elements.

Graphics and colors are almost always never present.

They look something like the images below:

Source: Arounda Agency

Low-fidelity prototypes and wireframes often go hand-in-hand. Often, a prototype is derived from an approved wireframe and is used to show how the app transitions from screen to screen.

The simplicity of low-fidelity prototypes is their biggest advantage. That’s because they let you validate your app concept as rapidly and cheaply as possible.

As a result, you can nail down your overall concept before committing resources to developing the details.

Indeed, you don’t even need to have a digital prototype to do this. Sketching your app on paper and simulating interactions is perfectly acceptable. The technique is called paper prototyping.

Source: Just in Mind

Low-fidelity prototypes are also useful for evaluating your app’s user flow.

This refers to how users go through your app from point A to B.

For instance, if someone wants to book a ride on Uber, here are the steps they go through:

Source: Simon Pan

Low-fidelity prototypes allow you to optimize the user flow for a better experience. For instance, you might learn that you can reduce the number of steps in a given task.

Or that you should replace it altogether with a better workflow.

The best thing about low-fidelity prototypes is that they form the foundation of your app.

Designers can use them as a basis for their layout, while developers can refer back to them when coding the UI.

Medium-fidelity prototypes

A medium-fidelity prototype improves on the low-fidelity version by adding more graphics and visual elements.

As such, they’re also a step up in function, showing more of the app’s intended visual design and functionality.

Because it features visual elements, this prototype is often used during the design phase. You can use it to optimize the app’s layout further.

Simple graphics and photos are also used to represent UI elements, thus helping give a better sense of the final app.

Here’s what a medium-fidelity prototype would look like compared to a high-fidelity version.

Source: Wondershare

Medium-fidelity prototypes are also much more responsive. Instead of just going from screen to screen, you can now show the animated behavior of certain UI elements when clicked.

This is useful for further refining the interactive elements of your app, such as UI animations, without worrying about creating time-consuming visual elements.

Such a capability is especially vital if you have UI elements and behaviors that most people are unfamiliar with.

For instance, if your app requires different gestures, a medium-fidelity prototype might be a good time to test and refine them.

High-fidelity prototypes

High-fidelity prototypes are the closest representation to your app’s final version. They already contain all final visual elements, UI animation, behaviors, and functionality.

When you place a picture of a high-fidelity prototype and the final app version side-by-side, it should be nearly impossible to tell them apart.

The only big difference is that a high-fidelity prototype doesn’t contain any working code.

Here’s a split diagram of a low and high-fidelity prototype so that you can appreciate the difference more:

Source: ProtoPie

High-fidelity prototypes are a way to get some of the most accurate and meaningful feedback on your app’s UX.

That’s because end users can interact with the prototype, providing insights into how they would use the product.

Detailed prototypes are also the best tool for getting stakeholder approval or attracting investments.

But because everything is just simulated, there are still some things you can’t test.

For instance, a prototype can’t measure performance metrics like load speed and latency because there’s no actual code running in the background.

Despite these limitations, high-fidelity prototypes are still a vital validation tool. They can also become a jumping-off point to create a minimum viable product (MVP).

Learn more about app prototyping

Prototyping is no doubt a vital tool in your app development toolkit.

It’s the closest thing you have to predicting the future—and increasing your chance of app success.

But as we mentioned, it’s a challenging process that requires knowledge and expertise.

So, if you’d like to learn more about app prototyping, you can check out our prototyping best practices article here.

Or you can also read up on other validation tools like wireframes and mockups.