Client
The MET museum
Year
2024
Scope of Work
UX/UI
Location
Los Angeles
The MET is the largest art museum in the US presenting over 5000 years of art form around the world for everyone to experience and enjoy. Typical visitors are young adults and families with kids aiming to make learning fun for their young ones.
The museum visitors are not able to buy tickets and book tours in advance and often end up left out due to long lines and limited number of tickets being offered.
Design the MET website to be user friendly by providing clear navigation with advanced filtering settings and offering a fast checkout process.
Conducting user research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating an designs and responsive design.
Four key audience groups emerge clearly from the foundational audience research performed. These core four groupings exhibit notable differences in attitude and engagement:
Problem statement: Emma is a young student interested in arts and culture who needs a way to find free museum events because of her limited income.
Problem statement: Marissa is a loving grandmother of two looking to spend fund and educational time with her grandkids who needs a way to find kids-friendly events.
I created a user journey map of Emma’s and Marissa’s experience using the site to help identify pain points and improvement opportunities.
.png)
My goal while creating website architecture was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
.png)
Next, I sketched out lo-fi wireframes in Figma for each screen in my app, keeping the user points about navigation, browsing and checkout flow in mind.
The home screen on the right focuses on optimizing the browsing experience for users.
Because the museum’s visitors access the site on various different devices, I started to work on designs for additional screen sizes to make sure the website would be fully responsive.
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and emphasising the “Currently on View” section on the home page was a key part of my strategy.
.png)
For the mobile version of the site I made sure to respect the limited screen real estate and eliminated additional text from the right side.
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
I learned that even a small design change can have a huge impact on the user experience. These are the most important learnings from this project:
%20(1).png)