Project Summary
Reimagining a centralized platform as a one-stop convenient place for visitors to view ticket, exhibition, and event information at the MET.
Contribution
Research, Design, Wireframing, Prototyping
Team
Solo
Duration
Winter 2023, 6 weeks
Type
Personal Project
Tools
Figma
| OVERVIEW
What is The MET?
The Metropolitan Museum of Art, commonly known as The Met, is a world-famous art museum situated in New York City. It houses a vast and diverse collection of art and artifacts from various cultures and time periods, making it a must-visit destination for art enthusiasts and history buffs. With its iconic location on Fifth Avenue, The Met is a cultural institution that offers a rich and immersive exploration of human creativity and history.
The MET has a mobile app for users, however, it is maintained by a third-party service called Bloomberg Connects; an arts and culture app housing hundreds of museum spaces around the world.
As a result, there are extra steps to the onboarding process and how the user is presented with information from the museum.
Even though users have access to The MET’s resources on the mobile app, they are still directed to the browser website when purchasing tickets, browsing exhibition details, and viewing events.
The Problem
Why is the redesign important?
Visitors currently need to transition between platforms in order to onboard and explore the museum’s offerings. They need to search for The MET on Bloomberg Connects and navigate through various pages before purchasing tickets, finding a gallery, or using the museum map.
Museum visitors at The MET need a one-stop shop for ticket and exhibition information during their visit.
| DESK RESEARCH
Information from The MET’s website is not seamlessly connected with it’s mobile application.
Starting in 2014, The MET launched different versions of their app for Android and iOS devices. In 2016, The MET rebranded their website and added several new features within a nine-month time span. Issues about the museum map also prompted them to highlight 3 goals for their future website and mobile projects:
Emphasize The MET’s venues
Create a more responsive mobile app
Embody their institutional identity all on digital platforms
| COMPETITIVE ANALYSIS
What has The MET accomplished in the past?
The MET themselves benchmarked other museum apps from the Guggenheim, American Museum of Natural History, and the Museum of Modern Art (left to right). An existing digital map was housed on the web browser for The MET so designers decided to leverage what they had into something the app could use to display the gallery and collection locations.
| KEY TAKEAWAYS
MET Map Feature Comparison
How can The MET provide a convenient and centralized experience for museum visitors based on current features?
By understanding The MET’s backend implementation:
→ Provide regular visitors with central hub of information where they can customize their search efficiently with current knowledge of the website format.
→ Familiarize individuals who have not visited The MET with an easily accessible platform to explore the museum’s offerings.
→ Ensure changes from the backend perspective are in-service to the user’s overall experience with features housed on one platform to provide users with convenience of use.
MET Map Feature Iteration #1
Schematic geometric shapes on the screen did not resemble the gallery spaces well enough to identify visitor’s location
Still, the map was still instantaneously useful. Within a few seconds of looking at it, visitors could have a sense of the size of the building and the density of the attractions, plus a quick survey of the amenities
MET Map Feature Iteration #2
Using Mapbox and a JavaScript library called Leaflet:
The MET could easily push out updates to the map more quickly with a web-based solution
More accessible from any web browser, it can easily be incorporated into other platforms
Changes will appear on both platforms immediately without requiring users to download updates
| THE PERSONAS
Lily & Alex
The main audience for this version of The MET’s mobile app are first-time museum visitors and those who frequent The MET or any art museum.
By using a primary and secondary persona, my designs focus on meeting the goals of the users of this platform.
Lily (primary persona) is a multi-tasking student who enjoys art and is visiting The MET for the first time and needs a way to find information that will be relevant to her interests.
Alex (secondary persona), on the other hand, is a frequent visitor of The MET and likes to be a part of the art community. She knows how the website works but it would be nice to not have to navigate back and forth between multiple apps on her phone.
| DESIGNS
The MET’s Current Mobile App Design
Below is a snapshot of The MET’s current app design through Bloomberg Connect. The overall layout is minimal with a simplified navigation. Although not evident from this picture, ‘Your Visit Toolkit’ takes visitors to information about the museum. The app provides a digital app for visitors to use, however, other tasks such as ticket purchasing and event information directs users to their default mobile web browser.
Loading page from Bloomberg Connects app which takes users to the main MET museum guide —>
Loading page from the Bloomberg Connect app after a user searches for The MET museum, directing them to the main landing page. Users must search for The MET again if they leave the app for any reason.
Low-Fidelity Iterations
With my desk research completed, I created low-fidelity wireframes of various key tasks/pages across the application to address the initial problem and goal.
Overall, I desired to keep the MET’s signature red header throughout the application. From testing various iterations of how this could be prominently displayed, I decided to go for a more subtle red color while maintaining the page name within the header. This way it is clear for the user to identify the current page they are on while separating their interactions with the main navigation at the bottom of the screen.
The initial framework of my mobile app design was centered around whether or not a user was a part of the museum’s membership program; however, benchmarking other museum apps made me realize that users should not have to log-in in order to access information.
This eventually led me to design three user flows for onboarding that would allow the user to enter the app regardless of whether or not they were a member of the museum.
As an app that can be used while visiting The MET, it was important to incorporate various onboarding pathways for the user.
Log-In: allows the user to log in with an existing account or create an account
Skip: allows the user to sign up for an account at a later time and simply enter the app
Register: allows the user to sign up for an account when they initially enter the app, the user can also check if they have an existing account
Main landing page for The MET’s museum information; users click ‘Start Guide’ to enter to the museum’s main page. Once the user leaves, however, they need to search for the museum again and wait for the main page to load.
Log-In flow starting from the user’s phone screen to the home page of the app
Events & Tours page starting from user selection to ticket purchase
Mid/High-Fidelity Iterations
Exhibition information from current, upcoming, and past archives
Checkout flow with options for the user to log-in or continue through guest checkout
General design aesthetic iterations for The MET
Current MET Website Confirmation Page
Links like ‘Buy tickets’ direct the user to the website, rather than staying within the app.
Low/mid-fidelity mockup
High-fidelity mockup
| THE SOLUTION
Core Experiences
Home Page
Museum visitors can view ongoing exhibits and initiatives from the museum; the hamburger menu directs visitors to the ticket, exhibitions, event, and map pages.
Ticket Page
Museum visitors can plan their visit ahead of time or purchase tickets the day of right in the app, regardless of whether they have an account. (From left to right: main ticket page and selection of location, selection of date, selection of number of tickets)
Events & Tours Page
Museum visitors can view current and future events by filtering between the type of event and a particular week. Some events have sign-ups where users can buy tickets to the event as well.
Exhibitions Page
The customization feature allows the user to personalize their clothing with additional aspects such as color, material, attachment, size, and shape to help tailor their clothing toward ease of dressing and preferred fashion styles.
Museum Map Page
The map feature allows the user to view the location of galleries on two floors. Entering the detail page, the user is also presented with other galleries at the bottom they can view and pinpoint on the map with the ‘Show On Map’ button.
Checkout Feature
The checkout process will direct users to start with their billing address and move on to the next section. Only when their information is filled out for each section, can the user minimize the section with the ‘-’ sign and go to other sections randomly to edit their information.
| EVALUATION
Usability Testing
[Developing Usability Research Goals] I conducted usability tests to provide insights on the overall experience of each page’s flow. This helped me discover additional pain points within each task flow and make any additional changes to the prototype or considerations to improve features. Here’s what I wanted to find out:
What are the attitudes of users towards the onboarding process?
Does the ‘Event’s page meet the expectations of users when navigating across various topics?
Is the user able to know which exhibitions are happening within different archival categories?
What are the attitudes of users towards the ticket purchasing process through guest or member checkout?
[Observation] I recruited four University of Michigan junior and senior students who were interested in seeing how The MET app could be utilized for new visitors and asked them to go through four tasks. Here are the tasks I asked my participants to go through:
Task 1: This is your first time using the app, can you show me how you would go through the onboarding process?
Task 2: You are buying tickets for your family to go the museum, can you show me how you would purchase tickets for 2 adults and 2 children?
Task 3: Can you show me how you would look for an event with the filter ‘Family’?
Task 4: How might you find archival information about past exhibitions?
The Results…🥁
Positive Feedback 👍
Participant mentioned how much they needed to scroll to get to content at the bottom of a particular exhibition page, which caused brief fatigue —> SUGGESTION: adding a button to automatically scroll to the top.
The checkout flow was not collapsable and is only in an expanded view, increasing the amount of information presented on the user’s screen.
Scroll position from the ‘Home’ to ‘Ticket’ page does not need to be preserved and should reposition at the top of the page when the user exits the ‘Ticket’ page.
Participants appreciated the additional onboarding flow for non-members.
All participants mentioned how the app aligned with the goals of providing a centralized platform for users to interact with during a museum visit.
Overall, participants found the application’s tasks workflow to be easy and straightforward to navigate.
Pain Points 👎
| WHAT I LEARNED
Here’s what I could have done if given more time for this re-design:
Next Steps…
01 - Redesigning the ticket purchase confirmation page to be catered to a unique digital ticket for museum visitors that are members of The MET ⭐️
Personal Takeaways
User research to inform designs 🫡
This was one of the first projects where I used Pivotal Tracker for independent project management. Being detailed yet concise in the documentation of different features was an important step for me when I began to complete tasks toward an established release date.
Usability testing is essential! There were errors for some of the user flows that I did not notice without testing my prototype. Even if it means testing with your friends or classmates, another set of eyes always seems to find the smallest of errors.
Independent project management ✅
This was one of my first UX design and research projects and I quickly discovered that user-based evidence was necessary to help inform my designs. Although designing the visual aesthetics was something I was excited to get started on, functionality in this space comes well before visuals. In the future, rather than focusing on the visual hierarchy, emphasizing user feedback and iterative usability testing will help me refine my decisions.
02 - Further testing to measure the re-design success rate and overall usability of the mobile app ⭐️
Usability testing, do it! ⭐️⭐️⭐️
03 - Designing a feature to save member information such as name, address, phone etc. on the app for autofilling event sign-ups and payment ⭐️