How to Do Prototyping in Design Thinking

Tobi Moyela

Agile Product Development

Close Banner

Free Template & Financial Spreadsheet

Create your SaaS business plan

Sign Up

You don’t want to skip creating a design thinking prototype during the design thinking process for your SaaS products. Skipping the prototype stage puts you at risk of building a product that fails to attract or satisfy your intended end users. Several SaaS startups find themselves in this situation, contributing to why only 40% of SaaS companies ever become profitable.

How do you build a design thinking prototype, and why does doing so increase your chances of launching a successful product? Below are answers to these questions and more, starting with a quick dive into what prototyping is.

What is prototyping in design thinking?

Design thinking is the product development stage where you and your team brainstorm your SaaS product's aesthetics, function, and usability. Part of the brainstorming process involves creating a mockup of your product. The mockup will provide a realistic representation of how your product will look and work. This mockup is what we call a prototype.

A design thinking prototype is an early iteration of your product – a preliminary or sample model. SaaS startups create prototype models to test and evaluate their ideas for a product. If end users and other stakeholders respond positively to a prototype, chances are the finished product will be successful.

How does prototyping fit into the design thinking process?

Multiple sources list no product-market fit or lack of a market as a leading reason most SaaS products fail. A SaaS company identifies and researches its target market or end users during its design thinking process.

Understanding the target user provides insights into their needs and problems. Once you identify a problem you can solve, you can create a product to deliver the solution. However, creating SaaS products can be expensive.

Before investing in creating a market-ready product, it is prudent to create a prototype to test-run your product idea and verify that it can deliver value. A prototype that cannot deliver value or get the desired response from target users is not ready for the market. Launching that iteration of your product as it is can tarnish your brand reputation and cause financial losses.

Below is a breakdown of the stages of prototyping and how each phase contributes to the design thinking process:

1. Define the problem

Market research will help you understand target user needs. Once you understand your target market’s needs, you can create a problem statement that clearly defines the problems you want to solve with your product. The listed problems provide a yardstick for measuring how well your product solves those problems to satisfy target users.

2. Ideate solutions

After identifying the needs of your target customers or intended end users, you can begin ideating solutions. The best solutions add value to a customer’s life within the shortest time. Quickly providing users with value speeds up customer acquisition and reduces the risk of churn.

3. Prototype

The next step is to create a prototype of the solution you identified to satisfy your target market. A prototype is a preliminary model of your solution or product. You can create multiple iterations during the prototype stage and test each creation to identify the best one. The best prototype is the one target users find the most appealing and easy to use to solve their problems.

Prototype types commonly used by SaaS companies include:

  • Low-fidelity prototypes: Low-fidelity prototypes are the first iteration of your product and typically have only the most basic features. Examples include simple and inexpensive to build prototypes like paper prototypes, digital wireframes, and UX design mockups or sketches. A product design team uses the prototype to test ideas before committing to building more detailed versions.

low fidelity prototypeSketch Prototype

  • High-fidelity prototypes: A high-fidelity prototype is a more functional and detailed preliminary model of your product. They simulate the look and performance of your final product and facilitate testing user experience, functionality, and advanced features.

Test

The next step in the prototype stage is to test the prototype. A comprehensive test will involve performing a UX audit to identify and improve underperforming aspects of your design thinking prototype.

You can also test by giving target users access to your prototype and collecting user feedback. The feedback will provide insights into how to optimize or upgrade the model.

Not skipping the testing stage of the design process ensures that your final product fits the user persona of target users. Repeat the testing process as many times as necessary to continue refining your prototype until it is market-ready.

5 best prototyping tools

Many SaaS startups skip prototyping because they consider it expensive and tedious. Fortunately, several affordable design thinking prototyping tools exist for simplifying the building and testing of prototypes. Top tools for building a design thinking prototype include:

1. Figma

design thinking prototype tool

Figma is a multifunctional web and app design tool. Since it offers everything you need to design, prototype, share, and collect user feedback, you can avoid the hassle of juggling multiple tools. Figma also has sophisticated collaboration features that simplify communicating and working with other teams.

Even better, Figma's intuitive interface makes it user-friendly enough for even beginner designers to use. In fact, you don’t need any coding skills to add or modify low, mid, or high-fidelity prototype designs. Lastly, Figma offers affordable monthly plans for large teams and a free forever plan.

2. Sketch

prototyping tool

Sketch is another user-friendly prototyping tool. You can use it to build low or mid-fidelity prototypes and share your work with teammates or clients. You can also launch prototypes to collect user feedback and use the insights to improve the product.

