The Beginner’s Guide To Rapid Prototyping By Shailesh K Gupta

Shailesh K Gupta
12 min readJul 25, 2021

--

What it is, why you should practice it, and how you can leverage it for a successful app launch.

Which of these apps would you rather be?

Having delivered the apps that raised over $57M+ in venture capital for our customers, we know a typical six-figure app starts with a rapid prototype. But this knowledge hasn’t come cheap.

Hit & Miss App

  • The client insisted on skipping the prototype step entirely.
  • The development of the app went over budget.
  • It took 1.5 months longer to launch, and a promotional event was missed.
  • The product ultimately went nowhere, with users not understanding how to use it. And when they did, they didn’t stick.

Ask us about this app

Successful App

  • The client agreed and collaborated with us on a rapid prototype.
  • The app was developed within the estimated budget.
  • It hit the market at the right time and got considerable traction.
  • The client went on to raise millions for further product development, and the solution became a role model in its market.

Ask us about this app

Why did one app fall flat, and another succeed? We firmly believe that has something to do with the rapid prototyping step.

Almost two-thirds of apps fail to get more than 1,000 downloads simply because of no user testing. In fact, the number one reason for apps failing is the lack of user testing.

What is Rapid Prototyping?

In-app development, rapid prototyping is the production of an interactive app prototype. A prototype often looks and feels like a real app from an app store — it’s virtually a graphical shell of your future app. You can play with it in a browser or on a mobile device, jumping between screens and exploring user journeys. Yet, the purpose of a prototype is far greater than entertainment.

  • Know your market fit
  • Hands-on online prototype interactivity
  • Optimize your user experience
  • Customer feedback and improvements

Why rapid?

So you can go from idea to prototype within 4 weeks instead of having to wait weeks until you’re finally ready, only to realize someone else has already done exactly what you’re doing!

Why should you care about prototyping?

Because you care about your app actually succeeding. Whether you’re unsure if now is the right time to get the app out there, or if you don’t have the necessary funding, or you’re just unsure your idea is good enough — prototyping is (almost) always the answer. So gear up, and let’s jump into why.

Rapid Prototyping Process

Your goal with rapid prototyping is to build an interactive app prototype, a designed clickable version of your app that you can share with customers to get feedback on what’s working and what’s not. To do that, you follow a few predefined steps. Let’s run these over so that you have a clear picture of what app prototyping really comes down to.

Know your audience

Before you start prototyping an app, you need to validate your app idea.

Create a customer persona

  • Who will use the app?
  • What are their needs?

Survey and watch potential customers

  • Are my customers’ needs really underserved?

Survey and watch potential customers

  • Describe typical app use cases

Low-Fidelity Prototyping

The essence of rapid prototyping happens in the UX plane. Based on the data you have uncovered with the customer persona and use cases, UX designers create rough sketches of all app screens, also known as wireframes.

They use InVision, Adobe XD, Sketch, and other design tools to interlink these app screens together. That’s how you get a low-fidelity prototype: wireframes of app screens that respond to your mouse clicks or finger taps the way an actual app would.

Using this low-fidelity prototype, you can start iterating, gathering feedback from test users, and implementing the insights into the prototype. Since no UI design is involved, iterations follow relatively quickly. Once you’ve locked down the UX that users are content with and verified it with developers for technical feasibility, you can move on to high-fidelity prototyping.

High-Fidelity Prototyping

A high-fidelity prototype resembles the low-fidelity prototype, only with an actual UI applied. What happens in practice is UI designers create the graphical UI and interlink the app’s screens precisely as in the low-fidelity prototype. Once you can click through these polished screens, you have a high-fidelity prototype ready and you can take it to investors and app developers.

Popular tools for Prototyping

Thanks to technology, there’s no dearth of tools that allow for prototypes to be created within a couple of weeks. Here are some of the many tools you can pick from for rapid prototyping.

Low-fidelity design

Balsamiq, Origami

High-fidelity design

Sketch, Figma, Adobe XD

Design-to-development handoff

Zeplin, Avocode, Supernova

7 Reason to create a Prototype

Discover the Perfect Product-Market Fit Faster

An app prototype is your single most powerful tool to identify the perfect product-market fit. It’s hard to assess if an app solves a real pain point until you get the prototype into your customers’ hands. Their experience with the prototype will help you understand how you can augment the app to get better traction.

