Phases

What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

7 min
App Prototyping - 3 Types to Rapidly Validate Your Startup Idea
Subscribe

App Prototyping - 3 Types to Rapidly Validate Your Startup Idea

Andrew Verboncouer
Partner & CEO

What are prototypes?

Prototypes are an essential tool to help you uncover the truth behind the potential of ideas and test if your assumptions are directionally correct.

The prototyping process is a powerful way to prevent yourself from wasting your investment on an idea that nobody wants.

We leverage the power of prototypes with Fortune 500 clients, early-stage startups with solo founders, and everything in between. It's also important to note that using prototypes isn't reserved for the start of a new business or product, they're something you can put into practice throughout all phases of business.

This video is from a longer presentation, The Art of the Prototype at TitletownTech

Using prototypes

Your goals are to represent the value you aim to provide, give someone something tangible to respond to, and ultimately act upon.

With prototypes and value propositions, we're giving someone the opportunity to walk through a door. Whether or not they walk through and take you up on your offer is irrelevant. The value is all on the speed of learning they give you and the ability to dig deeper into their motivations, situational contexts, and perspective.

What are the benefits of prototyping?

  • It's relatively inexpensive to do
  • Gain a better understanding of the problem
  • Learn about how your solution idea is perceived in the market
  • Increase your chance of getting investment
  • Prevent yourself from wasting your investment on the wrong idea or features
  • Have more clarity on technical needs and what to build first
  • Reduce your risk for failure
  • Get commitment from customers

Will someone pay for this product?

Real enough to test

As you think about prototypes and the examples below, you'll want to think about the time investment to create them, and the realness necessary to learn based on where you are in your journey.

Remember that the end goal is getting to a point where the prototype is real enough to test.

graph showing where the goldilocks zone is for prototyping

Real enough to test is also referred to as the Goldilocks Zone by Jake Knapp, author and designer behind Google Ventures design sprints. You’re trying to get it just right. You’re trying to spend the appropriate amount of time to get the appropriate amount of learning.

When you use different prototyping methods, you can get to the real-enough-to-test in days and weeks rather than months.

The functional method is about trying to learn and figure out how to suspend people's belief, to convince them the idea really exists. And it’s not about smoke in mirrors - it's about helping them understand that this will be a thing in the future. And then ask them if the product is something they’re looking for, or if it solves their problem.

Questions to help you decide fidelity and realness

  • Is my customer a consumer (b2c) or a business (b2b)?
  • How real does it feel to somebody that you're trying to sell to?
  • How real does it feel to somebody you're having a conversation with?

What are you trying to learn?

  • Learning if customers believe they have a problem and that your solution/angle might be a solution is one thing, but trying to sell a customer based on prototypes is a different proposition.
  • The former requires much less fidelity and could be sketches, the other, depending on your customer, will likely need to be much higher fidelity to create a belief that what you have is real.

Gathering prototype feedback

illustration of the difference between what people say and what they actually do

It’s important to utilize these tools as you talk with users, because there's four different conversations that happen when you're talking about your offer and value:

1. What you said
2. What you thought you said
3. What they heard
4. What they thought they heard

Every time you have a conversation with a person, you're creating a mental model in their head while they're asking, “Is this something familiar? Can I latch it to the experience that I have or an existing application that I've used?”

These tools help you push that forward to ensure you're speaking the same language about the idea or the value proposition.

Types of prototypes

