Case study: Derby Museums

Redesigned website for Derby Museums, a Museum Trust with three different locations within the city

The client

Derby Museums is an independent charity organisation consisting of three museums in locations across Derby city centre.

The Challenge

The existing website was a template website that was no longer working for them. They wanted more control of their content and needed a refreshed look that better reflected their brand.

The navigation of the existing website was difficult to use both from a usability and accessibility perspective and visitors were struggling to find the information they needed.

My approach

Open and inclusive design

For this project we agreed with our client before any work was undertaken to document the process online. Our client was very open to this, having publicly shared other museum projects and it meant that both museum staff and visitors who were interested in the process could follow along with the project.

Screenshot of Tumblr page
All outcomes from research to design were documented on a Tumblr blog.

Research sessions

User research
The project began by conducting user research sessions with both visitors to a museum event (who were not always regular visitors). By speaking to visitors I gained vital information of what their needs and objectives were when using the website.

My team conduced research at a museum event that was aimed at general members of the public, rather than museum patrons. Interestingly when speaking to visitors, we received more honest feedback than museum staff conducting similar research. When people were asked if they visited the museum sites often, there were many cases of awkward ‘not as much I should’ responses. When asked the same question by museum staff, responses were much more positive.

We created various activities to better understand our audience. We had a simple survey for adults to tell us what the most important information they wanted on the website would be. I then made this information into graphic to share with the stakeholders. We also created child-friendly activities, including a drawing sheet so that younger children could tell us what they wanted to do at the museum sites.

User research day

Staff research
The staff session was really helpful in getting suggestions on what they would like to see on the website but, more importantly, gave insight into areas of the museum visiting experience that visitors didn’t like. This helped us to create content that addressed issues early on to make the visiting experience as positive as possible.

We conducted the research at one of the museum sites to make it as easy as possible for staff members to talk to us. We created an ideas/content generation wall where we recorded observations and ideas that staff had about the current website and visitor behaviour.

Once research had been done, we organised these ideas by category in a session with our stakeholders. The best ideas were then taken and included in the content plan.

Interviewing a member of staff

Wireframing and prototyping

Paper prototype
For this project I used paper prototyping rather than InVision. The reason for this was that our clients were very hands-on and wanted to be involved with the process. An advantage of working with paper prototypes is that our stakeholders felt that they could make changes to the layout as we could draw directly onto the design. Another advantage was that because they are hand-drawn, there are no styles so the focus was completely on the layout and functionality.

Photo of paper prototypes

I’ve explained the process more throughly in Paper Prototypes: What are they and why use them?

Having agreed the wireframe prototype with our stakeholders, I photographed them and, with the frontend developer created an annotated functional spec.

HTML prototype
Once the paper prototypes had been approved, we produced a simple html prototype so we and our clients could test the functionality and send it out internally for testing.

We collated the feedback and went through it with our stakeholders to identify the most pressing and important pieces of feedback to reiterate and retest.

UI design

Style tile
At the same time as coding the html prototype, I worked on the visual style for the website by producing a style tile. This showed design choices such as colour, text styles, button styles, image treatment etc.

Accessible UI
In order for the website to be as accessible as possible, I created a second darker style which has higher contrast. This makes text easier to read for people with certain types of visual impairments.

I also needed to adjust some of the brand colours to ensure colour contrast and readability of text over colours. I created tints and shades of the core brand colours so that dark or light text always passed WCAG guidelines.

High-contrast UI version

Responsive UI
Each module of the website was designed to look great on any size screen. I designed elements across several break points and these were accessible on the html prototype.

Modular UI design
The box at the top right indicates the screen size of the browser through the yellow highlight.

Design details

Opening times tab
From research with museum visitors, we had found that they found the opening times of the different locations difficult to find on the existing website. Also each museum site has its own set of opening times so visitors were not always sure when the museums were open.

Knowing that this was information that came out as the most important to users, I designed an opening times tab which sits at the top of the website (and perpetual footer link on mobile) so users always have quick access to the opening times.

The opening times tab appears in the header for easy access

Find the door
From research with museum staff, we discovered that the Visitor Services Assistants had received in-person complaints from visitors who had struggled to find the entrance to the museums (this had happened across all three sites). Having acquired this information, when we were planning content with the clients we came up with a “find the door” section of the visitor information page for each location. The more helpful information we can provide on the website, the better the visiting experience should be.

Screengrab of the find the door section

Easter eggs
We were tasked with adding Easter Eggs into the website to take it away from the corporate template and make it a fun experience to use. One of the Easter Eggs appears when a user clicks on the bug photo on the Nature Gallery page, little spiders and fly wander across their screen. After user testing this, we added a warning that users had to opt-in to so we didn’t accidentally terrify any Arachnophobic users!

