In a perfect world, every designer would have a complete idea of how a user interface (UI) should look and be able to communicate that design to clients, easily and unambiguously.
In the real world, unfortunately, it often seems these two elements are mutually exclusive. The more complete a UI design idea is, the more time and energy it takes to communicate it effectively.
Designers and engineers use wireframe prototypes to meet this need as efficiently as possible. By focusing on layout, functionality, and priority of content, wireframe prototypes make it easy for clients to influence UX decisions before designers spend too much time fleshing out an idea.
Prototype Fidelity: A Necessary Compromise
There is a conflict inherent to this step in the design process. Designers everywhere have to ask themselves, “How much time should I spend designing this prototype?”
There are two broad approaches to prototype fidelity:
- Low-fidelity. Low-fidelity prototypes are easy to make and quick to revise. A pen-and-paper sketch counts as a low-fidelity mockup, while a low-fidelity prototype demonstrates barebones functionality without any aesthetic treatment.
- High-fidelity. High-fidelity prototypes offer a user experience (UX) as close as possible to the real thing. They take time, patience, and a good deal of aesthetic decision-making. They demonstrate functionality while showing what the final product should look and feel like.
Unsurprisingly, UX designers throughout the industry tend to find themselves on either side of the issue — some opt for high-fidelity prototypes, while others rely on low-fidelity variants. Each side has good reasons.
High-fidelity prototypes offer a valuable set of advantages:
- Better Outcomes. When you spend more time perfecting the UI design, you can expect a more positive result from your client.
- Optimized Design Decisions. A high-fidelity mockup makes full use of design decisions made early in the production process.
- Better Presentation. Project stakeholders prefer high-fidelity mockups, which are less ambiguous and easier for non-designers to understand.
- Smooth Transition to Development. Front-end designers can use high-fidelity mockups as a visual specs sheet to check their work.
But these prototypes also come with an important downside: they take more time to produce. If project stakeholders reject a high-fidelity mockup, it forces designers to throw away their mockups and go straight back to the drawing board.
Low-fidelity mockups, on the other hand, are easy to create, and quickly. UX designers who believe in low-fidelity sketches tend to say the mockup phase is transitional and that spending a great deal of time working on something that will be re-done by a front-end designer is a waste of time and resources.
The low-fidelity approach can generate useful advantages:
- Concept Agility. You can quickly move from the conceptual phase to the implementation phase of a project without spending more time than necessary.
- Flexible Implementation. The front-end team enjoys a greater degree of flexibility and creativity during implementation.
- Greater Time Efficiency. There is a lower risk of creating design components that will eventually get scrapped during the front-end implementation phase.
The natural downside to creating low-fidelity mockups is that they don’t impress clients and stakeholders the way high-fidelity ones do. Low-fidelity mockups can be misinterpreted or simply rejected for reasons that more elaborate mockups effectively address.
Every designer has to consider this risk when presenting mockups and prototypes. Prototyping at too high a level of fidelity wastes time and resources, but prototyping at too low a fidelity leaves out details that could turn out to be project dealbreakers. Prototyping with the wrong degree of fidelity is always a costly mistake.
But what if there was a way to use both low-fidelity and high-fidelity in a unified way? This is exactly what the design funnel approach does.
The Design Funnel: Prototyping Without Compromise
The conflict between high-fidelity and low-fidelity mockup presentation is not unique to UX designers. Architects, engineers, and even political legislators have to deal with the same trade-off between proposal and confirmation, whether the project is about a new house, product, or law.
However, most of these disciplines have structures for validating projects at multiple steps along the way to the final product. Some UX designers have understood this process and have begun working according to an iterative prototype process called the design funnel.
Under the design funnel concept, stakeholders first choose one preliminary low-fidelity sketch from many. Then the design team uses the chosen sketch to produce a functional wireframe that corresponds. Once this is approved, the design team can move on to a visual mockup, then to a functional prototype.
This process requires a high degree of communication between the design team and the project stakeholders. Although that level of communication may seem like it drags the process along, it actually saves a great deal of time that would otherwise be spent working on proposals doomed for rejection and revision.
Ultimately, every project has an optimal level of fidelity. This is the minimum amount necessary to earn stakeholder approval and get the project moving. The design funnel concept allows designers to more accurately pinpoint the level of work that will achieve that result.
