We're making moves! In the previous sections, we've explored the following stages of the design thinking process Empathize, Define, and Ideate. 

1. In the Empathize mode, we're trying to understand our customers and their context.
2. In the Define mode, we're formulating a meaningful and actionable problem statement.
3. In the Ideate mode, we're collaborating to generate novel, and unconventional ideas to solve our design challenge.

Again it is needful to say that the design thinking process is not always linear as multiple stages may overlap. Now we're ready to dive into the penultimate stage i.e., Prototyping. 

What is a Prototype?

A prototype is a quick, simple, and scaled-down version of a product, which is constructed to evaluate a design concept or process before actually investing too many resources into product development. 

“They slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such as becoming too complex too early and sticking with a weak idea for too long.” 

— Tim Brown, CEO & President of IDEO

In addition, prototypes have varying degrees of fidelity to demonstrate tangible design concepts and evaluate them with customers.  

Why Prototyping is Important?

With the deployment of prototypes, you'll obtain the following. 

1.  See a manifestation of your ideas in realtime.
2. Evaluate whether your design concepts work as intended.
3. Direct insights into how your customers experience and feel about your proposed solutions. Furthermore, you'll understand what your customers think about your product in terms of usability and relevance. You'll also gain early insights into how to improve their experience. It's an excellent tool for problem-solving and ideation. Wouldn't you agree?
4.  Understand how they interact with and value your designs, which ultimately helps to design for a better experience and improve the quality of the interaction.
5. You'll also gain a deep and rich understanding of how the product/service fits and matches your customers' needs in the real-world.
6. It provides an opportunity to inspire your design team through tangible design solutions and to have a directed conversation with your customers.
7. The insights gathered will be helpful to prompt redesign and innovation of the final product.

Prototyping is iterative so you can quickly revisit, adjust, and fine-tune your design concepts, and turn them into ideal market solutions. 

Types of Prototypes

There exist a plethora of prototyping techniques to help you to bring your design ideas to life. Nick Babich, from Adobe, asserts in his article, that prototypes can vary in terms of their fidelity. The notion of fidelity and its constituents are further explained below. 

Note well: If you're designing a physical device, then 3D printing can be ideal to rapidly generate a tangible version of your design concept and evaluate it with your customers.

Fidelity - This refers to how closely the prototype matches the look and feel of the final product. In essence, it conveys the level of detail and practicality of the product. Furthermore, fidelity can vary in terms of visual design, form, interactivity, and content among others. We'll explore these in a bit more detail later on. We'll now discuss low-fidelity and high-fidelity prototypes.

Low-Fidelity Prototypes 

Low-fidelity prototypes are usually deployed at the early stage of the prototyping process. They are ideal to translate your design ideas into tangible and testable artifacts. They are in essence, a rudimentary characterization of your design concept. With low-fidelity prototyping, you're more concerned with testing the functionality of your idea rather than having a polished look of your design concept. Low-fidelity prototypes are quick, easy, inexpensive, collaborative, and require minimal skills to design. 

In terms of its visual design, content, interactivity: you'll keep them to a minimum, only presenting the basic -shapes and -elements of the visual hierarchy. Only the relevant aspects of the content are displayed in these prototypes. Interactivity is also limited as these prototypes do not convey complex animations or transitions. 

Types of Low-fidelity Prototypes 

Popular low-fidelity prototyping techniques include the following.

• Paper prototyping - With this technique, you can simply design a mock-up of the user interface (UI) of your digital product without any elaborate software. All you'll need is a pen and paper. Then you can sketch different screens showcasing the product's UI. You can also simulate the interactivity by having one person move the screens around/mimic complex interactions based on the user's choice of navigating the prototype. Paper prototyping is inexpensive, easily revised, rapid, and helps the design team to detect and identify complex problems with the designs. Although they can be useful, paper prototypes are unsuitable to demonstrate visually complex or highly interactive digital products.

