We're making moves! In the previous sections, we've explored the following stages of the design thinking process Empathize, Define, and Ideate.
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.
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.”
In addition, prototypes have varying degrees of fidelity to demonstrate tangible design concepts and evaluate them with customers.
With the deployment of prototypes, you'll obtain the following.
Prototyping is iterative so you can quickly revisit, adjust, and fine-tune your design concepts, and turn them into ideal market solutions.
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 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.
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 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).
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.