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
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.
Will someone pay for this product?
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.
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.
Below we will cover three types of prototypes that you can use to test your idea or business model:
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.
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 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
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 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
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.
Download our free guide to begin implementing feedback loops in your organization.
By filling out this form, you agree to receive marketing emails from Headway.
In this free video series, learn how the best startup growth teams overcome common challenges and make impact.
In this free video series, learn how the best startup growth teams overcome common challenges and make impact.
In this free video series, learn proven tactics that will impact real business growth.
By filling out this form, you agree to receive marketing emails from Headway.
Dive deeper into the MoSCoW process to be more effective with your team.
By filling out this form, you agree to receive marketing emails from Headway.
In this free video series, learn the common mistakes we see and give yourself a greater chance for success.
By filling out this form, you agree to receive marketing emails from Headway.
Everything you need for a killer DIY audit on your product.
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.
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.
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.
A native app builder that turns your Figma app prototype into native iOS and Android app without writing code.
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.
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.
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
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.
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.
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:
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.
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
Figma UI Kit and Design System - Shipwright
Customer Journey Maps & User Flows - FigJam Template
See all the ways we can help you grow through design, development, marketing, and more.
Level up your skills and develop a startup mindset.
Stay up to date with the latest content from the Headway team.