With Sketch, testing prototypes is hassle-free. You can test your app or web tool in the Mac and iOS app or web browser to fully understand how your product looks and works. On the downside, users can only create and edit Sketch documents on Mac systems.

3. Balsamiq

wireframe prototype

For many developers, Balsamiq Wireframes is the go-to tool for creating low-fidelity prototypes during the ideation phase. You can use the tool to create the first iterations of your user interface, website, app, or desktop software.

The tool is intuitive and fast, thanks to its drag-and-drop interface that you can understand at a glance. Collaboration is just as simple with features for inviting teammates to view designs. Also, since wireframes created with Balsamiq are interactive, you can use them for demos or run usability tests to gain user feedback. The tool is affordable for small teams, and MacOS and Windows users can use it.

4. Webflow

design thinking prototype tool

Web developers use Webflow to build website prototypes. You can create low and high-fidelity prototypes, but you need at least a basic understanding of HTML5 and CSS to make the most of this tool. Each prototype created with Webflow can function as a real website, allowing you to easily test mockups to see how they look and work in the real world.

5. InVision Studio

InVision is basically a digital whiteboard for creating low-fidelity prototypes in the form of sketches. You can draw out ideas and map out features. You can also draw user flows to indicate what users will experience when interacting with different elements within your proposed product.

However, the prototype will not be interactive since users cannot click on any elements. InVision is free, and users can collaborate on the app by drawing and adding notes or feedback.

6 tips for creating better prototypes

SaaS companies create several prototypes before reaching the final product. Despite creating and testing multiple prototypes before launching the finished product, some companies still end up with products that fail. Avoid such an outcome by applying these proven tips when iterating and testing a design thinking prototype:

1. Use the right design thinking method

Design thinking involves identifying customer needs and ideating a solution for the identified needs. The process typically requires continuously testing and refining prototypes with users until you create a functional and user-friendly solution that provides desired outcomes.

Since several design thinking methods are available, the right one typically varies between teams. Commonly used methods include:

  • Role-playing: It requires simulating real-life scenarios to understand user behavior and needs.

  • Rapid prototyping: The process involves quickly creating prototypes to test and refine ideas to improve the solution until it is market-ready.

  • Diverge-Converge: This method requires generating several ideas and narrowing them down to the best solution.

  • Brainstorming: It involves collaborating with design teams and stakeholders to generate ideas. The team will then pick the best idea and create a prototype to test.

Increase your chances of creating a successful product by selecting a design thinking method that fits your team, product idea, and target users.

2. Leverage user feedback

Customer feedback is a valuable source of insights that you can use to improve your product and services. By collecting user feedback, you can learn the features customers want to see in your product and the ones they don't want.

When you create a prototype, share it with your intended end users to discover if your ideas are on the right track. The insights provided by these users will help you avoid investing time and money in creating a product or adding features that nobody wants.

3. Use existing tools

Several tools are already available for creating design thinking prototypes, and some are free. Use these tools to simplify your prototype creation and testing process. Some tools even have templates for creating low-fidelity prototypes, helping you save time and effort.

4. Prioritize user experience

The most useful product in the world is worthless if customers have trouble using it. Poor user experience leads to customer frustration, decreased satisfaction, and increased likelihood of churn.

Avoid losing customers by making your product as user-friendly as possible. Customers should have no trouble understanding how to navigate and use your product to experience value at a glance. Put yourself in your user's shoes and deliver an intuitive product that anyone can use without assistance.

5. Keep testing

Prototyping allows you to test and iterate your product idea to identify its flaws. As you continue testing and iterating, you will discover new ways to improve your product and make it more valuable to end users. You will also gain insights into security features to add to keep users safe.

6. Consider aesthetics

While functionality is important, do not sacrifice aesthetics for usability. 75% of users use a website’s aesthetics to judge its credibility. If your app, website, or web tool has an unattractive, cluttered, or outdated-looking interface, users will find it unappealing, leading to churn.

Even though it’s a mockup, make the interface of a design thinking prototype as visually appealing as possible. Convincing stakeholders or luring users to engage with your prototype is much easier if it is appealing at a glance.

Leave prototyping to the result-oriented experts

At DevSquad, we are a boutique product development team that helps SaaS businesses strategize, design, validate, and launch products. Our services include design thinking prototype creation to validate product ideas. We start with low-fidelity prototypes and get feedback from stakeholders before creating a high-fidelity prototype.

Then, we share the high-fidelity prototype with the target users. The feedback from target users helps us verify if the prototype fits user needs and delivers satisfactory value. If it does, we can proceed with developing and launching version one of your product.

Click here to learn more about how DevSquad can help you launch a successful SaaS product that trumps the competition.

Close Banner

Building a product?

Discover the DevSquad Difference

Learn More