App Prototyping - 3 Types to Rapidly Validate Your Startup Idea
Sell your product idea before you launch. Learn the three types of prototyping tools you can use to quickly validate your app ideas with customers.
February 18, 2021
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.
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:
Functional (Hi-Fidelity - Feels real, but isn't an app)
Working (No-Code Tools)
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.
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.
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.
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.
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 user-generated content/profiles
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 makes designing your app idea easy and fun and translates your ideas in google sheets into intuitive and beautiful apps.