MOBILIZING THE MET
Uncertain times challenge the MET to go mobile
In 2021 due to the ongoing Covid-19 Pandemic the Metropolitan Museum of Art recognized the need to make it easier for art lovers to discover and purchase tickets to upcoming exhibits. As part of an initiative to manage capacity and create greater accessibility to their world class collections they made the decision to develop a dedicated mobile app.
Project Duration: April - August 2021
Project Type: Dedicated Mobile App (Case Study)
Role: Product Designer
Software: Figma
On average, the MET welcomes over 5 million people per year comprised of international visitors from across the globe and over 200, 000 New York city students. However, in 2019 the global covid pandemic had a catastrophic effect on those numbers. By 2020 the Museum was forced to close it's doors for over 220 days as covid ravaged New York and put a halt to virtually all global travel resulting in an 83 percent drop in visitors compared to the prior year.
A Covid Catastrophe
The Solution
Going Mobile
In 2021 New York city and world began to open back up. The MET knew it was crucial to make it easier than ever to invite visitors back through their doors. Due to strict capacity restrictions managing the number of guests to exhibits became a top priority. To solve this problem and to ensure visitors would be able to explore upcoming exhibits, the MET decided to develop a dedicated mobile app for browsing, purchasing, and storing digital tickets.
The Problem
Exploratory Research
Diving in
The goal had been set, the vision laid out, but where to begin? The first step in our process was to get a handle on the user. In order to create a product and experience that was great for users we needed to unearth their needs and pain points.
​
The process began with exploratory research in the form of surveys and interviews. The primary user group identified for this was adult art lovers that frequent museums and galleries.
Some of the key areas focused on in this research were:
• Perceptions of safety in regards to covid and public spaces
• Methods used for discovering and purchasing tickets to events
• Planning practices when attending venues with limited capacity
• Desired features for a dedicated mobile app
Key Insights
Users prefer to purchase tickets in advance to guarantee attendance
1
Despite covid related health concerns, users were eager to get back to attending community and social events
2
Users prefer to use mobile for search and discovery of events, but often end up using desktop based web browsers
3
Users prefer digital passes as opposed to printed tickets
4
User Personas
Laying the foundation
Now that we had a solid idea of what our users wanted and who our users were we went ahead and visualized that info with empathy maps, user journeys, and personas. This gave us a point of reference to ensure we stayed on track once as we moved forward.
​
We mapped several user journeys such as receiving a marketing email from the MET, downloading the new app, and then browsing and purchasing tickets to an upcoming exhibit. This step was instrumental in putting ourselves in the users shoes to think of all the individual actions and emotions a user might experience in a given user flow.
​
User personas were also created at this stage to keep our users needs and pain points front and centre. Our exploratory research unearthed several key points to focus on such as the preference to use mobile when available, digital passes as opposed to printed, and the ability to purchase tickets in advance instead of at the door.
Paper Sketches
Early sketch of the Calendar screen
Starting the Design
It all started with a simple sketch scribbled on the back of a restaurant napkin.... just kidding, we'll leave the napkin drawing to Bjarke Ingels. During the design phase of the project we started with paper sketches and wireframes which allowed us to rapidly ideate while we explored a variety of ideas. Thanks to our first round of research we knew it was important to give users high visibility on current and upcoming exhibits. After sketching out dozens of the "Exhibits" and "Calendar" screens we aggregated the best ideas into our first digital wireframes. Digital wireframes allowed us to further refine our design ensuring we hadn't missed any screens in the user flow.
​
After the digital wireframes had been completed it was time to move on to a low-fidelity prototype. We mapped out a user flow that involved opening the app, browsing the current and upcoming exhibits, selecting an upcoming exhibit, paying, then being returned to the home screen. Now that we had a working low-fi prototype it was the perfect time to check back in with our users and do another round of research.
​
In total, two rounds of usability studies were conducted. Findings from the first study provided us with valuable insights which guided design on our early mockups. The second study was conducted on a high-fidelity prototype which revealed additional insights to help us refine the design.
​
Usability Study Findings
Diving into the data
In total, two rounds of usability studies were conducted. Findings from the first study provided us with valuable insights which guided design on our early mockups. The second study was conducted on a high-fidelity prototype which revealed additional insights to help us refine the design.
Round 1
Low Fidelity Prototype
1
Users want a more obvious way to access the apps settings
2
Users want an easier way to select the date and time (calendar) for upcoming events
3
Users need a more automated experience for the loading screen when the app launches.
Round 2
High Fidelity Prototype
1
Users were confused by the "purchase details" confirmation screen
2
Purchases weren't showing under the purchases tab after completing a transaction
3
The addition of colour and imagery in the high fidelity prototype had a huge impact on the users ease of navigation. Which was a clear indicator of how reliant users are on colour and images for navigational cues.
Mockups
Finalizing Designs
Our usability studies were instrumental in shaping the finalized mockups that would be used in the High-Fidelity prototypes.
The "calendar" screen was an area that was revised specifically because of the feedback we had gathered. The initial calendar was crude and lacked a professional feel. In the revised version we customized a calendar from Material Design. This was a perfect example of a pain point we were able to address and overcome thanks to multiple rounds of usability studies.
Early low-fi prototype vs high-fidelity prototype
High Fidelity Prototype
The high-fidelity prototype was built in Figma. Click here to view it in action
High Fidelity Prototype
Mapping out the user flow of booking 2 tickets for Van Gogh on the 14th then paying with Apple pay. Experience it for yourself with the interactive prototype on the left.
Interactive High Fidelity Prototype
Accessibility
Equitable Design
A high contrast colour palette of white, black, grey and red was chosen for the app. This aligned with the MET's branding and also ensured users with visibility needs could easily use the app.
1
We used black text on a white background with a contrast ratio of 21/1. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. We also used a minimum font size of 14 in accordance with WCAG standards.
2
All images in the app were tagged with Alt text for users using screen readers. Additionally, we incorporated multiple ways to move from screen to screen when possible keeping in mind users with dexterity or motor skills challenges.
3
Screen Reader Friendly
1
2
3
4
5
6
7
8
9
10
11
Visual description of images
Defined content order
Defined content order
Defined semantic roles
(button, heading, menu, link etc..)
• Sequentially ordered from left to right
• Announced content
• Defined Anchors
Takeaways
Key Insights
• With limited capacity to many events, users want the ability to book things in advance
​
• Users are excited to get back out into the world and experience social events again but feel a sense of uncertainty in regards to large events and social gatherings
​
• Users love the ability to browse upcoming events and book them from their mobile device
​
• Once at an exhibit, people want to put their phones away and be immersed in the experience
​
• By creating a mobile app, the MET gave users some certainty amidst very uncertain times
​
• Users are increasingly more environmentally conscious and many expect features such as digital tickets as opposed to printed
Final Thoughts
This was my first UX project so I truly learned a lot. My biggest fear was that I wouldn't be able to create an app that people saw value in using. Fortunately, by conducting multiple rounds of usability testing I was able to gather valuable feedback and create value by staying focused on user centred design. One of the biggest challenges I encountered was my own pride as a designer. At one point I had built a prototype that was absolutely massive, I had put so much work into it. But when I took a step back and thought about the experience of the user, I realized it was way too much. At that point I swallowed my pride, blew it up, and started again from scratch. It was painful to toss aside so much hard work, but in the end I felt really good about the new streamlined prototype that was much more in line with what users needed. I knew at that point that I had made the right decision to start over again. I think my greatest takeaway from this project is to always remember I am designer for others and not for myself.