• Clickable WireFrames - A wireframe is a schematic representation of the pages or screens of a digital product. With clickable wireframes, designers can demonstrate the user flow of a digital product as well as arrange the visual (e.g., layout, icons, data visualizations, text, photos) and navigational elements (e.g., menu, buttons, scrolling, or swiping up and down) of a digital product without actual coding.  Designers leverage tools like Keynote or PowerPointor or Sketch to create clickable wireframes. Please see the example below.

Clickable wireframes are great to convey your design ideas and can serve as an excellent reference point for devising your design requirements. While they do have their advantages over paper prototypes, clickable wireframes are still limited in terms of evaluating the actual usability of the digital product. In fact, their static quality makes it difficult to determine key aspects of what the customer feels or thinks, as well as their overall experiences while using your product. In addition, wireframes are not ideal to convey complex animations or transitions.

Although paper prototypes and clickable wireframes are advantageous in fostering design thinking, supporting rapid exploration and experimentation with design concepts, as well as,  soliciting the customers' opinions and experiences. They immanently lack the level of detail and realism required to adequately support usability testing. 

High-fidelity Prototyping

High-fidelity prototypes are inherently detailed and realistic, as they closely resemble the final version of the product. Due to their realistic nature, high-fidelity prototypes are ideal for usability testing e.g., you can assess whether the graphical elements or interactive elements of your product really work. Accordingly, users are more inclined to behave more naturally and share more meaningful and honest feedback, as interacting with your prototype feels like the real experience. High Fidelity prototypes can be created with tools such as Adobe XD, Figma, InVision Studio, and Azure RP 9. 

Here is an example of a high-fidelity prototype created in InVision Studio.

Unlike low-fidelity prototypes, most if not all of the visuals, content, and interactive elements are featured in high-fidelity prototypes. As such, it is well suited to demonstrate a tangible and clear representation of the main features and functionality of your product, while simultaneously providing a rich and interactive experience for your customers. Notwithstanding their advantages, high fidelity prototypes can demand more resources (eg., more time for development, high financial cost, and requires more technical skills to support development).

How to Prototype?

1. Simply, by starting - First, you'll need to start right? Grab your pen and paper and start adding more details to those ideas from your ideate session. You can peer-test, to evaluate your preliminary design concepts to gain deeper insights into design decisions you're making or those that you'll need to make to improve the user experience. You'll also garner more meaningful insights into the design requirements or interactive elements necessary to address your design challenge. 
2. Set clear goals - For e.g., what need are you addressing with this particular prototype? What are you trying to test and what do you expect to achieve following the evaluation of this prototype? Remember you're rapidly exploring and experimenting with different ideas so avoid spending too much time with one particular prototype.
3. Design with your customer in mind - You may ask these questions: What problem are you trying to address? What feature would make their lives easier? How would they interact with this feature? What are their expectations of the product? To keep in check, always go back to the drawing board and evaluate if your design addresses your problem statement.
4. Exploit the right tool - Use the appropriate tool that suits your needs and also that of your team.

It's time to Reflect, Analyze, and Transition to the Testing Phase.

Prototyping and testing often occur in tandem. Accordingly, once your prototype is created, you'll need to evaluate it with your target users. As mentioned above, you'll need to set clear goals, while carefully thinking along with your teammates about what you're going to test and what are your expectations/assumptions of the evaluation. Once you have garnered the customer-insights, you'll need to adequately analyze and reflect on your key findings, which inevitably will prompt iterative prototyping and retesting sessions until you've reached the optimal product design that satisfies your customers' needs.

Additional Resources

1. https://www.interaction-design.org/literature/article/ux-tools-wireframing-and-prototyping-tools
2. https://blog.adobe.com/en/publish/2017/11/29/prototyping-difference-low-fidelity-high-fidelity-prototypes-use.html#gs.thejnx
3. https://careerfoundry.com/en/blog/ux-design/design-thinking-stage-four-prototyping/
4. https://xd.adobe.com/ideas/process/wireframing/wireframe-design-definition/
5. https://www.interaction-design.org/literature/article/etch-a-sketch-how-to-use-sketching-in-user-experience-design
6. https://hike.one/update/why-use-micro-animations-in-your-design