Bristol Museums, Galleries & Archives

The home of Banksy

Bristol Museums, Galleries and Archives (BMGA) is a group of five museums and galleries and Bristol Record Office. We’d been talking to Zak from the group for some time about the potential of working with his team on a new site and we were delighted when they contracted us to work with them on a discovery phase and the design and development of a new site to showcase the fantastic museums and record office.

View the project

It started with a workshop

We started the project by inviting key stakeholders at BMGA to a workshop where we discussed and identified aspects and elements of the project and the wider organisation in which it sits. Everything went onto Post-it notes which we then organised into groups to create an affinity map. This exercise helped us and BMGA to surface and discuss aspects of the project and the organisation.

Affinity mapping

Affinity mapping in a project kickoff workshop helps us to work together with an organisation to identify and explore aspects of the project and to map those aspects in the project space and beyond. Working collaboratively to organise everything into groups helps us all to start to understand and define what the project is trying to achieve and what it means for the project to be successful.

The initial workshops with Bristol Museums helped shape the project direction, narrow the focus and fully involve the organisation’s stakeholders in the project

User research was key

Whilst we’ discussed users and what they might be trying to achieve in the kickoff, we wanted to test and validate the assumptions we’d made by completing some user research.

We were really pleased to discover that the museum had a wealth of user research data at its disposal along with an expert in the shape of Fay Curtis who helped us to get to the useful stuff and interpret it. Even better, we discovered that museums across the UK and beyond are great at gathering, collating and interpreting useful user research and sharing and discussing it openly.

Set phase(rs) to One

For phase one of development, we were guided by a review of a piece of research called Let’s Get Real 2. This focussed our efforts on the basics for visitors such as location, opening times, and exhibition and event details. To further back this work up, we spent a day in the museum talking to and observing visitors and visitor services staff.

Let's go sketching and prototyping

We did a lot of sketching throughout the project to explore and convey quick ideas before implementing them in an interactive prototype. Sketching allowed us to work collaboratively on details that could have otherwise been overlooked such as how to display opening times which vary from museum to museum and at different times of the year.

The interactive prototype allowed us to fully explore, visualise and user test the structure of the site, the navigation and other features which help users to find what they’re looking for, and a wide range of content and interactive elements across the site. As the prototype is responsive, we were able to do all this across devices with different sizes and methods of interaction.

View the interactive prototype

Our prototype evolved as we observed real users presented with a variety of tasks using it: What can you do this weekend with your friends?’, How do you contact the M Shed?, How do you buy tickets for the current exhibition?

Getting visual

We focused on aligning, condensing, and simplifying each individual museum brand into one larger set of design rules that would encompass all the museums without losing any of their individual characters and charms. From there, we worked with the prototype revisions to design a system of elements, rather than page templates, that would allow for variation and growth of the layout and structure over time.

MShed Typography Blaise Castle and Lodge Interior
Eagle Painting
Bristol Museums Brand Colouring

Designed in a pattern library

We designed and developed almost exclusively within the framework of a pattern library. This library formed a central point of reference for the project, allowing the whole project team to see what we were working on as we progressed.

This allowed us to design and iterate quickly, as well as allowing for modules to be developed independently from templates and the site as a whole.

View the pattern library

Ready to roam

The user research had told us that lots of potential museum visitors would leave finding out about a museum they planned to visit until the last minute. This meant building a site where all the content for a museum is fully and easily accessible across devices. We also wanted the site to load efficiently and quickly and still present all the museums and the record office in a compelling way.

Amongst other things, this meant building a navigation that adapts to different screen sizes and interaction methods, using methods such as SVG which allow us to present museum logos which scale and maintain their quality across devices, and selective and appropriate loading of images and media across different devices.

Five museums. One website. Four months

We’re really proud of the fact that all the steps and processes described here were completed and the brand new website for five museums and Bristol Record Office was launched within four months of the kickoff. We think this is because of the collaborative, iterative, lightweight and efficient way the whole team worked.

Browser Bristol Museums

Take a look

View the project