Never wireframe alone

Most web designers consider the creation of wireframes an important part of their web design process. However, less consider it a group activity.

I love creating wireframes. As I explain in my post the 7 wonders of wireframes I find they are invaluable. You can debate about how refined wireframes should be, but I think there can be little doubt that some form of wireframing is invaluable.

Nevertheless, much of their power is lost if the designer produces wireframes in isolation. It’s only when they are used as a collaborative tool that they reach their potential. They are a tool for sharing ideas and starting discussion.

Who should be involved in wireframing?

As a minimum wireframing needs to be carried out by the entire project team. This should include:

  • Designer.
  • Copywriter.
  • UX specialist.
  • Developer.
  • Project Manager.
  • Client.

The last one is particularly important. Many don’t think of the client as a member of the project team but they should be seen in that way. Their involvement in wireframe creation is invaluable, as I will explain below.

We shouldn’t stop at the project team. We should also be bringing in a selection of stakeholders and even on occasions users to contribute. Only then do you begin to see the real benefits of wireframing.

Why wireframe with others

Including the project team in wireframing is fairly obvious. After all if the developer is involved in the wireframing process, technical issues will be spotted early and problems avoided further down the line. Equally having copywriters, designers, project managers and all the other team members means that everybody is ‘singing off the same hymn sheet’ and each can bring their own expertise to bear.

Including the client also makes a lot of sense. The client has a unique understanding of their sector, business and audience which other team members often cannot match. By including them in the creation of wireframing we can make use of that knowledge.

Including the client also gives us a chance to educate and engage them in the process. If the client has been involved in wireframing they will be better informed about the design and feel they have contributed to its creation. This means they are much less likely to reject it.

The same can be said for other stakeholders. Each has their own unique contribution to make, but more importantly, by bringing them into the process they feel listens to and engaged. They go away with a sense of ownership about the direction the design is taking and so will be more likely to support it later.

In short, by wireframing as a group everybody goes away feeling they have been consulted and hopefully confident in the direction being taken. Everybody has a clear picture of where the site is going.

That said, you cannot hope to wireframe everything in detail with so many people involved. That is why how you run a collaborative wireframing session is so important.

How to run a collaborative wireframing session

So how does this all work in practice? First, you need to be realistic. Running a full day workshop dedicated to wireframing will leave you exhausted and your participants brain dead. In my experience three hours is more than enough in one sitting.

The advantage of keeping a session relatively short is you can keep the momentum going. The idea here isn’t to hammer down every detail but rather to create a consensus that can be refined outside of the meeting.

Momentum is best maintained by running a number of short exercises. Each exercise should build on the one before taking us closer to something tangible.

Remember, the aim of the session is to…

  • Establish any issues with the direction being taken.
  • To make people feel included and engaged with the process.
  • To educate the client and other stakeholders.
  • Ensure everybody has the same vision.

It helps to go into the workshop with a list of key pages you wish to wireframe. This normally includes more complex pages such as the homepage, landing pages etc. Prioritise the list and then if you don’t get to all of the pages you have at least tackled the important ones.

With that list in hand, here are a few exercises I cycle through for each page we are looking at.

Opening the floodgates

I begin by opening the floodgates and getting people to suggest every element that could or should appear on a page. The idea is that you just get everything out there, without worrying about how appropriate or otherwise the idea is.

If it is a small group then we do this all together with people shouting out ideas and me writing them on a whiteboard. If the group is larger then we split down into smaller groups. It can sometimes be interesting to divide people into disciplines (e.g. put all the sales and marketing people together). This can highlight some of the profound differences in how people see the role of the website.

Whatever the case, this exercise should end with a giant list of every screen element somebody might want to include, from the logo to a news area and everything in-between.

Now comes the point where they have to start prioritising. There are two exercises which help with that. You can do either or both. These are; the cereal box exercise and the user attention exercise.

The cereal box exercise

It’s amazing how unwilling many stakeholders are to prioritise their content when it comes to the web. The ability to create endlessly scrolling pages seems to encourage them to weight everything equally.

One way around this problem is not to talk about websites, but start with something that has physical constraints. Something like a cereal box.

Ask your group (or smaller groups if there is a lot of people) to use the list of elements to design a cereal box. They have to consider what goes on the front, back, top, bottom and sides of the box.

Cereal Box
Asking people to design a cereal box for their organisation rather than a website helps them focus on what their key messages are.

The exercise of deciding what to include and what to leave out, along with where to position different elements will help them prioritise. They will naturally put the most important thing on the back and least important elements on the bottom.

The cereal box exercise is a great starting point, but sooner or later we need to turn our attention to the actual page being designed. That is where the user attention exercise can help.

User attention exercise

The user attention exercise is a simple one. You explain to your audience that users have finite attention. You therefore assign the page we are wireframing 15 points of user attention (this number can be higher if required). Each element the group adds to the page costs one point. If they want the user to pay more attention to a particular item then they need to give it more user attention points.

The groups natural inclination will be to cram as many items on the page as possible, spending one or two points on each item. When they do this I tend to ask them which website is more effective in their opinion Yahoo! or Google. People always pick the latter.

Yahoo Homepage
Yahoo! have spread user attention across their entire homepage with little in the way of focus.

I then show them the two sites side by side and point out that Google has spent the vast majority of its user attention points on the search box. This normally helps people to start focusing on where they spend their points.

Google Homepage
Google spend their user attention on the search box, focusing on the pages primary purpose.

By the end of the exercise you will have a clear indication of where the priority of any page should lie. However, that doesn’t mean you shouldn’t explore other approaches. For this we use the six up exercise.

Six up exercise

This exercise encourages experimentation. It is an exercise people normally do individually, although it also works in small groups.

You take a sheet of paper and fold it in half vertically and thirds horizontally so creating six boxes.

Each person (or group) now has to create six versions of the page in question. Each little sketch will be very basic but will explore different ways the page could be tackled.

Example of six up wireframes
The six up exercise doesn’t create detailed wireframes but it is great for exploring alternative approaches.

Participants will quite easily do one or two versions but will begin to struggle after that. Coming up with six approaches will be an effort and they may need some advice (e.g. try producing versions of the page aimed at different audiences or with emphasis on different value propositions).

The exercise has one of two outcomes. Sometimes it uncovers an alternative approach that might otherwise have been missed. If that does not happen it demonstrates that the obvious approach really is the only option, even if its not perfect.

In a lot of cases the above exercises is all you will get through. However, with more important pages (such as the homepage) it maybe worth refining a little further.

Refine and discuss

It is perfectly possible to go away with all of the data collected from the exercises above and complete the wireframes yourself. However, sometimes it is a good idea to get more concrete agreement in the room.

You may want to sketch out an approach for certain pages based on all of the feedback provided and discuss it with the group. You often find that with all of the previous exercises still fresh in their minds, they are quite happy to agree with your approach because they now understand why it is being taken. That is the heart of collaborative wireframing – it prevents endless iteration.

Avoiding endless iteration

Working on wireframes (or worse still, design comps) in isolation and then seeking approval leads to endless back and forth, tweaking and amendments. Conference calls have to be arranged, email conversations are stilted and misunderstandings are common place.

By getting everybody in a room working on the wireframes together you can cut through all of that. No, you won’t be able to go into massive detail. But, you will be able to clearly define a general direction that will save a lot of time in the long run.