First, you need to deÿne and test your value hypothesis… What are you going to build, who is desperate for it, and what is the business model you are going to use to deliver it?
- Andy Rachleff, Author of “The Market-Fit Concept”

When you’re validating a prototype, make sure you’re taking it to the right people. The better you know your target audience, the quicker you’ll be able to apply their feedback and nd the product-market t. And that means you need to develop a well-rounded customer persona.

Who is your ideal customer specifically?

Once you have your ideal customer figured out, it’s time to verify the prototype at scale. For this, you’d want to take a look at such testing tools as usertesting.com. These tools allow you to select a user panel matching your customer demographics and other criteria. That way, the feedback you get remains on point.
Besides processing feedback from focus groups, you can also run all sorts of tests in the background. For instance, A/B split testing may reveal that your target audience prefers to sign up with a phone number instead of a social account.

Discovering the Product/Market Fit Faster (cont’d)

Adopt the Lean Product Process

If you are doing this right, though, you’ll find yourself going through this loop iterating on the prototype and the app concept itself. Here’s a summary of the process:

  1. Define the target audience and their needs
  2. Offer a unique value derived from underserved needs
  3. Turn the value into a feature set
  4. Create your prototype based on the above
  5. Test the prototype with users
  6. Iterate until you have a version that works best

Blend Technology with Design

When you set a deadline and prototype as fast as you can, iterating on user feedback and ignoring code to focus on design, you’re learning what does and doesn’t work from everybody on the app development team.
That means that if Nancy in development realizes that you can’t afford to build out features A and B, you can flag them and find a better alternative without wasting money learning the hard way later.

The reason you want Nancy’s feedback early in the prototyping phase is that changes in the code are costly. For instance, deciding that an app needs to work in an offline mode after development has begun will cause delayed time to market plus extra costs.
As you can see, the accumulative effect of such negligence can be devastating. Rapid prototyping ensures you design around a sustainable tech stack that is easy to maintain and evolve.
Similarly, you should have your team of software engineers go through available technologies (SDKs, APIs, etc.) to shortlist its building blocks. That way, you don’t need to spend time reinventing stuff. In essence, rapid prototyping makes sure your app’s design is perfectly aligned with technologies underneath it.

KEY TAKEAWAYS

  • Set a long-term technology foundation for the app at the rapid prototyping step.
  • Have developers with various skill sets (server/app) review the prototype
  • Leverage existing technologies to spearhead development

Avoid Costly Mistakes

A company founded by successful entrepreneurs (sold their previous business to Apple for $80M) develops a social photo-sharing app — Photo Lab. They go on to raise $41M. And after a year and a half, the company terminates the app because users don’t know what to do with it. Had they spent more time iterating with a rapid prototype, they could’ve ended up with a simpler, yet livelier, app.
Rapid prototyping allows you to accurately estimate the effort required for building your app. Since rapid prototyping does not involve programming, it takes only a moderate investment to get the prototype off the ground. Plus, knowing your app development budget is a great way to plan marketing activities, release to the app stores, and arrange other post-launch activities.
Depending on the users’ feedback, you can pivot and iterate quickly, until you find the sweet spot your customers will love. Alternatively, if you were to code each iteration, your app development budget would multiply proportionally to the sum of all iterations.
The sheer nature of rapid prototyping helps you keep the costs at bay from the very beginning. Since you are more interested in the app’s UX at the start, the prototype usually takes the form of wireframes — very rough sketches of the future UI.
And only when the UX has been verified with users, you can turn to high-fidelity prototyping, i.e. applying the actual UI to wireframes. Not having to deal with a polished UI while iterating on the app’s UX, saves the budget.

InWhiteLine Studio built an app that meets expectations and functions well. Their team was organized and communicative, keeping us updated on project progress. The entire team is honest and dedicated, delivering exactly what they promised. -Shailesh K Gupta

KEY TAKEAWAYS

  • Identify the minimum scope required to start getting the traction
  • Get a predictable budget for app development
  • Plan marketing activities based on the predictable development timeline

Go to market faster (than others)

