3 great reasons to stop using wireframes

Saying goodbye to wireframes was never going to be difficult for us, as we’ve never stood behind them as a useful design tool. We haven’t used wireframes to design digital products at any point of the Dumbo journey. Thankfully, our clients have never argued with us on this as they have seen that leaving wireframes off the deliverables list has sped up the design process and increased the quality of deliverables. 

Many designers might argue that: »With wireframes, I can better present a concept,« »I can quickly test ideas for their usability,« or »They are indispensable for the cooperation of developers and designers!« not to forget »In small projects you can get along without them, but at the latest when it comes to serious sizes, they are indispensable«.

However, in the four years that we’ve been running our business no one has ever asked us »Where are the wireframes?«

We want to share not only why you can easily save time and effort by skipping the wireframe process, but why using wireframes might actually be damaging the quality of your digital products. 

But first, let’s be clear on what we mean when we talk about wireframes…

In a design process, wireframes are used to visually represent the structure and functions of n interface. Usually abstracted in grayscale and with placeholder content. The spectrum is large, but generally speaking, there are two grades of wireframes: 

1. The first are sketches created with pen and paper or whiteboard and marker, these are low-fidelity wireframes. 
2. The second are concepts that are created with the help of apps, these are high-fidelity, digital wireframes. 

Unlike a sketch, the solution becomes more tangible and the level of detail is higher. Conventional interaction patterns illustrate the functionality and provide guidance for further product development.

When we say that we don’t use wireframes, we’re talking about high-fidelity wireframes. The kind that are created using software and are meant to be a blueprint or guide for the user interface. Low-fidelity wireframes, on the other hand, are needed by all of us to express our thoughts and develop ideas together with our teams. We tend to call them sketches or scribbles.

Therefore, for simplicity’s sake, we’re talking about wireframes as a deliverable — something that you’d send to customers. Those are the ones we can do without.

Wireframes should allow us to decide on strategic and content issues. However, even before each design draft we have to clarify a few fundamental questions such as: what goal do we want to achieve with the page we design and how can we achieve this goal? 

With the answers to these questions we define the strategic direction and set the cornerstones for our design activities. We don’t build the strategy simultaneously with the visual design. Creating wireframes can really only help us to visualize the thesis we have developed, not to formulate them.

Before deciding on what the page will look like, we have to establish a common understanding with all stakeholders around the desired goal. We create this understanding using an »Interaction Blueprint« that is based on our »Interaction Archetype« Framework (linked below). This model enables us to form strategic goals and decide how we’re going to achieve them — even without design know-how. 

The Interaction Blueprint serves as a frame of reference to describe the goals and tasks of an interaction. This allows us to make decisions at a strategic level that inform design, content and functional measures. This way, we ensure that the design follows these decisions and properly expresses them.

Wireframes are often used to test initial hypotheses in the form of user or usability tests at an early stage of development. The goal is to find the evidence as soon as possible and the hope is that wireframes will provide insights into the product experience and help to determine the pros and cons of a solution.

The idea isn’t a bad one, but unfortunately users aren’t always able to take information from a wireframe and understand how it will translate into a digital experience. Wireframes are simply too far away from what users expect from digital applications in 2020. In a test with a wireframe, users don’t experience the readability, the colours or the ergonomics and therefore nowhere near the entire usability of the product.

What we ultimately strive for in a test is immersion. We want to get as close as possible to the real context of use. In an ideal world, we are able to silently observe the reactions, gestures, interactions and thoughts of the test user. High-fidelity wireframes just can’t provide that for us. In our experience, it doesn’t require a fully developed prototype that already represents the brand and includes all functionalities. A simple click-dummy is sufficient. The determining factor is that the test product runs on the appropriate device, is equipped with real content and visually resembles the majority of the products that the target group deals with on a daily basis.

The sooner we create an experience that comes close to an interaction with a real product, the sooner we can obtain reliable results.

If we present a prototype, there’s a fear that the user or client might be distracted by the design. Wireframes are abstract enough that we are able to create enough distance from the final product to be able to discuss the basic ideas as factually as possible. And wireframes are tangible enough that they enable joint decisions on information architecture, user experience and technical requirements. Right?

Unfortunately, this distance actually causes problems. In a wireframe, we break down navigation bars, galleries and forms into a representative generic interaction pattern. They are nothing more than symbols that represent a certain type of interaction.

However, symbols have to be decoded and interpreted. Everyone sees something different in them. This is how unconscious (and unintentional) expectations of the design are established. The further we move away from the wireframe idea during the design process, the greater the disappointment.

We’ve found that we’re better off designing the interaction between man and machine in a creative debate from the very beginning. In our experience, this is how brilliant products are made. However, there are two things that you need to keep in mind if you’d like to adopt this mindset.

In order to move on from a world of wireframes, it does indeed take a mindset shift. What I can say is this: We haven’t used wireframes in 4 years and it has only had a positive impact on the products that we’ve designed. Working without wireframes has meant that our team is able to properly pin down a strategy, get valuable user feedback early on, and ultimately design for the entire digital experience. Our products are better than ever. We’ll never go back.