Three Ingredients for UX wireframing
by Ali Carmichael, Managing Director and Owner

Three Ingredients for UX wireframing

It can be frustrating when, on settling into a new job, a UX Professional is asked to throw together a wireframe, as if that’s all a UX role is good for. A regular gripe I hear is that practitioners are not given the time to consider, let alone research, their users ahead of wireframing. Like when my kids claim to “love sausage risotto without the risotto”, this is like UX without the U.

Of course, in an ideal world there are many activities we can undertake ahead of wireframing. Our User-Centred Design Process has a whole Research Phase before we even consider wireframes. However, for many, and sometimes for us, there just isn’t the time or budget. Moreso if the project in hand needs to go live ASAP.

So, what do we do?

What we don’t do is panic and jump straight into sketching wireframes. We need to consider the user, and we need to begin with logic before we get creative. There is, therefore, a reduced process that we follow to ensure we approach this from a user perspective.

Once we have the brief from our stakeholders, there are three ingredients that we need to add before we begin wireframing:

1/. User profiles

User profiles, or personas, are archetypes of your customers, which are created to be typical users of your website (or any product or service). In this example, we’re keeping the profiles at a high level and we look to include:

  • Who are the core users?
  • What is their goal?
  • What questions will they need answers to?

We’re not looking for research here, we just need to shape the profiles on a collective understanding. To do this you can draw on your colleagues’ experiences of working with users, or chat to someone in your marketing, sales, or customer service teams. Also, consider any feedback and communications you receive directly from customers.

In our example here, we show a representation of how a user, who arrives on the Experience UX website, might look. We’ve created a story for Toby that represents one type of enquiry we sometimes receive via our website, and then we thought about what questions Toby might have.

A high-level user profile of Toby, a product manager, detailing their triggers and tasks upon arriving on Experience UX's website

Top Tip:
Imagine Toby with a beginner’s mind – what do you assume users already knows but Toby might not yet know? What basic questions should you cater to?

2/. Journey mapping

Now, standing in the shoes of each user profile, we’re ready to plot the journey for each profile to reach their goal, considering their needs and outside influence:

  • Their journey prior to landing on the website
  • Critical first visit questions: Can you help me, & how can you help me?
  • Answer to user questions, as listed in the profiles
  • Business objectives
  • Appease any other doubts

This would be Toby’s journey into and through our website, taking into account what he needs, what will improve Toby’s experience, but also what would Experience UX like Toby to do.

A user journey map of Toby's exploration of the website

Top tip:
It is useful to start by mapping Toby’s task on your current website and repeat this for each of your user’s tasks. With this insight, start afresh with a blank sheet of paper or whiteboard, and create a new journey map taking on the learnings.

3/. Content hierarchy

With the journeys mapped, we now list all the content and features needed along the path to help achieve the user and business goals. List the content and features, prioritised on its importance to the user and business, to create a draft order of page content. This will require a bit of toing and froing as you begin to balance the user and business needs but try not to over think it. You have a chance to flesh this out when you get to the actual wireframing.

The list below is the outcome for a landing page for Toby. You will note there is no detail about the content yet, it is simply a pointer to what must be included.

Top tip:
Keeping it high-level like this allows you to crack on and quickly shape your wireframes based on logic, without getting caught up in the detail of the content or the creativity of the final solution.

Why does this matter?

Firstly, we must realise that approaching our work from our own perspective is likely to be different to that of a user. These three tasks, which can be executed relatively quickly, provide you with a perspective that isn’t your own. This ensures you have a user-first basis on which to shape your wireframes and be able to explain this, with sound reasoning, to your stakeholders.

We understand that many new pages, or even user journeys, aren’t afforded the time and budget for a complete user-centred design process, so these three ingredients will help you to create wireframes with a hint of UCD, even if you’ve had to do it all yourself from your desk. With this process, you’re ready to shape your first draft wireframe, considering the content hierarchy, user journey, and user profile.

Now you are ready to wireframe, it should be noted that your wireframes, and the final content/design, must remain intuitive and smooth. You can’t go wrong following Robert Hoakman Jr’s ‘Three Rs’ from his book, Designing the Obvious:

  • Requirements — only include things that are absolutely necessary.
  • Reduction — remove as many screen elements, interactions and words as you can.
  • Regularity — be consistent in formatting, layout and wording.
UX Consultant Emma Peters

Let’s Chat

Got a question? We’re here to listen and help you and your organisation become more user-centric. Talk to us about how usability testing and user research can help you. Contact us today.

01202 293652