Ditch MVPs, adopt minimum viable prototypes (MVPr)

Minimum viable prototypes for dummies.

The pursuit of perfection is a subtle trap that often leads designers into an endless loop of iteration and review. This is especially true in the world of digital products, where every interaction and graphic element can become an object of design obsession.

But, when we step back and observe the interdisciplinary nature of digital product design, it’s easy to see how designers fall into the perfection trap.

Think of all the people and roles that are involved in the design of a single digital product:

In one way or another, each of these intersects. For example, a product’s user interface can’t possibly be successful if its user experience isn’t considered. With interconnectedness comes the pressure to understand how design decisions impact one another: “If we do X, how will that affect Y and Z?”

This type of strategic forecasting can be valuable, but it can also cause the design process to stagnate and become stuck in the dreaded perfection loop: “We have to get X right before we can execute Y and Z.”

So, what’s the alternative? Is there a way to quickly create, launch, test, and improve digital products based on real-world metrics and insights taken from actual people?

In this guide, we’ll address these questions through the lens of minimum viable prototypes and equip designers with an astoundingly simple process for building, testing, and refining digital products.

This illustration doesn’t have the realistic detail of a satellite image, but it has enough visual information to make it easily identifiable as our home planet. In the same way, minimum viable prototypes provide users with “just enough” functionality to decide whether or not a product concept is worthwhile.

Simulate Launch with a Minimum Viable Prototype

Nobody knows anything…… Not one person in the entire motion picture field knows for a certainty what’s going to work. Every time out it’s a guess and, if you’re lucky, an educated one. — William Goldman, Academy Award Winning Screenwriter

The earliest decisions of the digital product design process are, at best, based on guesswork. Until a product is in the hands of actual users, everything is theoretical. On the other hand, launching a product before it’s ready can damage its reputation (a costly mistake).

What if there was a way to simulate launch and determine a product’s viability well before any major design efforts begin?

This is the value of the minimum viable prototype (MVPr), a product design approach that requires substantially less time and money than the more familiar “minimum viable product.”

Here’s an overview of the minimum viable prototype (MVPr) design process:

Wait! Isn’t that the process everyone uses?

Yes, and we will see that by relying on the bare essentials of the steps above we can successfully…

Step by Step: How to Build an MVPr

1.Discovery: Start Making Decisions

A great way to start the discovery process is by searching websites, blogs, and apps that are similar to your idea. Learn about their histories, their target markets, how they operate, etc. If you find that none of the relevant competitors do what your prototype does, keep moving forward.

This step doesn’t require any expertise. The secret is doing — advancing from intent to action.

Pay special attention to your competitors’ strengths and weaknesses. How can you use what they’ve already accomplished (or failed to accomplish) to make your prototype stronger?

After 1–2 hours of research, you should be able to pinpoint your most important competitors and learn key aspects of each.

This competitor summary example from the travel industry highlights the main purpose of the discovery phase: Uncover the opportunities and challenges created by the strengths and weaknesses of rival companies.

2. Research: Define Your Users

Who’s your target user, and why should they care about your product? Understanding this is crucial, but we must begin with calculated assumptions. It’s best to start from a strongly opinionated vision. Don’t second guess or attempt to make “something for everyone.” We don’t want a watered-down design.

Instead, take a closer look at the competitor sites found during the discovery phase and allow common sense to paint a portrait of your potential users.

Here are some practical areas of investigation that are easily accessible on the web:

Valuable insights can be gained from each of these avenues without significant financial investment. This is especially important for small design teams working on shoestring budgets. Big brands spend significant cash on research, but small teams and individual freelancers have to find ways to be more resourceful.

User profiles can be general or quite granular. Early in the MVPr process, it’s important to uncover as much as you can as quickly as you can.

3. Information Architecture: Structure Your Prototype

How will the prototype work, and what is the most important information to focus on?

The easiest way to begin answering this is to analyze top-notch sites that are similar to the prototype you’re building. The overall look and experience of the site you choose to reference should be outstanding.

Start by breaking the site into pieces. What are all the relevant pages, and how are they structured visually? Don’t be afraid to reverse wireframe the site and then recreate it with your own information, colors, images, etc.

Why go about it this way? Your site will likely function in a similar way to competitor sites — you just have different goals in mind. No need to invent a complex system if users respond well to an established experience.

