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%.