Check out the Product Innovation Framework!

Design goes wire(frame)less – the case for high fidelity first

The received wisdom goes something like this: Wireframing is an established and essential part of the UX design process, and skipping should be done at your peril. ☠️

But is wireframing this the only way to achieve design success?

Prepare to be shocked: Sometimes, our designers don’t produce wireframes, and the outcome isn’t one of delayed sign offs, client misunderstandings, confused development partners and bankruptcy on both sides.

Quite the opposite in fact.

What is wireframing?

Chances are if you’ve worked with a design team before you’re familiar with wireframes and what they do, but a quick definition never hurts.

Wireframes are basic visual guides, intended to propose elements, show how possible solutions would flow, and determine concepts to take forward for further exploration.

It’s also worth saying that what we’re talking about here are the type of wireframes made with software, and presented to clients as a deliverable. (As shown in this image, with thanks to Balsamiq)

We’d class them as distinct from the super lo-fi scribbles shown below that we would naturally do when forming an idea, in a workshop or sprint.

very lo-fi wireframing with pen and paper in a notebook

A wireless example

We recently worked with one of the UK’s biggest freight courier booking companies – a business handing over a quarter of a million shipments every single month.

Our work focused on freshening up the UI of the product, improving usability for drivers in their specific use case and giving it a modern, market-leading look.

Deadlines were tight, with a busy CEO who had little time for back and forth, so keeping the project moving was essential.

Blog post

The realities of UX research: momentum vs learning

There often can be tension between learning as much as possible and keeping up the pace of a UX project. We explain why this happens and how you might overcome it.

Read more

Making the decision to forgo a formal wireframing stage wasn’t just about saving time overall.

It was a move that enabled us to spend more time on the first UI screen and a really well prepared design system with the repeatable elements the full project would utilise.

We could then show the CEO a more accurate representation of what the final product would look like. This in turn enabled him to give more valuable feedback and us to make changes at pace, pushing a UI system out for user testing sooner.

While this method means it takes more time to come up with the first screen, it also means that the rest of the design process can often move faster – useful when time or budgets are demanding .”

Wireframing worries

Another sticking point we’ve experienced with wireframing is that it can generate more questions than it answers.

The abstract nature of wireframes means that stakeholders don’t always get the bigger picture about the UI, and can get stuck on worries about details like which colour or header image will be used.

With this type of project, wires can end up holding things up.

Blog post

Why we're moving beyond moodboards

Rather than reviewing other people’s designs, we’ve switched to quickly creating visual elements based around the client’s brand and content. The results speak for themselves!

Read more

Why wireframe?

Ultimately, we view it like this. Wireframing is just one technique in the designer’s toolbelt, and adapting our process to suit the task in hand is key.

There are cases where the benefit from laying the whole thing out in wires and seeing a ready plan for the full project is immense. Design without wireframing would be the wrong choice.

However, cracking on with the UX and visual side of things at the high-fidelity level straight after discovery or while preparing for prototyping is an approach that will suit some projects down to the ground.

As we always say, context is key.

Newsletter

Our four favourite UX, product and innovation stories sent to your inbox, every month. All killer, no filler.