The British Museum

Role: UX Researcher, UX Designer, UI Designer

One of the challenges museums face today is how to stay relevant and connected with their audiences. In order to continue to appeal to a younger generation, it’s important that museums come up with creative technological solutions to communicate to a broader group of people. I wanted to help bridge that gap and provide an app that could elevate the experience of going to a museum and increase user engagement. 

From the ages of 6 - 18, I grew up in a suburb of London, England. A defining institution in my life was the British Museum. Whether it was class trips, weekends with my family, or simply strolling through it with friends, this museum featured heavily in my formative years. Therefore, I wanted to use the British Museum as the subject of the app.

The Challenge? How do you increase user engagement at a museum, without distracting from the museum itself? 

Research: Discovery

Do people even like museums?

I was making a pretty big assumption with this challenge. Do people even go to museums anymore? I sat down with people from different age groups, from those who are in their early twenties, up to those nearing 60 years old and asked them: Do you like going to museums? 

Turns out that most people did! It was something they typically did when travelling, and a lot of people used it as a fun thing to do for a day with friends, a good date idea, and a great day activity to take your kids to. 
So what was making it a less than awesome experience? During my one on one interviews and surveys there was a large pattern emerging. People didn’t like the lines, crowds and feeling lost. People became frustrated by spending all of their time waiting to see a piece, or trying to navigate the museum in order to see it in the first place. Museum maps were a HUGE pain point with the research participants (not really shocking right?), so I knew that a good chunk of my app would need to focus on convenience regarding avoiding crowds, and on how to provide an easy to use and custom navigation system.  

On the flip side, museums that really made their mark on people were those that used interactivity in order to heighten the experience. Examples such as science museum experiments that you could participate in, or the Victorian Albert's use of visual and auditory cues when you approach items in an exhibit were mentioned as examples. Therefore, in order to add value to the experience, the app would need to incorporate ways to alleviate the pains while attending the museum, and also adding value to the experience by leveraging interactivity. Here are some other insights that I received from my user research.

So I thought to myself, how can I address pain points, while creating an interactive immersive experience that teaches them something new?

After reviewing the research, I knew that I had to incorporate certain features: 

1) A map that was localized to where that person was in the museum. Additionally, the ability to use that map to get directions to anywhere in the museum. 
2) The ability to plan your day to maximize the time spent there. The app could recommend a list of activities to do based on criteria like: time you have in the museum, interests, highlights etc. Additionally, by creating a day plan, you could determine your schedule ahead of time.
3) A virtual queue system (similar to Disneyland) in order to create crowd control and allow people the ability to avoid lines and plan their day accordingly. 
4) Incorporate guided audio tours and interactivity in the form of AR to allow for a more immersive and engaging experience. 

Research: Strategy

What types of people would use this app?

With these research findings in mind, I wanted to humanize the design process. I needed to synthesize my research into the different kinds of people who would use this app in order to make sure that when I was making design decisions, I was keeping in mind these people’s motivations, needs and pains. Therefore, using the information I had, I created; Georgia, Charlie, Miranda and Zach.  

A quick note about Zach. He is a provisional persona as my research did not support his creation (my research pool was limited and I did not speak to people with families), however, I know that Zach would be a potential user for this app. I did not move forward with making design decisions specifically geared towards families and children, as my research did not support this, but if I had the chance to expand upon this project, I would want to research this more in depth and expand the app with family friendly features.

Planning: Organization

Where would people go to find their tickets?

Before jumping straight into wireframing, I wanted to have a guideline on how a user would flow through the app and what screens needed to be included and what content needed to be on those screens. Therefore, I decided I needed to produce a sitemap in order to organize my efforts. However, when I sat down to determine the site organization I was stumped. Where would people go to find information on their tickets, what about finding information on a piece etc? In order to better understand this, I conducted a card sorting exercise where participants sorted 28 tasks into navigation buckets. This exercise helped me understand typical locations and screens that people would access in order to find out more information on a piece, or how they would find their tickets to an exhibit, etc.  

I used this information to build a formative site map. Which then in turn, helped me organize my wireframes and determine what I needed to build on the screens, and what screens needed to be linked together. However, my original site map wasn’t perfect. My early usability testing completed with my low fi wireframes showcased that once placed into the context of the app, users were looking for items in different areas than before. Therefore, I would have to go through several iterations of the site map, in order to make the organization flow as seamlessly as possible. The below, is the final version of the map.

Design: Low Fidelity Wireframes

What content will be on what page?

So now I had the features I wanted to include, and the general organization, it was time to start wireframing! I got to work and put together some initial designs.

Full Low Fidelity Wireframes

Design: Usability Testing

How do people keep missing the large bold button in the middle of the screen?

Before I introduced color, images and extensive copy, I wanted to understand how usable the app actually was. Therefore, I conducted my first round of usability testing. As with all usability testing, I was amazed by how differently I thought than the rest of the world. 

My biggest takeaway in most of these projects was the importance of usability testing, and not to underestimate how well people have been trained to scan for items. They will miss the big red button in the middle of the screen if it isn’t where they were expecting it to be. Therefore, I found myself having to change items of my initial designs to better accommodate those expectations or to make the visual cues more obvious. Here are some examples of iterations I had to make on my low fidelity wireframes in order to make them more navigable.

Design: UI Kit

