Design Thinking: Prototyping

UI/UX Design

An illustration of a character connecting up the prototypes on a computer
An illustration of a character connecting up the prototypes on a computer
An illustration of a character connecting up the prototypes on a computer

Continued from Design Thinking: Ideation

What is a prototype?

Each product, not just digital, will follow a process prior to being deployed to its user base. The final product pushed to deployment will aim to solve the pain points defined during that process. To help determine whether the product is fit for purpose, prototyping is used to test this from a customer point of view. Prototypes are a combination of the previous steps displayed in a visual way. The goal of these is to ultimately test products and identify any issues before going into production. It is often a misconception that prototypes are only needed towards the late stages of the design thinking process, and although this can work it is best to prototype little and often leading up to the higher fidelity prototypes.

The benefits

There are a number of benefits that prototyping provides. It offers a much easier way to help communicate a design to users, which for a user-centric design is essential. Prototypes enable designers to incorporate user-testing into the process earlier rather than later. If utilised in later stages, more time and resources are needed if changes are required. Having the ability to undertake this earlier allows for errors to be detected and amended much faster.

As prototypes are a visual way of displaying the design in question, they help to promote engagement from users. This should encourage users to voice their opinions and concerns more effectively, which may then help outline issues not originally identified in earlier stages. This feedback will influence the product and improve the user experience as a result.

Level of fidelity

There are varying levels of prototype fidelity, each offering different benefits. A prototype’s fidelity refers to how much detail is built into it. Each level of fidelity can be used to acquire particular types of feedback, depending on the desired outcome.

Low Fidelity

Lower fidelity prototypes take very little time to produce, which is great when early iteration is needed to help provide the product with better direction. Lower fidelity prototypes will usually be colourless and use filler text and images, essentially very blocky. This is useful to gain product usability feedback from users early and means any changes can be made quickly. By not overwhelming the prototype with content, the product becomes easier to understand for the users. They are a very rough representation and are extremely valuable if utilised in the right circumstance.

High fidelity

Higher fidelity prototypes will resemble near enough the finalised product that will eventually be released. These are best used when trying to provide a near indistinguishable experience of the product, meaning the product aesthetic will be applied by adding colour, images, logos etc. It will also act similar to the final product, so functionality should be the same unless stated otherwise. These prototypes are generally created when designers have an accurate idea of how the product will function, and need to test to ensure it aligns with the user’s needs. Feedback gathered during the lower fidelity prototypes will have been applied, so suggested changes are usually quite minor.

Types of prototype

The type of prototype will change depending on the fidelity. Lower fidelity prototypes will usually involve paper which allows for quick iteration and exploration of ideas. Paper prototypes are very rough and are useful to view a concept stripped back to its bare state without the distracting visuals.

Wireframes will traditionally follow in digital form after any amendments have been made. Wireframes are particularly versatile which makes them very beneficial, the amount of detail used can differ hugely. As mentioned previously, the level of detail needed will depend on what feedback is desired.

Those wireframes will then be used as the foundation for creating a visual mockup. Visual mockups will include all of the visual aspects for the prototype including colours, fonts and images, and will provide the user with a realistic impression of the final product. These mockups are simply a static representation, meaning interactions are not part of the mockup but should provide an idea of the functionality. Interactions can be added later which will transform the mockup to a full working interactive prototype that users and stakeholders can engage with.

Hype the Prototype!

Prototypes are an extremely valuable resource and an integral part of the design thinking process. They will contribute towards a better user experience for your audience. It is important to remember, however, that the right prototypes need to be used for the right situation. If they are not, the required information may not be gained from feedback which will have an impact on the delivered product. Prototype with purpose and the user will always benefit.

To add another level of fidelity we have been experimenting with AR for rapid prototyping, you can read the full blog HERE.

This article is the 2nd in 5-part series exploring Design Thinking. Learn more about the next step of design thinking in Design Thinking: Test.

Got an idea? Let us know.

Discover how Komodo Digital can turn your concept into reality. Contact us today to explore the possibilities and unleash the potential of your idea.

Sign up to our newsletter

Be the first to hear about our events, industry insights and what’s going on at Komodo. We promise we’ll respect your inbox and only send you stuff we’d actually read ourselves.