If you’re planning a web redesign and are already thinking about colours, fonts and images, stop. Before you get into all that pretty stuff, you need to make sure that your website is going to be built for the user. Why build for the user? You use websites all the time, so you probably know what they want, right? You may know everything there is to know about your company and services, but do you really know what users want? The problem is, if you don’t, you end up building a website that doesn’t help them reach their end goal. 

Imagine you’re going to test a drive a car and you get all the information about the car. You love, it has everything you ever wanted, but the salesperson has hidden the key ‘somewhere’ in the shop. You know it’s there, but in order to find it, you’re going to have to waste your time looking for it. Why should you look for it when you’re potentially going to hand over a large sum of money to them? You’d be left frustrated and probably won’t buy the car. The same goes for your users. If they can’t find what they are looking for and achieve their goal easily, they won’t use you. To combat this, you can carry out user experience (UX) workshops with real users, stakeholders, or both. There are various exercises that you can carry out with with literally next to no budget. All you need is time and enthusiasm.

Personas

A persona is representation of a user who could potentially visit your website. A persona makes you think like a user and outlines who they are, what they do, and what they want.

Ideally your persona would capture the following information:

  1. Their name and who they are – some information on their job, for example.
  2. An image. You can draw one if you like, but give them a face.
  3. Some background detail. Include a small snippet of information to make them feel more realistic.
  4. Their motivations – why they want to use your website?
  5. Their IT competency. Are they a developer, or a casual user who has their own laptop?
  6. Their current frustrations. If you are replacing an existing website, write down what frustrates them.
  7. A quote – if they could sum up the current website at the moment, what would they say?
  8. Their goals. What do they want to do on your website?


Feel free to download and use our template to create your personas. The UX Review has a great beginner's guide to personas

User stories and journeys

Users stories are a small snippet of information that includes a role, a goal, and a reason. So for example: 

As a member of the public I want to pay my council tax so I don’t receive a fine.”

Role: member of the public
Goal: pay my council tax
Reason: to avoid a fine

Once you have your user stories you can then map out your user journeys. User journeys help you to understand users’ behaviour and how they will interact with your website. Using the information collected from your user stories you can start to map out the series of steps your users will need to take to achieve their goal. Draw out their progression through your site and any decisions they may need to make. By thinking about the steps your users will take to progress through your site you’re anticipating their needs.

The aim in plotting out user journeys is to cover as many scenarios as possible – ensuring that the user achieves their goal, whatever course they decide to take. When creating user journeys you can also include what device the user is using, and what emotional state they are in at each step. For example, they may have purchased a vase from an online shop, but it arrived broken. They want to report it as broken and get a refund. They are annoyed that the vase is broken at the start of the journey, but you may be able to change this emotion into a happier one, through good UX and by anticipating their expectations. By making it easy for the user to report the broken vase and a get a refund, you are making that journey a pleasant one.

Try UXPressia for templates and guidance.

Card sorting

A favourite of mine, card sorting. Card sorting is used to group pages into a logical order, to aid with creating an information architecture (IA). There are different methods, including open and closed card sorting. Open card sorting is where your group will put the pages into logical groups, then name the group. Closed card sorting involves prefixing group names before adding pages are under the most relevant one. Another twist to this it to do silent card sorting, this ensures people are not influenced by others. Group names are placed around the room and, without talking, everyone places their cards face down under the most relevant group title. This way no one is influenced by what others are doing – they have to go off their own judgment. Once everyone is finished you simply turn them all over and see how well they matched up. You’ll need card or post it notes, flip chart paper, and glue to stick them in place.

Smashing Magazine have some great information on card sorting

Wireframing

Wireframes are a visual representation of priorities and layout. They allow you to easily move things around the page, before you get too deep into the design phase. 

You can spend as long as you want on wireframing, but at the discovery stage you are looking for quantity not quality. Yes, you read that correctly. The reason is that you want to generate as many ideas as possible, and then whittle down what doesn't work. 

"

"When you get to the design phase, your findings will form the foundations of your design. If you base your design on the results of your research, everything will have a purpose and a reason for being where it should be."

"

6-up is a great way to get those creative juices flowing. Give people a piece of paper with a grid, dividing the paper into six equal boxes, and a pencil. Give the group six minutes to draw six wireframes for the same page. This way they are forced to think of different things and come up with new ideas.

2-up is then used to narrow down what they thought worked well in 6-up. Do the same as 6-up, but with a grid making two equal boxes, and two minutes to create two different wireframes.

Finally, split the room into small groups to create one big wireframe. Allow time for each each member to explain their 2-up to the group and why they choose that layout. Using the best bits from everyone, groups should create one wireframe, on a piece of flipchart paper, so more detail can be added. Give the groups 10 minutes to complete this exercise, along with some flipchart paper, to allow for more detail. At the end ask them to present their wireframe and explain their decisions to everyone in the room.

With some of these simple exercises, you'll really start to understand who your website is for. Based on your findings from the card sorting exercise you can start working on the first draft of your information architecture (IA). Once in place, test it against your personas, user stories, and user journeys. Use the user stories to see if you can navigate your way through your new IA to achieve the goal. You may find you are missing a few pages along the way. Don’t sweat it, that’s what this phase is all about – finding out what works well, but also finding as many holes as possible, so your users don’t.

Wireframes should also be tested against your personas, user stories, and journeys – again to make sure the user can see what they should read or click on to achieve their goal. When you get to the design phase, your findings will form the foundations of your design. If you base your design on the results of your research, everything will have a purpose and a reason for being where it should be. Just like an architect designing a house, and then the interior designer decorating it to make it not only functional, but beautiful too.

Finally, remember, a website built to the requirements of your staff is called an intranet ;)

Subscribe to our stories 

Louise Howells

About the Author

Louise is a professional services manager here at Zengenti. She looks after the Coach House team, as they design, build, customise, and deploy websites for clients. Her background is in user experience and local-government web systems, working in IT for over ten years.

 

Follow Louise

More stories from Zengenti