User experience design on new.shropshire.gov.uk

As you may know we are busy working on a new shropshire.gov.uk. If you didn’t know, where have you been? Check out these articles to get up to speed. Go on, I’ll wait....

As mentioned in previous posts we are completely redeveloping shropshire.gov.uk, starting with Libraries. Part of this overhaul is to look at the user experience (UX). UX (from wikipedia) is:

the way a person feels about using a product, system or service

Our aim is to provide the user with best experience we can possibly give them allowing them to do what they want quickly and easily. The new design should be forgiving if they make a wrong turn and be intuitive enough so they should be able to figure it out for themselves.

Carrying out the UX work

The first thing we looked at was the website statistics for library pages over the past 12 months. We paid particular attention to customer journeys; where they land on the site, where they go and where they leave. For example: we found that the majority of users access the library catalogue to renew books.

We have decided, based on our observations that tasks and services are more important to our customers than general information. So we are going to organise the website around the most popular tasks.

We have also taken it a step further by looking into the number of transactions that have been completed on the website, how many phone calls our Customer Service Center have taken and how many of those were things the customer could have done themselves on the website.

Going Undercover

After scrutinising the statistics and customer service enquiries we decided we needed to get a better understanding of what the library service actually do by getting closer to the customers.  I was surprised to learn that not only could you borrow books but you could use the computers, scan items, print documents, read the paper and even attend the many events libraries host all over the county.

So like undercover detectives we posed as librarians for the afternoon at Shrewsbury Library. We asked the staff everything you could think off “What did the customer phone for?” “Is the information available online?, “Do you recommend that people reserve books online?”, “Do you give new members information about what they can do on the website?”.

Now we understood the library service and it’s customers better we were able to create personas that described typical users.  We generalised the customers into around 6 groups and created a fictional person to represent the group. For example; ‘Mother and Baby’ - Sarah is looking for free baby groups to join, as she would like to meet new mums and borrow children’s books. She buys her groceries online and has a smart phone.

Using these personas this would allow all the library service, the content team and the web team to share a genuine view of the customers. So that under any situation when testing the website we could pull out one of the personas to ensure it met their needs.  We'll go into our Personas in more detail in a future blog post.

Creating a Draft Information Architecture

Using our findings we created a draft information architecture (IA) that would allow the customer to perform any of the tasks the library currently has to offer online without a tiresome navigation. Trying to ensure that the journey never broke and allowed them to navigate to the most popular tasks from any page with ease. This also took into consideration the fact that people might make mistakes (we’re only human after all) they needed to be able to find the way back.

To put our theory to the test we decided try it out on a few unsuspecting colleagues around the office. We threw together a quick HTML prototype and stalked the corridors of Shirehall with an iPad and a smile, asking people to navigate around watching how they got to their destination page and looking out for common trends and mistakes. This allowed us to figure out what worked well and what didn’t work so well. This allowed us to start with a rough idea and test it early, and iterate on it to improve it quickly.

With a draft IA in place we created some draft wireframes taking into consideration everything we had already collected and observed. We had discussions on what should feature as a priority on each page, what needed to catch the customer’s eye and came up with several different ways to display the information on the screen. We worked through problems such as where should the phone number go? Should we include a map? How will users find their nearest library?

The next step is for our content team to start looking at each pages in more detail, using content plans and page tables, and for our designers to take the draft wireframes and flesh them out into HTML mockups.

We are still working hard on the project and hope to get something for you to see in April so don’t forget to signup for updates about the project at new.shropshire.gov.uk.