App Prototyping - 3 Types to Rapidly Validate Your Startup Idea

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.

‍

‍

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

‍

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 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

• Anyone can draw
• Leverage POP for sketched mobile prototypes
• Upload photos of web-based app sketches and connect the concepts together for flow
• Use Whimsical’s wireframing tools

‍

‍

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.

‍

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.

‍

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.

‍

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

‍

‍

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

‍

‍

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.

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.

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.

‍

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:

‍

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.

‍

‍

Benefits of no-code and working prototypes

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

‍

‍

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.

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

‍

Free downloads from Headway

Figma UI Kit and Design System - Shipwright

Customer Journey Maps & User Flows - FigJam Template

‍