Why is lo-fi design important in the design process?

What does an apartment floor plan have to do with the clay models used in car manufacturing? Both are methods of prototyping. We use similar tools when designing digital interfaces, too. Let’s look at which one to use, and when.

The last time we moved house, our family faced the question of where our existing furniture would go in the new place: the bookcase, wardrobe, sofa and piano. We had to work this out well in advance; otherwise, we could not have decided which furniture was missing or what still needed to be bought. Even on moving day, we needed to know where each box was going – otherwise, how could we have directed the friends and family helping us move? So we prepared a floor plan of the new apartment, then cut out cardboard versions of the existing furniture – more precisely, top-down views – to the same scale, and began shifting them around. Everything fell into place – except that we had not considered whether the furniture would fit through the corridor leading to the rooms. But that is another story...

Placing scaled furniture on an apartment floor plan is also a form of prototyping – one that saved us time and effort when moving house.

If we had furnished the apartment through trial and error, we would have had to move the piano around quite a lot.

Moving paper cut-outs is significantly faster. The same applies to producing more complex objects: General Motors, for example, has used this method since the 1930s. As a general rule, making a prototype is worthwhile when producing it is significantly cheaper than producing the finished product.

Prototype types

In our agency work, we often encounter the question of when a prototype is justified in the design process, and at what level of detail. So let us start by clarifying the terms:

Low-fidelity (lo-fi) prototype

A low-fidelity prototype – or, in industry jargon, a lo-fi prototype or lo-fi wireframe – is a simple greyscale schematic drawing of a website or application that focuses only on the content and structural elements of the layout.

It deliberately contains no colours, icons, logos or other design elements that might distract from the focus on content, navigation and structure.

Its purpose is to create an early visual understanding of a page or screen, helping the team reach agreement before the creative phase begins.

A lo-fi wireframe is already suitable for illustrating processes and can therefore be shown to management. It can also be used in usability testing with users – although, in this case, feedback relating to the visual appeal of the interface needs to be filtered out.

Experience shows that managers also need to be prepared for the fact that what they see is not the final interface. We have received comments such as, ‘my child could draw better than this’ – which taught us that stakeholders on the client side need to understand what lo-fi delivers and what will come later. The purpose of lo-fi is to model structure and processes; it is as far removed from aesthetics as an apartment floor plan is from the colour of its wallpaper and tiles.

Lo-fi has another clear advantage: it allows development requirements to be estimated with great accuracy.

Of course, changes can still occur at later stages of a project, and the final design may still contain more complex solutions. But these deviations are usually limited compared with the development estimate based on the lo-fi. Having a sound development estimate at this stage is also valuable because it can provide a point at which to stop the project. At first, that may not sound positive in a design company’s blog post, but it is: the investment can be assessed in time to determine whether it is worthwhile. Design costs will also be lower, as there is no need to create a hi-fi prototype if the project can be stopped in time. Completing the lo-fi is a useful decision point. Naturally, it is even better when the project continues, and after the lo-fi stage the team takes a breath before continuing with the hi-fi.

High-fidelity (hi-fi) prototype

In this case, creating the wireframe requires more effort, as it is a more detailed and complete representation of the final product.

Its purpose is to show how aesthetic features support essential functions.

It is created using clear design elements and, in fact, contains all the elements users will encounter in a ‘live’ environment.

A hi-fi prototype is still ‘just’ a prototype – nothing more and nothing less. In other words, it models the final experience, but it is not yet the final screen design itself, and certainly not a working solution. Usability research based on a hi-fi prototype provides a very close approximation to research carried out on working software. Unlike with lo-fi, the potentially distracting question of aesthetics no longer arises: hi-fi is genuinely very similar to the final screens.

When we use them

Lo-fi and hi-fi prototypes are tools that can be used in the design process. But it does not always make sense to use both.

Put simply, design tasks can be divided into two cases:

1. A design or redesign affects many areas, and the task is typically of medium or high complexity. It is important to understand early in the project which paths users will take, how individual screens connect, and what information each page should contain. Typical examples include redesigning an entire webshop or designing a mobile application from scratch. In the first case, in our experience, the project typically follows a waterfall model. The team jointly interprets business needs, prepares and validates plans, then arrives at the final designs through several rounds of iteration. The business requirements embodied in the lo-fi and usually documented are then handed over to the development team. This is where the lo-fi wireframe has a genuine place and role in the process.
2. Another typical case is when design takes place within an existing, functioning framework. There is expected to be no need to redesign or significantly transform existing structures; instead, something new is created using existing elements. This might involve, for example, adding a new feature or page type to the existing process or page structure.

More complex tasks can also be handled through agile planning. In our experience, however, creating lo-fi and then hi-fi designs simply does not fit into sprints lasting only a few weeks, so in such cases it is better to forgo lo-fi. An alternative is for the team to plan a separate sprint early in the project to create lo-fi wireframes and think through user journeys.

In the second case, we rarely encounter demand for lo-fi wireframes. They often simply waste time and add no real value, as the hi-fi wireframe can easily be assembled from existing elements.

Summary

In summary, lo-fi wireframes are best created when

• new and complex user journeys need to be designed,
• the information hierarchy needs to be clarified,
• it is important to develop a shared understanding within the team or with the project sponsor,
• and the structure needs to be validated before detailed design begins.

There are projects where you can skip lo-fi and start work directly on a hi-fi prototype. But this requires care: it is worth thinking twice about whether lo-fi can really be omitted. Otherwise, you may find yourself in the middle of a furniture-moving project, shifting the piano around the new apartment instead of using scale models cut from paper.