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.

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.

What are the benefits of prototyping?

Here are a few benefits of prototyping:

  • Evaluating technical feasibility: Creating a working model gives you the power to assess an idea and product features that might pose difficulties during implementation. Prototyping can help you determine unprecedented technical or physical constraints.
  • Presenting ideas to customers: Before the actual launch of your products, you can present working models of a future product to your customers. Also, it becomes easier to devise your marketing strategies because you already have a working model.
  • Allowing iterations at lower cost: When a customer provides feedback after using a prototype, you can make changes until you meet the customer’s requirement. Changing a product in manufacturing is costly compared to making alterations in a prototype.
  • Providing focused feedback: Providing a prototype to customers can help companies get focused feedback on the product’s desired qualities. This helps a business understand the customer’s needs, requirements and expectations.
  • Simulating the future products: A prototype can help you simulate the future products. Also, with a prototype, companies can discover flaws in their design and create products that attract potential investors.

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, Bobby Nguyen, 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”.

He 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

Types of prototyping

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.

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.

9 Prototyping Examples

Here are some widely used prototyping examples:

Diagrams and sketches

Diagrams and sketches are the most basic forms of prototyping because they require minimal effort and don’t require artistic drawing or sketching skills. Start by using sketches to conceptualise and build a new product. Using paper, you can draw the product’s interface and even the front-end design of an application or product. This paper prototype is ideal for conceptualising and designing a new product or application.

Storyboards

Storyboards are an excellent way of telling stories and guiding customers through a seamless user experience. It is an iterative and interactive design method that uses a series of drawings, sketches and pictures to show the solution to a user’s problem. Drawing a user’s experience can help you understand their problems. Also, a designer uses a storyboard during the initial prototyping stage to collect feedback during the early design process.

3D printing or rapid models

3D printing and rapid models can allow a designer to create a working and realistic model of a product using printing machines and computers. This prototype allows a business to move from the design to production phase quicker because they can use 3D models to identify errors and areas requiring adjustments. Also, you can change a 3D printed model digitally within a few minutes.

Wireframes

Wireframes work as the digital layout or diagram of a product. You can use a wireframe to create prototypes of websites, digital tools and software. A wireframe is a flowchart of a software or website that shows all the software applications or website pages and how they interconnect. It gives developers and designers a general idea of what a website looks like and helps you understand the core functionalities. From copywriters to developers, anyone can use a wireframe to navigate the structure and placement of different content.

Feasibility prototypes

A designer or a business might add a feasibility working model to test specific features that you add later in the product development phase. After creating an initial prototype, a designer can augment design changes. You can use this prototype for both physical and digital models. When designers want to add an essential product or website feature, they use this prototype to test and adopt a new idea.

Video prototypes

A business uses a video prototype to present a product in animated videos or graphic simulations that explain the concept of a project. Video prototyping can show new and speculative designs, ideas and products to potential customers. Showing a video gives you an idea about how your customers might perceive a concept that you may find difficult to prototype with limited resources.

Role-playing prototypes

A role-playing or experiential prototype is a simulation technique that helps in elevating the user experience of a product or service. Certain designs can benefit from visualisation techniques like virtual or augmented reality. For instance, when testing the initial design of a circus or new theme park, you can walk the users through the park using virtual and augmented reality.

Horizontal prototypes

Companies use a horizontal prototype to understand the human interface of a project. This prototype displays windows, menus and screens on a computer to understand how users interact with a product or website. A horizontal prototype displays the product’s user interface and provides a broader view of the entire product.

Vertical prototypes

A vertical prototype is another type of technical prototype that adds details about the functions of a particular business process. Vertical prototypes expand on certain elements of a horizontal prototype and explain the inner workings of sub-systems within the overall interface. Companies use the vertical prototype in the later design stages to elaborate on specific features or functions of a product or website. Also, a vertical prototype tests essential functions of a software or application before it moves to another design process.

An Prototyping Example using Figma

Here’s an example of a high-fidelity prototype of a mobile app 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.

Tips for creating and using prototypes

Here are a few tips for creating and using a prototype:

  • Know the prototyping conditions: When developing a prototype, it is essential to know how a model might work outside of the testing conditions in a controlled environment.
  • Change potential design flaws: While creating a prototype, focus on rectifying errors and moving back to an earlier design if you encounter a design flaw. You can either change the existing one or create a new prototype free from issues.
  • Ensure design safety: Prototypes are an excellent way for ensuring the safety of a design. For digital products, it might mean protecting customers and the business against hackers and cybercriminals.
  • Build the prototype with your team: Focus on involving your team members from the beginning. Your team members can spot different areas of improvement and work together to find a solution.
  • Focus on user flow and scenarios: When crafting a prototype, it’s important to emphasise usability and consider the main purpose of the product. Create a working model that shows the key idea behind the design.
  • Prototype what you need: Avoid building a perfect working model because it might postpone the development of the actual product. So, focus on creating a prototype of what is necessary and what you require.

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