I don’t know about you, but I always love hearing about how other people approach their work, so in this email, I thought I would spend a few minutes explaining how I create wireframes.
The chances are that you have to produce wireframes. Some of us have to do it more than others, but it is hard to avoid it entirely if you work in digital! I create them all the time, and I have noticed I tend to approach most in the same way, and that is what I wanted to share with you.
1. Start With the User’s Questions
Before I put pen to paper or crack open a wireframing tool, I start with a list. Boring I know, but it works for me.
I write a list of all the questions I can think of that users might have on the page I am wireframing. Ideally, I base this on some previous research, but where that doesn’t happen, I rely on empathy.
Once I have my list of questions, I start prioritising them. I prioritise based on two factors.
First, I consider the importance of the questions to the user. Sometimes I get to carry out a top task analysis to provide insights into this, but often not.
Second, I consider when these questions occur to people visiting the page. For example, they don’t tend to think about the return policy until they are almost ready to buy.
2. Decide on My Calls to Action
Next, I start thinking about calls to action. What do I want people to do on the page?
I tend to pick two calls to action. The first is the primary call to action that is usually something like make a purchase or get in touch. The second is a backup call to action for those not yet ready to complete the first one. That typically revolves around keep in touch through a newsletter or social media channel.
3. Identify Your Benefits
Believe it or not, I am still not ready to start wireframing yet. First, I need to be clear on the value the page and the broader offering are providing to the user. Put another way, why should the user spend time looking at this page and why should they be interested in what you have to offer?
Typically, clients are very good at saying what they offer, but not as good at explaining why anybody should care. It is essential to strike a balance between the features you provide and the benefit that you offer people.
4. Start Wireframing!
Finally, I now start producing a wireframe bringing together all of the information I have gathered in steps 1 to 3.
I usually begin with the mobile version. The reason I like to start here as the linear experience forces me to consider the order I should introduce different pieces of information to people.
This order is generally built around the order users ask questions. For example:
- What is this page about?
- What does this page offer me?
- How will that help me? (Benefits)
- Why should I trust this page?
- What should I do next? (Call to Action)
5. Address Objections
After I have completed my initial draft of the wireframe, I tend to go back through it as if I was a particularly sceptical user.
What kind of concerns would somebody like that have? Perhaps they wouldn’t want to sign up to the newsletter because they were worried about spam or maybe they are unconvinced that the benefits I claim are genuine.
Every time I come up with an objection like that I try and address it at the point where the issue occurred to me. So, for example, I would add a message about spam by the newsletter signup form and provide testimonials alongside the benefits.
6. Look to Simplify
By this stage, the wireframe has probably become somewhat overcomplicated as I seek to communicate all the information a user could be interested in.
To address this problem, I pass through the wireframe one last time looking for opportunities to simplify.
For me, that typically involves looking at each screen element in turn and asking three questions:
- Could I remove this element? How big a negative impact would that have and would the benefits outweigh the loss?
- Could I hide this element? Could it go on another page deeper in the site’s information architecture or could I hide it under an accordion or tab?
- Could I shrink this element? Could I de-emphasise it, so it doesn’t take attention away from more important content on the page?
I find that this final step proves invaluable at tightening up your messaging and design.
What is Your Approach?
So that is my approach to wireframing. But what about you?
You might think you don’t have a specific approach, but you probably do. I can’t say I was conscious of my process until I sat down to write this newsletter.
I am glad I did think about it. By understanding better what I do and why, it helps me articulate it to others. However, more importantly, it also refines it to be as streamlined as possible.
Perhaps you should take the time to look at your process and see if you cannot do the same. And if you do, I would love to hear about it.
Until next time, thanks for reading.
Paul