Below we will cover three types of prototypes that you can use to test your idea or business model:

  1. Static
  2. Functional (Hi-Fidelity - Feels real, but isn't an app)
  3. Working (No-Code Tools)

Static prototype

static prototype example sketches and screens

Static prototypes are the fastest way to get feedback on your idea. It simply helps you communicate features and the value it provides without any functional interaction. It may be a simple slide deck on a computer or full-screen images on a phone.

The first goal when prototyping is to get your ideas into a static prototype that can be sketched and design out the main features and value propositions. Over time you can go into a higher fidelity with a finished product.

Benefits of static prototypes

Tools for static prototypes

You don't need to be an artist to draw prototypes and communicate your idea. There are great tools available to help you sketch quick prototypes to begin the validation process.

POP by Marvel App

POP is a mobile app prototyping tool that helps you transform your pen and paper ideas into an interactive iPhone or Android prototype.

example of pop mobile app prototype

Learn More About POP Prototypes

Whimsical prototypes

Creating prototypes in Whimsical is simple and fast way to get your ideas into a clean design without worrying about aesthetic. Whimsical offers wireframing templates to get you started.

screenshot of whimsical mobile app wireframe

Learn More About Whimsical Prototypes

Figma Prototypes - Templates in Figma Community

Figma is a free design tool you can use right in your web browser and easily share design ideas with potential customers. The Figma Community is a great place to get templates and mockups so you can get a jumpstart on validating your idea.

figma community screenshot

Learn More About Figma Prototypes and Templates

Our recommendation for mobile app prototypes

We recommended leveraging POP for sketching mobile prototypes. You can upload photos of web-based app sketches and connect concepts together to create a user flow. This type of approach allows for quick iteration cycles at low cost.

With static prototypes you are not tied to the fidelity or design since you didn't invest much time or resources into it.

Building a functional prototype

animation of functional prototype in figma

As you can see, this example is more tangible. The user experience becomes more "realistic" than a static prototype. If you have this on a phone, you'd be able to get this in front of a user - where they could interact, and you could observe their behavior.

You could also ask questions about the types of messaging and understand where the gaps are. This may also be known as usability testing or user research in regards to what language you're actually using.

Benefits of functional prototypes

  • Use free tools
  • Could be a website/landing page
  • Could be an app
  • Be resourceful - find UI Kits and adapt
  • Some barrier/learning curve

clickable prototype graph in the goldilocks zone

Tools for functional prototypes

We recommend using these prototyping tools below. Many of them are free to get started. You could make a website, landing page, or simple app experience. Use these tools to create value that you can share with customers to get the feedback you need quickly.

Webflow

Build landing pages or test ideas quickly. Webflow translates your design into clean, semantic code that’s ready to publish to the web, or hand off to developers.

example of webflow tool for prototyping

Learn More About Webflow

Bubble

Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, including all the features you need to build a site like Facebook or Airbnb.

examples of bubble apps in screenshot

Learn More About Bubble

Bravo Studio

A native app builder that turns your Figma app prototype into native iOS and Android app without writing code.

bravo studio app examples

Learn More About Bravo Studio

Figma

Figma is a great tool for both static and functional prototypes. We find it most valuable to test the user experience before dealing with inputs and outputs of data in a no-code tool or custom build.

Learn More About Figma

A learning curve as fidelity and functionality increases

There can be a bit of a barrier or learning curve for some of these tools, but with a simple google search, you can find tutorials and lessons on getting started or troubleshooting an issue.

Be resourceful with kits and templates

If you can find a UI kit, website template, or app template to get started, you can test ideas without designing or even hiring a designer to validate your idea.

Shipwright - Free Figma UI Kit and Design System

Figma Community

Webflow Templates

Bubble Templates

Bravo Studio Templates

No-Code and working prototypes

A working prototype can be described as a proof of concept where you can deliver on your offering's value proposition. It’s also likely to take significantly more work than using some of the image-based tools mentioned above.

Here is what the process can be like using a no-code tool like Bravo Studio:

how to get started with bravo to create app prototype

It's something you could get in front of people, that you could sell, that you could manually do some of the business or admin functions behind the scenes. This prototype is dynamic and would bring personalized content to the user and respond to inputs and actions.

management tool example in bubble
Think Confluent - Management Tool Created in Bubble

Benefits of no-code and working prototypes

  • Test perception
  • Test user-generated content/profiles
  • Test onboarding
  • Measure behavior
  • Build engagement funnels

nocode prototype graph with goldilocks zone

Tools for no-code prototypes

When you have a working prototype, you'll want to test perception, user generated content, profiles, and onboarding. This is where you can start to measure behavior and interactions more closely because you are near the final product. It also allows you to start building an engagement funnel.

You can use many of the functional prototype tools mentioned before to create more advanced interactions and collect information. Below are our favorite tools for creating working prototypes.

Glide

Glide makes designing your app idea easy and fun and translates your ideas in google sheets into intuitive and beautiful apps.

glide no code tool screenshot

Learn More About Glide

Working prototype tools already mentioned

Webflow

Bubble

Bravo Studio

Analyzing feedback and next steps

As you're using your prototype, you'll likely hear things that you haven't thought of nor considered, so you'll want to approach it as a living thing that changes over time.

Generally speaking, there a few buckets that your feedback from customers and investors will fall into:

  • What types of perception do your customers have of your offering, and how you're proposing to solve it?
  • What do specific customers like or dislike about the way you're presenting your solution?
  • What comparisons do your potential customers make to existing substitutes/competitors?
  • What sort of pricing would be expected based on what customers relate your product to?
  • How would they describe the value you could offer to a friend or colleague?
  • Will they recommend anyone else who is experiencing this same problem?

As you continue to get feedback and use your prototypes to learn, you'll want to keep asking yourself key questions about the customers you're serving and the problem you're solving.

  • Is this the person who has the problem?
  • If I need to focus on one customer segment more, what's the same/different about their needs, motivations, and behavior?
  • Is this the right problem I should be solving or have I uncovered new problems that I wasn't aware of?
  • Is the way I'm proposing to solve it the best method based on my time and resources

More resources on prototyping and customer research

Understanding Your Customers When You Don't Have Any Yet

Wireframe Your Product in Whimsical

Prototype and Validate Your Product with Figma

You Don't Need Developers to Launch Your Startup

Learning Loop - A Framework for New Product Innovation

From Idea to Venture Launch - Prototypes and Feedback Loops

Enjoyed this post?

Other related posts

See all the ways we can help you grow through design, development, marketing, and more.

View All

Listen and learn from anywhere

Listen and learn from anywhere

Listen and learn from anywhere

The Manifest

Receive the latest articles, resources, events, and more!