Prototypes help designers with testing and modeling design ideas. Prototyping tools allow for more effective communication and collaboration between designers and clients to ensure all parties are on the same page. Designs also use prototypes to transform design ideas into workable and tangible models. This way, designers can build as they design to create a more user-friendly end product.

Generally speaking, a prototype is a representation of a product’s interface and its interaction with users. Prototypes test many different factors in a design, including user interfaces, interactions, and user experience flows to better understand the overall flow and execution of the product’s design.

There are many reasons to utilize prototypes in the design process, but the primary purpose is to test designs and ideas before building potentially expensive products. Prototypes also determine if the design concept works as planned. With user testing, design teams can investigate how the target users interact with a product compared to how designers planned for users to interact with the design. In addition, user testing provides insight into usability issues and other areas of improvement.

Prototypes have varying levels of fidelity in visual design, content, and interactivity. High and low-fidelity reference the amount of detail and functionality in a given prototype. Low-fidelity prototypes use simple frameworks and minimal elements to focus on functionality and structure. High-fidelity prototypes are highly interactive with designs, details, and functionality similar to the final product.

Low-fidelity Prototypes

Low-fidelity prototypes are best in the early stages of design for creating and editing quick iterations of design ideas. These are also helpful for collecting user feedback before moving to more expensive design stages.

Low-fidelity prototypes rapidly translate high-level design concepts and structure into workable models. Only necessary visual elements of the final product are included in low-fidelity prototyping, such as visual frameworks or element shapes. In addition, only relevant content and information are provided.

When should you use a low-fidelity prototype?

When you come up with a design idea that you want to create a workable model for
When you want to test a design’s functionality
When you want to examine user needs
When you want a fast, cheap model to include in your design process
When you want feedback from team members

Advantages:

Since they primarily focus on structure and functionality, low-fidelity prototypes are often cheap.
Low-fidelity prototypes have no need for time-consuming and costly details, so they’re fast and easy to replicate.
Low-fidelity prototypes don’t require any specific software or professional skills, so more diverse team members can collaborate on a project.
Designers can implement low-fidelity prototypes in user testing to identify and resolve potential concerns in functionality.

Disadvantages

With few details and limited interactivity, low-fidelity prototypes can be misinterpreted by other designers.
Also due to limitations in detail and interactivity, user testing may result in limited or inaccurate results.

High-Fidelity Prototypes

Due to their costly and detailed nature, high-fidelity prototypes are best reserved for late and final design stages. Designers can use them to test the feasibility and functionality of products and appeal to target users or stakeholders before launch.

High-fidelity prototypes have similar functionality and appearance to the final product design. These prototypes should have realistic and detailed elements and functions. Designers should include real content that will be used in the final design. All features should be operable and interactive.

When should you use a high-fidelity prototype?

After the visual design is complete
To test elements, animations, transitions, and interactions
For feedback from other designers and target users

Advantages

High-fidelity prototypes have more high-quality photos and detailed colors, animations, and buttons.
With the finalized color scheme, layouts, and vivid animations, high-fidelity prototypes offer better visual effects.
Because of their realistic details, high-fidelity prototypes also offer more accurate results and quality feedback in user testing.
High-fidelity prototypes are great for presentations to represent the final product design, thus making them more appealing to clients and stakeholders.

Disadvantages:

Since high-fidelity prototypes require professional software and skilled designers, they are often expensive.
Minor changes in a high-fidelity prototype often prompt many additional modifications simultaneously, so they are difficult to edit and iterate.

Owasso Companion High-Fidelity Prototypes

Aptly named the “Owasso Companion,” this mobile companion app helps users find community and services information. The city is community-oriented so the app’s design incorporates on-the-go information about the community and resident services.

In this walkthrough video, I’ll talk about the key features and functions used in the companion app’s design.

A walkthrough video of a companion mobile app for the City of Owasso’s website.

Prototyping for Companion Apps