*Pro Tip: When studying a site’s information architecture, a helpful technique is to take screenshots and make them grayscale so that you aren’t distracted by the impact of color (which can be quite persuasive).

A great way to cut through the noise and focus on what’s important is to convert product screenshots into grayscale.

After this, take advantage of the online resources that allow designers to rapidly go from zero to interactive prototypes. There are tons of user interface kits, HTML templates, WordPress themes, and so on. Don’t be afraid to modify them to fit your prototype, and don’t worry about pixel perfection or beautiful code. At this stage, no one cares. They care whether or not your product is useful.

Here’s how this works using a free UI kit:

The UI kit you need will depend on the type of prototype you’re designing. In this case, using a template focused on visual content allows for quick and painless reorganization.

What did we accomplish in the image above?

In less than an hour, we have a visual foundation on which to further develop our prototype.

4. Visual Design: Repurpose Free UI Resources

The visual look and feel of your prototype can’t be separated from the way it works. It’s not just about graphics. Impactful visual design tells a story and provides an experience with real value.

Here, visual consistency is key because it helps users become familiar with a product and navigate more efficiently. To achieve this kind of consistency early in your prototype’s development, it’s smart to repurpose free UI resources.

Working this way, you won’t have to spend hours developing a cohesive design system. Typography, button styles, iconography, and all the other important UI components are taken care of.

Instead of spending time designing a consistent user interface across multiple screens, take advantage of a UI kit and focus on creating content. In this example, we rapidly went from wireframe to high-fidelity mockup.

5. Launch: To Code or Not to Code?

It’s time to share your prototype with the world. Luckily, it’s easier than ever to transform mockups into dynamic prototypes. Thanks to a host of intuitive tools, you don’t even need to know how to code — but should you learn?

The No-code MVPr

When you’re finished with the visual design, embed the prototype into a landing page so that visitors can interact with it and provide general feedback about your idea. At this point in the MVPr design process, there are several ways to create a no-code prototype. Here are your options:

Basic Prototypes

Rich Media Prototypes

100% Realistic Prototypes

Here’s a helpful chart that breaks down the strengths and weaknesses of several design programs that can be used to create interactive prototypes with speed and precision. (Source: Cooper)

The Coded MVPr

Code can be an amazing ally. Without a doubt, it’s the best way to build your product. The major drawback is that you need to know how to write code to experience the benefits of advanced customization. Without a proper knowledge base, choosing to experiment with code will slow you down.

There are plenty of code starter kits to help get the ball rolling. For instance, the UI kit we introduced above has its own HTML version available for download:

Now UI Kit.
Readymag is an online design tool that helps creative professionals easily create microsites, portfolios, and more.
Webflow allows designers to build responsive websites in-browser.
ThemeForest provides thousands of customizable themes and templates.

6. Test: Leverage Ad Insights

The secret sauce for testing your prototype lies in tools that allow you to gain the most insight with the least amount of effort while still providing value. All you need is a few dollars and some patient problem-solving.

A practical first step toward gauging interest in your product is to create an ad and target the people found during the research phase. Depending on your audience and the type of product you’re designing, you can run ads on Google, LinkedIn, Instagram, or Twitter. For business-to-consumer products, Facebook is recommended.

*Pro Tip: AdEspresso is a convenient place to run hundreds of versions of your social ads at the same time while collecting useful, comparative analytics.

Run ads and you’ll learn two things:

Once you confirm that your target audience is interested in engaging with your ads, you’ll need to create value for your early users. Here’s how:

Use this strategy and you’ll gain:

The first time you get real feedback, your product is live. Through this cycle of delivering value, analyzing behavior, and iterating solutions, you’ll learn what’s working and what isn’t, and you’ll get closer to a product that people actually want to use.

Launch and Learn with Boldness

The ultimate aim of the minimum viable prototype is this: Move from educated design guesses to real, actionable feedback with speed and confidence.

This is a process that embraces uncertainty and missteps as opportunities for improvement. Above all, it rewards action. Good design requires bold decision making and a willingness to move forward in the face of imperfection.

So don’t get bogged down by the pursuit of perfection, and try not to compare yourself with mega brands and their massive resources. Keep taking steps forward, and soon you’ll find yourself with a significantly polished product that people are thrilled to use.

First published on Toptal blog. If you want to tell me how wrong I am, you can always find me on Twitter.

The Startup

Get smarter at building your thing. Join The Startup’s +751K followers.