Having a locked-in, accurate budget also means having your app ready for the market in the foreseeable future. And as we’ve discovered after delivering over 50 apps, rapid prototyping is rapid for a reason. Without having to re-engineer the app each time you pivot or introduce a cosmetic change to the UI, an app can reach consumers almost 2x faster.

I‘ve seen a lot of startups die because they were too slow to
release stu, and none because they were too quick.
- Paul Graham, the co-founder of Y Combinator

As an app owner, you probably already know that you don’t own your app idea entirely. Not until you have released the app. There are many companies out there exploring app ideas that are similar, if not identical, to yours.

And so starting sooner with a rapid prototype dramatically increases your chances to release your app before the competition.
What’s more, with rapid prototyping, you enter the market with a data-backed solution. Meaning you have done your research on how users really use the app and how they can benefit from it.
Without this step, you may find your app among these apps that people abandon after only one use: Nearly 1 in 4 people abandon mobile apps after they try them once.

The typical reasons for a stalled app project include changes in requirements introduced halfway through the development process and inaccurate estimates.
Prototyping helps you sidestep these common pitfalls and get the app to customers faster. Moreover, we’ve seen clients stalling the process because they’re hesitant to make the investment to shell out thousands of dollars on development for an app that may or not make it.
With a prototype, you can launch your app for as low as $5,000, and once you have the results from user testing, you can make future investments accordingly.

Use prototypes as a leverage for venture capital

Do you remember products like Google Wave and Google Plus? And yet both products no longer exist.
Even Google can’t invest in apps that have close to zero traction. The days of “build it and they will come” are gone. Would we be using Wave and G+ today if Googlers had spent more time on rapid prototyping and actually testing the prototypes with the public? We’ll never know, but Slack and Facebook definitely spend a lot of time on rapid prototyping for any major update.
Getting investors’ attention in the crowded startup scene is becoming increasingly hard. The same is true about the corporate world, where you spend much energy to get a buy-in from all stakeholders. In this respect, an elevator pitch or a

boardroom meeting becomes so much more effective if you have an app prototype to show.
What’s more, you can back your app concept with actual usage data. Because showing investors that you know the target audience inside-out is one thing, and explaining how people are using the prototype and how you will monetize that is completely different.

A picture is worth a thousand words. Don’t bore investors, show them a prototype. - Invision App Blog, 2017

Zero in on the right developer

6. Zero in on the right developer
Since an app prototype is built using the universal language of design, it’s easy to understand. That’s why it’s so simple to collaborate with any app developers after you’ve spent some time on rapid prototyping. Engineers don’t need to assume anything to prepare an estimate: the app is right in front of them.
In a way, an app prototype levels the battlefield for all app developers. Everybody will be calculating the same scope, so a team will have to come up with an innovative approach to win your project. It’s a win-win for everybody.
Even as you start selecting an app development team, you can already judge on their proficiency by seeing if they’re comfortable working with the tools that made the clickthrough prototype possible in the first place. When a team asks for the prototype sources to add an idea they think will improve the app, that already speaks of their expertise.

Never underestimate having individuals with opposing experience and views on your team. Plus, it may turn out useful to listen to alternative views on the technology stack preferences from many versatile teams. An ideal app development team is often a mix of in-house design & development talent with hands-on experience in your industry.

You want rare individuals with a mix of experience in UX/UI Design who understand how the technology works, and have something unique to bring to the table.

Successful Apps Start Fast, then Grow with Their Users

A successful app never remains the same once it’s launched to the app stores. You will need to react to user feedback and support OS updates for the app to stay relevant. And that means going back to rapid prototyping.
Not being able to quickly respond to a market shift can kill your product. That’s exactly what happened to such once promising apps as Vine and YikYak. Vine did not pay attention to the shaping trend for longer videos, which companies like Instagram and Snapchat embraced. And YikYak didn’t set up tools to prevent app users from cyber bullying, which ultimately brought the app to an end. Even highly utilized apps today made major pivots during their growth.

To adapt, you have to listen. Provide a channel for feedback in your app so you can listen to customers. That way, customers won’t necessarily post negative reviews to the app store and instead submit their grievances through a customer support platform.

--

--

Shailesh K Gupta

UX Manager• Paytail • Lead UI/UX Designer• Writing about design • Creative thinker • Interaction Design • Prototyping