BACK TO BLOG

High-fidelity wireframes: not just window-dressing

To what degree should UX Designers concern themselves with making high-fidelity wireframes vs. keeping them low-fidelity, fast and lean?  What value does adding an extra degree of finish add to the process and the finished product?

Creative, Strategy

Jen Hennings

SENIOR EXPERIENCE SPECIALIST

Jen constantly strives to push the envelope and make sure that the client isn't settling for anything less than extraordinary. Her background includes commercial, e-commerce, B2B, and engineering. Combine this with strong technical knowledge and experience designing across all platforms.

Get in touch

All too often the more creatively inclined UXer’s among us hear the words..

You’re just wire-framing, you’re wasting time making them look nice. Please keep them low-fidelity so we just focus on the user experience.”

This has never sat well with me, it’s always felt a little bit like we’re missing a trick. I understand the need to balance the quality, speed and budget triangle, but does that mean we have to completely nuke the look of our wireframes? I don’t think so, and if you can achieve fast paced delivery, at a high degree of quality whilst still making them look great, why wouldn’t you? That’s what we always try to do at Omobono, and over the next few minutes I’m going to tell you why, and share some examples on how.

We have so many more tools now to boost our capability to deliver wireframes at pace. The standards have been set, and the technology is in place. So I challenge you, the next time you hear that phase, to politely say the following.

pirates of the carribean meme. I'm disinclined to acquiesce to your request. Means no.

This is a chance for you to get a glimpse behind the curtain to see what style of wireframe we’re producing, how we do it to this level whilst remaining lean and rapid, and how we use them to deliver the most possible value to our clients.

————-

Let’s start with a couple of definitions;

Wireframe

“One of the classic UX deliverables. ‘Schematics’ of the end solution, determining the layout, behaviour and navigation.”

Fidelity

“The degree of exactness or closeness to the truth. This defines how closely the wireframes represent the final solution delivered in terms of visual presentation and layout.”

The traditional UX view of wireframes is that they’re created at a lower fidelity with a simple grey and white presentation, just laying out content on a page in order and focussing on methods and types of interaction/navigation available to the target user. They’re quick to produce and for some aspects of UX they’re very effective.

View of 4 side-by-side low fidelity wireframes.

But at Omobono, we choose to make our wireframes look like this.

View of an Omobono standard of a wireframe.

 

Before the cries of “time wasting” from my peers start, I’m going to give you the why and the how behind this decision.

Why we think high-fidelity wireframes rock.

Increase in client cognition of the end solution

Whilst UX has rapidly grown in popularity in the B2B industry recently, we still find that some clients struggle to equate a low-fidelity wireframe with the intended end solution. There’s a cognition gap. You’re asking a lot of a client to make the mental leap from a collection of words and grey boxes to the solution they’re asking for. Raising the fidelity of your wireframes so they’re more representative of something that might actually go live makes it a lot easier for them to understand what you’re creating for them.

Facilitates more effective user testing

How can you make a call on the effectiveness of an interaction method, when what you’re testing isn’t representative of what the user will actually use within the final solution? This is especially relevant when it comes to the testing of a brand-new site navigation system. To test the efficacy of a new hierarchy, you must also test the user’s ability to navigate through it. We believe that your results will be more impactful if you’re testing a navigation prototype that looks similar to what you’re intending to give the user in the end.

Increasing the impact of the UX Design process

There’s a simple point in here about perceived quality. User Experience has been gaining traction in B2B for the last several years, but we feel it’s really important that great UX makes a great impression. There’s a lot to be said for presenting clients with a high-quality impressive deliverable. It instantly boosts their confidence in your UX team and their process, and if it can still be done at a rapid pace, what do you have to lose?

Defining the “intent” of the experience of a solution

Strategy, User Experience, Creative and Development should all have a stake in the development of and conversations around wireframes. However, we believe UX should also be involved with the defining final layout and overall style of the end solution. UX should be leading the way with the development of the final concept.

UX’ers should demonstrate the basics of content strategy and visual design

I can’t tell you the number of times that I’ve been presented with wireframes that have an unreadable block of lorem ipsum, with the same block repeated in slightly smaller and more illegible font on the mobile version. This is a real shame, especially when working with Content Strategists. Why spend time creating a wireframe to represent a content plan, when the user can’t actually read any of the words on the page? The UX’er should help determine word limits for text, as well as the appropriate presentation of video and imagery. Those rules can only be set if the UX designer is creating wireframes that bear in mind the principles of visual design and typography. Start simple, when you’re creating a wireframe, make sure you’re using a client approved font, or close equivalent.

Side by side view of unformatted and formatted text.

You tell me which of these is easier to read?

The tools and techniques we use to make them quickly.

So now I’ve given you the why behind high-fidelity wireframes, let’s talk about the tools and strategies that we use to achieve this whilst maintaining the highest possible project velocity.

Consistent use of tools

Our internal design teams (both UX and Creative) have a common set of industry standard tools at their disposal. Wireframes and Designs are created in Sketch, presented as flat or interactive prototypes in inVision, with our developers able to examine them through Zeplin. This has massively increased our speed of handover between teams, with everyone having visibility of the design development process throughout the project. Designers can make alterations to wireframes and vice versa.Logos for the Omobono tool set. Atomic design approach

Since our Creative team has adopted Sketch as their design tool of choice, our Creative and UX teams have been hard at work creating an internal design system and component library. It is easily skin-able with client colours and fonts and can be made purely greyscale for our UX team. Design systems such as this are here to stay and for major web builds they are an integral part of achieving cross-site consistency and user experience. Having this at our disposal means that our wireframing process can be almost done through a combination of drag and drop and symbol editing.

Say no to silos

Finally and most importantly, a key part of maintaining the velocity of our wireframing process is collaboration. I’ve previously written another article about why Experience Design needs strategy, which you can read here. But I want to make the point again. Our wireframes are developed using content plans that are generated by our content strategists. Before we ever get to putting components onto a page, we’ve done all the thinking about the story that each page of a website needs to tell. On top of this, creative and development are involved from the very beginning, there’s no point developing an experience design concept that isn’t buildable or that doesn’t match the creative team’s vision for the end solution. All these teams bring something invaluable to the table, and to not learn from each other is a huge mistake.

————

In closing I just want to reiterate that this isn’t an article designed to downgrade the power of the traditional low fidelity wireframe. I just happen to think that the way we do things works really well, and our clients seem to think so!

I will leave you with this challenge for the next time you’re thinking about a wireframe on a new project, how many of the above techniques could you implement to help you raise the fidelity of your wireframes and potentially add some of that value back to your clients.

More from this expert

7 principles of retail expe...

In an increasingly connected world, the lines between the different strands of Brand Experience Design are blurring. Companies like Burberry are leading the charge in creating a... see more

Jen Hennings

Our defining principles of ...

As we move into 2017, after what we can all agree was a little iffy 2016, the Experience Design team at Omobono wanted to kick things off on a positive note. We’ve been thinking... see more

Jen Hennings

Designing for VR: how to co...

Planning a set of traditional user testing sessions this week got us thinking: how could we conduct a user test in virtual reality? User testing, in its current form, is a well-... see more

Jen Hennings