:quality(90))
Table of Contents
In this part of my product design series about Proof of Concept, prototype, and Minimum Viable Product, I’m discussing the former concept which can be very useful in deciding how your product should work in terms of navigation and designs.
Let’s dive in.
Prototype: Definition
A prototype can be described as a model of product development focused on answering the “how” questions:
- How will an application look?
- How will it be made?
- How will the users interact with it?
A prototype answers these questions through wireframes, user flows, and mockups. Prototypes help founders and stakeholders who invested in a project see a more detailed version of a product compared to the bare-bones one provided by a POC.
Developing a prototype is a collective effort, which relies heavily on team communication—engineers, designers, and stakeholders should all participate when building a prototype. The founder needs to convey the product idea in a way that facilitates the introduction of all crucial elements into the prototype—when the product goes into development, it’ll be easier to accurately reflect the original assumption
Crafting a prototype also helps founders refine the idea behind their product. The more visual the prototype, the easier it is to introduce important changes and dismiss redundant elements. Detailed stakeholder feedback also comes in handy at this stage of development.
A prototype can have many forms:
- Hand-drawn
- Interactive (low-fidelity)
- Interactive (high-fidelity)
Choosing the form appropriate for your project essentially boils down to what exactly you’d like to test and showcase. Each form of a prototype offers a different level of graphical resemblance to the final product. Some forms may also include some rudimentary functionalities.
Interactive prototypes can be created using popular tools such as Figma or Invision.
Benefits of Prototyping
There are multiple benefits to building a prototype of your product that will help you test an early version of it with your potential users and get feedback. Other advantages of prototyping include:
- Saving time and money that you would have to spend on developing a full version of your product before hearing back from its users
- Attracting investors early in your product development journey, so you get additional funds to work on your solution
- Team alignment with all of its team members centered around the same objective and a roadmap
- Spotting gaps in your design and development process early on and being able to fix them right away.
Prototype Example
Here’s an example of a high-fidelity mobile app prototype built using Figma. Even though the prototype breathes interactivity, not even a line of code was involved in making it.
High-fidelity interactive prototypes let you test the user experience without spending on developers to write the code. Source: Figma
The above prototype can be shipped to stakeholders and a small pool of customers for potential feedback. It’s also useful in gauging potential market demand.
Why and When to Build a Prototype?
The main purpose of a prototype is to gather important feedback that will help you locate any friction points before you move to the more cost-intensive part of product development. Another purpose of building a prototype is to facilitate future development by defining user flows and designs early on.
According to our Business Analyst, Roksana Bolek, developing a prototype is a must when it comes to app development:
I cannot think of any scenario in which building an application prototype would not be beneficial. Prototypes are faster and cheaper to build, very often a clickable prototype can be prepared by the Designer without even starting the development process. Similarly to POC, prototypes allow you to test some ideas in terms of the users, their expectations, and the demand for a given application.
She also adds that: ‘changes in the functionalities are easier to implement on the design than in the code and once the application is fully tested by the users, the requirements and user paths become much more stable, reducing the number of multiple change requests later on and making the development process much smoother and faster.
Prototypes are ideal for finding out whether your users will be able to easily understand the core features of the product and its navigation patterns.
High-fidelity interactive prototypes can be used for initial customer demand probing and therefore pave the way for MVP development. Assessing market demand before making a significant financial investment is one of the most important ingredients in building a startup:
The percentage of startups that failed due to the lack of market need is staggering. Source: CB Insights
Building a Prototype in 4 Steps
There’s no single way to build a prototype as it all depends on your resources and your product, but here’s a prototype building process you could start with. It also includes the types of prototypes I’ve mentioned above.
Paper prototyping
Paper prototyping includes creating hand-drawn sketches of screens of the product you’re trying to develop. These screens can then be used to create digital versions of them in the next stages of the prototyping process. You can then use these paper screens to explore potential user flows through an app or website and draw initial information architecture.
Low-fidelity digital prototyping
This stage or type of prototyping consists of creating clickable versions of the paper screens that will further explore the logic and user flows. As with the previous phase, you don’t need to focus on the details of the design just yet as you will be able to do it in the next step.
High-fidelity digital prototyping
As mentioned, in the high-fidelity digital prototyping phase, you can finally move into adding more specific elements to your designs, especially considering the feedback from your stakeholders and potential users you’ve collected in the previous steps. Here’s where your screens start to look as close as possible to the actual designs. At this stage, you should have a solid understanding of what you still need to test and what is ready for development. High-fidelity prototypes are also interactive in a realistic way, with most of your planned content included in them.
Code prototyping
Code prototyping is the most time-consuming part of the prototype development process, especially if you’re a solopreneur looking for ways to kick-start your project. If you’re an experienced product developer working without any design support, you may feel tempted to move straight to coding. I don’t recommend it though - as stated above, it takes a lot of hours to develop a working code prototype, so if there are any changes or any feedback from your users and stakeholders that you need to account for, you may be starting from scratch.
Wireframe vs. Prototype
While a prototype is an early version of a product with basic functionalities and a feel of what the end application or website will look like, a wireframe is a simple schematic showing the structure and logic of your product. Both of these concepts are usual for communicating and collecting feedback from stakeholders and your target users, but they may be used at different stages of the design process.
Proof of Concept vs. Prototype
Although Proof of Concept and prototype may sound similar in their nature, it’s far from the truth. A POC is created when you want to check the feasibility of your potential product, so if it can be developed. A prototype focuses on the how of said product, so how it will work. It's a functional and tangible manifestation of a Proof of Concept that can be used at the beginning of the development process to test with stakeholders and your target users.
Over To You
While it may be time-consuming to go through each stage of the prototyping process, I cannot recommend it enough. Collecting valuable feedback and regularly showing your stakeholders what the final product may look like will pay off in the long run.
If you need help with prototyping, contact our teams via our Contact page or take a look at our free Product Specification template:
:quality(90))