What colors seem to imply a sense of tradition and history, while also saying hey I’m an easy to use app!

The British Museum has a specific set of design guidelines. I wanted to stay within their guidelines in order to make the app feel as though it were a part of the brand - therefore giving people a sense of congruency - but I also wanted to add my own spin to it. I wanted the app to be approachable and friendly looking, while retaining a sense of dignity that would need to be retained to be seen as apart of the museum's branding. Therefore, I stuck with their black and white color combination, while also adding dashes of bright colors (with a heavy emphasis on yellow and an orangey red to make it feel approachable), a lot of negative white space to make it easy to read while on the go, and I tried to have images pop off the page in an effort to grab attention and look visually appealing. 

Once I had an idea about the general layout, color scheme, and overall feeling for the app I needed to organize myself. I create a UI kit to help myself when designing, but also to make the visual style easy for somebody else to incorporate.

Design: High Fidelity Wireframes

What solutions did I come up with?

So how did it all flow together? Well, below, you will find that I have showcased high fidelity wireframe flows that address specific research findings. Please note that these are only a select few of the many flows I designed for, but I wanted to give you an idea about my thought process for solving some of these concerns/motivations. If you want to check the app in full detail, there will be a prototype you can use in the next section.

Research Finding: Gain - Interactivity and learning something new

One of the goals museum goers had would be to learn something new while at a museum. Additionally, some people had nostalgic memories of interactivity and fun at the museum! In order to bring interactivity and immersion to their experience, I decided upon using AR as I have seen it effectively used in places like Disneyland to engage users while waiting in lines. In order to do this effectively for a museum, I introduced an easter egg system. In this system, users would see the cube icon (in this example, on an audio tour) which would clue them in that there was a hidden secret on this piece. What if you were in an exhibit about Egyptian Mummies and clicked on the cube icon? You would be directed to hold up your phone and the AR would unveil the hidden mummy underneath. In this way, users could experience the museum on a different level and have a more intimate knowledge of the pieces than they would otherwise have.

Research Finding: Pain - Large Crowds / Waiting in Line

People wanted to maximize their time spent at the museum, and additionally avoid large crowds. Therefore, the solution I came with in order to solve this was to build a virtual queue system. The idea is simple, users could add themselves to a virtual queue for pieces/exhibits that had long lines. Then, they could wander the rest of the museum while they “waited” in line. Once their group was called, they would get a push notification alerting them that their group was up and to make their way to the exhibit/piece. From there, they would show a QR code to the attendant who would let them in. If you notice, there is also a time limit for when the code would remain active. This is to ensure that people did not hold onto these codes all day, and remove the effectiveness of the crowd control.

Avoiding large crowds

People wanted to maximize their time spent at the museum, and additionally avoid large crowds. Therefore, I decided to create a virtual queue system. The users could add themselves to virtual queue for pieces/exhibits that had long lines. Then, they could wander the rest of the museum and get a push notification when they had reached the front of the virtual queue.

Research Finding: Goal - Seeing highlights

How many times have you been to a museum and couldn't find the one piece that you most wanted to see/the museum's most famous piece? I wanted my app to provide people with an easy navigation system to find those key pieces. The animation showcases a user using the search system to get location specific directions to a piece. From there, the map screen pops up and the dot would move with the user as they navigate the museum to the piece. Additionally, if you were looking at the map and found a piece that you wanted to get directions to, you could access the piece's page via the map and get directions from there.

Research Finding: Pain - Getting lost in the museum

One resounding piece of feedback I got was how hard it was to navigate in a museum with maps. People often got lost, or felt overwhelmed by the amount of content. This led a lot of people to wander the museum aimlessly not knowing what to look at and feeling disheartened. Therefore, I thought to myself, how can I people wander a museum but still know where they are and what they are looking at? Therefore, I decided to extend the AR to navigation as well. If you used the normal map mode, you would find a system similar to google maps to provide directions to whatever you wanted in the museum (bathrooms, pieces, food etc.). Additionally, you could switch it to AR mode and follow directions in that sense, or simply use it to click on pieces as you walked to be able to uncover more information and see it in a more convenient and accessible format. Don’t want to approach a large crowd of people by a piece to see the information on it? No problem, hold up your phone, scan the object and the piece information will show up on your app.

Getting lost in the museum

One resounding piece of feedback I got was how hard it was to navigate in a museum with maps. People often got lost, or felt overwhelmed by the amount of content. Therefore, I wanted to make the map easier to use (and was showing your current position like an apple/google map), but also create an alternative to the bland map idea. Therefore, I came up with an AR browse mode. In this mode, you could wander the museum by holding your phone up and seeing interactable objects as you browsed (or use it to get directions). An alternative use for this could also be a solution to large crowds. Maybe there’s a lot of people in front of a piece so you can’t see the note about it. No problem, pull out this mode, hold your phone up and click on the more info button to see all of the information on the piece.

Prototype

See it in action!

Do you want to see how this works yourself? Try it below! Please note that this prototype is not a fully built out app, therefore, if you click on something and it doesn’t take you somewhere, that is not a built out function/screen. 

Prototype

Reflection

Next Steps

I believe that there are many ways that the app could continue to improve, and differentiate itself as a unique experience within the museum. Below, I outline some of the ideas that I would look into next, or ways that the app would need to roll out - but I have so many more.