Easter egg where the user clicks on the image and spiders walk across the screen

Outcomes

The existing website wasn’t encouraging visitors to donate to the museum. By introducing a supporter story page with information on how donations were spent, donations were up 133% within the first three months of launch.

Additional results included a reduced bounce rate, down 24.78%; page load time, down 67.66%; pages per session, up 38.43%; and, by adding an additional email sign-up form on the What’s on section, email sign-ups were up 3350%.

Open and inclusive web design

The most difficult challenge posed by any web project is that of getting the web team and clients to work really well together. Often, all those involved – clients, project managers, designers and developers – have different ideas and expectations. With so many opinions about what the end product should look like and deliver, websites can suffer from “too many cooks”, with a resulting confusion of content and ideas.

Frustration can ensue for both web team and client when neither has a clear understanding of the other’s aspirations and expectations. Each party can feel as though the other is not listening to them and, when the resulting website is assembled through compromises, neither side is completely satisfied with the outcome. This is not what I want web design to be like. The process shouldn’t be about them and us. So what can we do to avoid it?

For a recent project, we decided to throw open the doors of the web design process and see if we could make a better website by making everything open and public. Our client, Derby Museums, already work on projects using Human-Centred Design, so they were really keen to work this way. From the get-go, we decided to document the process online. We set up a Tumblr page and uploaded user research, meeting agendas and outcomes, updates, sitemap, wireframes and visual design. We shared the link on social media and encouraged visitors to get involved and follow the development of the redesigned site.

Our method of open and inclusive design featured a lot of research, both with the public and members of staff. We spent a day at an event at a museum site speaking to visitors about their needs for the website and charting and sharing the results.

We also spent a day speaking to staff at one of the museum sites. We felt it was important to be at their place of work so they could easily come and talk to us about their ideas. We recorded every suggestion and worked out which ones were going to be included in the redesign.

Focusing on listening to our client’s visitors and employees was an essential part of this project. Our web team worked closely with our client and made decisions based on all suggestions and research feedback. We avoided compromises forced by late suggestions and lack of research, ideas were agreed and decided by the core team.

Being inclusive doesn’t mean that you end up with a website designed by committee. Dangers arise when people outside of the team feel left out of the process so that, if they are in a position to make changes, they often will. If they can’t make their opinions known, then they might resent the redesigned website. Just letting people know that we genuinely wanted to make the best website for everyone meant that they wanted to help.

There have been some really positive outcomes of working openly and inclusively. Our design team had really honest conversations with visitors and staff who could speak to us anonymously, letting us know their problems with the current website and ideas for improvement.

We also had great suggestions from front-line staff. They are the ones who talk to visitors, know what they like and have to deal with complaints. In other sectors, it might be a call centre, sales team or reception staff, but it is worth talking to the people working here as they often receive different feedback from customers than your commissioning client.

One problem we were told about from front-line staff was that visitors were struggling to find the entrances to the museums. A simple solution to this was to add ‘find the door’ to the website, a short description and photo of the entrance so that visitors get this information in advance. It might not seem as though signage to the museums’ locations is the responsibility of the website, but if we can improve a visit to the physical site by giving the right information on the website, then we’re improving experience overall.  

In order to make truly effective websites, we need great communication. How can we design something without knowing what the needs of the users and potential users are, as well as the needs of the client organisation across the board, not just the person or team commissioning the project? It might be a little harder and take a little longer, but I feel that designing openly and inclusively is what we need to do to make the best websites for our clients and their users. (And it’s a lot more fun too!)

First published in Net magazine issue 284, September 2016

Understanding user goals to design better websites

In retail the saying goes, “the customer is always right”. Whether or not this is always the case, this sentiment often makes its way over to web design. If we treat our clients as customers, are they also “always right”? Possibly. But when web designers treat their client as the customer, they’re in danger of overlooking the end user.

To design truly effective website for clients, the designer must design for the client’s audience and that means understanding the audience’s needs. Often web projects begin with a brief from the client that covers the client’s goals for the website. This is obviously important as the website must support the business goals but it shouldn’t make up the whole brief and direction of the project. Finding out the audience’s needs should take equal prominence as they are the ones who will ultimately choose whether to buy that item, sign up to that service or go to that event. Oh and here’s the thing: often client goals and audience goals are poles apart.

So how can a web designer create a website that works for both the client and their audience? An important stage of the web design process is research. When web designers design websites based only on their client’s brief without conducting their own research, they only understand part of the story. Maybe the client is profit-focussed and the audience is information-focussed. The client expects that the audience will find value with them and spend money, but they haven’t given compelling reasons to the audience to do this. By designing websites based exclusively on the client’s goals, the website has not been designed to meet audience needs, so is likely to be less effective.

So how should a web team go about conducting their own research? In a large agency, this would be done by a UX (User Experience) specialist or a team of UX designers. But small teams or individuals should also being doing this, it might just be done more simply. Sometimes it seems that UX is a luxury that only large agencies can afford, smaller companies can be scared of doing UX if they don’t have a dedicated designer. But there are a number of easy things that any web designer can do to make sure they understand their client’s audience.

Talk to people

To begin to understand the client’s audience, all it really takes is investing time to get to know them. Speaking directly to your client’s audience is the best thing that you can do and there are a number of things you can do get gather information. If your client has a physical location then go there and speak to their customers or visitors. A huge advantage of this, I’ve found, is that the audience is more likely to be honest with you, as a third party, than with your client. I found this whilst researching at a client’s event, the answers I received about the organisation were different to those asked by employees of the organisation. Another advantage is that most of the time, people are pleased to be asked for their opinions, it shows that you and your client care. This makes people feel more involved and less likely to dislike the redesigned website just because it is different.

If your client is only online, there are still ways to get feedback from their audience. Ask your client to send out a survey, speak to their audience on the phone, or ask their audience what they want from the new website over social media.

In additional to speaking to your client’s audience, another group of people to talk to is frontline staff. This might be a sales team, call centre staff, receptionist, visitor services assistants or staff that deal directly with your audience in another way. These people have a deep understanding of your client’s audience. They speak to them directly, field their complaints, hear about successes, failures and everything in between.

For a project I worked on for a local museum, I spent time at the museum speaking to staff. A visitor services member of staff told me that sometimes visitors struggled to find the entrance to the museum, this had happened on multiple occasions. Not being able to find the door didn’t give the visitors an initial positive experience and they complained to the member of staff. After hearing this, a really easy solution was to add a ‘find the door’ section to the visitor information on the site. It included a photo of the entrance and a brief description of how to access the building. Now, it might not seem to be the responsibility of the web designer to address problems like these within the client’s organisation, but improving a visitor’s experience by providing more helpful information on the website means that the visitor has a better experience overall. As a side note, I was in an art gallery a few days after we thought about ‘find the door’ and overheard a visitor complaining that they couldn’t find the entrance. Through audience research, you may uncover something simple, but it could be a common problem that no-one else has noticed yet.

Questions to ask

So now you know who to talk to, what do you ask them? The main outcome you are looking for is finding out what the audience wants to do on the client’s website, the user goals. You can ask open, but not leading, questions such as “What’s the most important thing you want to do when going on the website?” or “What’s the main reason for using the website?” You can also create a survey where you list key pages on the website and ask people to number the pages in order of the most important to them. Ask questions to narrow down the user goals into 2–4 main goals. If a common answer to “What’s the main reason for using the website?” is “To find out when events are on near me” then this would become a main user goal for the website.

In addition to finding out what the user goals are, it is also important to find out problems that the audience has with using the existing website or with the organisation itself. Addressing these problems before the planning and content stages take place means that they can be addressed in the website redesign to help the audience have better user experiences with the new website.

Once the key user goals have been established, they can be mapped to the business goals. We can look at how they work together and if they are very different how we can start to align them. For example if the client’s goal is to get people subscribing to their services, but most users are looking for information before buying, then high pressure sales is not going to be effective for either party. Perhaps instead, the client provides a free trial of the subscription to let their audience try it out. This puts control in the user’s hands and they can choose to subscribe if they find the service useful. In this case both goals are being met and the client is more likely to get the sale.

These are just some simple ways to research your client’s audience, you can do much more detailed research but if you are not primarily a UX designer, then this should be a good start. Further documents can be produced such as user personas and journey maps, I’d recommend doing this, but for a small team having the audience research will be very helpful to the project as it develops.

After the research stage has been done, the design brief should be written by someone in the design team, it should address the client’s initial brief but it’s ok to change the brief (of course you’ll want your client to sign off on your new brief) based on your research. The design brief should include: the client’s business goals; the user goals; the target audience demographic, age, gender, location; look and feel; content requirements; technical requirements; plus anything else relevant to the project.

Having good, solid research means that the design brief that the team works to is based on real user needs and addresses goals for the website from both the client and their audience. Having research can also be really helpful in later stages of the project. When the wireframes are being tested, everyone can keep the user in mind. Does the website layout and structure aid user goals? When the visual design is being discussed, the end user should be central to the consideration. This can make it easier for the client to step into their user’s shoes and see the website from their audience’s perspective and not just their own, meaning that the visual styling is not in just the client’s or designer’s taste. In short, good research can help build more effective websites for your client and their audience and help backup design decisions throughout the process.