Team
Van Nguyen
Sayali Nikumbh
Katie Im
Sagarika Konnanruru
The Met Museum which has a global reputation for their fine art collection in the united states reached out to the Pratt's center for digital experiences in order to conduct an usability test on the perspectives section of the website. The Met usually has high traffic on their website which helps audiences like art history students gain crucial information. However, it was observed that the perspectives section of the met website had comparatively lower engagement than their other pages. The Met was interested in learning the interactions and user journeys users go through in the perspectives section to improve the usability of the perspectives section.
Eye- tracking studies were conducted in the Pratt Manhattan Campus to provide visual data with solid proofs explaining how their visitors browse the content with different media types and interact with it. We synthesized this data further with the help of google analytics and noticed some similarities.
After triangulating all the data from our eye-tracking studies and google analytics, our team constructed recommendations that we hope will help The Met in their redesign decisions.
Project Summary
My Role
- UX Consultant / Researcher
- Moderating 2 eye-tracking sessions
- Being a note-taker for 2 eye-tracking sessions
- Analysing Findings
- Providing Recommendarions
- Creating and designing Mockups on Figma
- Delivering Presentations to Clients
Client
The Met
Location
Center for Digital Experiences,
Pratt Institute,
New York , NY
Research Questions
Goals and Objectives
Our Hypotheses
1. How do users navigate the Met’s desktop website and approach the Perspectives section?
2. How intuitive and indicative is the Perspectives section for a first time user?
3. How effective and efficient is the Perspectives section’s Information Architecture and content hierarchy on desktop?
4. How easy the search-ability and sub-navigation through the different content types within the Perspectives section on desktop?
1. Understanding users’ pain points while navigating the site to help them find Perspectives section of the Met’s desktop website efficiently and accurately.
2. Provide data to the stakeholders of the Perspectives section to support the findings.
3. Recommend necessary changes/developments to improve the overall experience for the users
1. Low discoverability of the Perspectives section from the Home Page
2. Many types of content within the Perspectives section together
3. Features not clearly indicated in articles
Eye- Tracking Process
Recruiting Participants
We recruited participants who are interested in art history who doesn't necessarily have any expertise in art with the help of research ops team.
We recruited 8 participants total for our eye-tracking studies.
Why we used eye-tracking?
-To analyze the user journey and eye-movement of the user on the navigation bar of The Met website's homepage while searching for the Perspectives Page
-To observe how the user interact with the media content on the perspectives page
What is eye-tracking?
Eye-tracking is a research methodology conducted with the help of a tool called as Tobii pro which detects the eye-movement of the user on the screen. It gives us the data of where user is looking on the screen and generates heat maps of the entire screen.
How we conducted eye-tracking?
-We called the participants in person at the Usability lab in Pratt Manhattan Campus to conduct the eye-tracking study.
-We asked them to perform 4 tasks on The Met's website and recorded their eye-movement with the help of Tobii pro.
-After performing tasks, we asked showed them their recording and asked them to think out loud.
- We asked them some post-task questions to understand their journey.
Tasks
Task 1
Browse The Met’s website and find the “Perspectives” section.
Task 2
Find the MetPublications book entry ‘Art and Love in Renaissance Italy’ within the ‘Perspectives’ area of the site.
Task 3
Find a podcast clip from the Met and where to subscribe to them on Spotify.
Task 4
Find an article in the ‘Art & History’ category having the close look feature that allows you to view artwork in detail
Usability Metrics
Effectiveness
Task Completion Rate
Efficiency
Task Completion Time
System Usability Scale
48.75
SUS Score
Methodology
Eye - Tracking Method
Behavioural Analytics
Multivariate Test
Finding 1 : Discoverability
Users experienced difficulty discovering the perspectives page through navigation bar
When users were presented with the task to find the Perspectives page by browsing on the homepage, their first instinct was to raffle through the navigation bar looking for the name 'Perspectives'.
In the adjacent video, you can see that, when the participant couldn't find the perspectives page through the navigation menu, they directly tried to use the search functionality.
Eye-tracking video of a participant while navigating the homepage to find the perspectives page
Aggregated heatmap of the met home page
The adjacent image shows the aggregated heatmap generated of all our participants which is showing strong activity in the navigation menu during our first task.
Another way users were able to find the Perspectives page was through the cards and images available at the bottom of the homepage.
Out of 8 users, 3 users were able to find the perspectives page by scrolling the homepage and stumbling on the perspectives page card.
Eye-tracking video of a participant while navigating the homepage to find the perspectives page
Recommendation 1 : Renaming the header in the navigation bar
As shown in the mockup, we thought it would be best to include the name 'Perspectives' in the navigation menu for it to be noticeable. To give more context to users, we added the adjective 'expert' , such that the users would know that the page contains learning source from experts.
Mockup of Recommendation 1
Finding 2 : Mental Model
Users couldn't get the grasp on what exactly the perspectives page is about
We asked our user's about their overall perception of the perspectives page. Some of the notable quotes are given below.
"Probably as art critiques. I would expect famous persons' critique of art and their viewpoints. I had no clue what it would contain. I thought it would be Met's own opinions or people like me's opinion, or SME's opinions or newsletters."
"Aesthetically pleasing with well-chosen images but perhaps unclear symbols."
Most of the users were confused about the different types of content available on the perspectives page and couldn't understand the purpose of the page.
Scroll Map of the Perspectives Main Page indicates that the users were mostly reading information on the first part of the page (highest engagement shown in red)
Recommendation 2 : Adding a description introducing the section and what it contains
We thought that putting description below the main heading, stating the content of the page would give user an idea of what content they can expect from this page.
Mockup of Recommendation 2
Finding 3 : Cognitive Overload
Users couldn't pinpoint the difference between multiple media types because of lack of clear distinction between them
The perspectives page contains articles with various media types like videos and podcasts. Only after opening the article and clicking into the media type, they were able to recognize through what media they access the information.
We noticed in our eye-tracking sessions that the 'close look' feature icon on the main perspectives page and the tooltip present on the article page assisted the users in completing the task.
Eye-tracking video of a participant while navigating the perspectives page to find the close look feature
After observing the heatmap of the perspectives page, it also came to our attention that users were drawn the sub-headings on the perspectives page while completing the tasks as if they were seeking for direction on what they should do next.
Aggregated heatmap of the perspectives main page
Recommendation 3a : Renaming the sub-headers and segregating the content types on the main page
Mockup of Recommendation 3a
Relabeling the sub-headers in accordance to their media type will ease out the user journey as they can directly seek out the media content as per their wants
Recommendation 3b : Putting media type icons and tooltips to each article thumbnail on the main page
Only some articles on the main perspectives page had an icon in their thumbnail of their media type, to make the results consistent, we recommend attaching icons to each article thumbnail.
Mockup of Recommendation 3b
To give clearer context to the users, we recommend putting an explanatory tooltip when the user hovers over the icon.
Mockup of Recommendation 3b
Client's Reaction
After delivering the presentation to the design team at the met, a discussion followed
about why certain tasks were framed the way they are. They were interested in knowing the inspiration behind the decisions we made as a team to set up the test the way we did. The discussion ended with them acknowledging our team's efforts as our thoughts and struggles with the perspectives section resonated with their internal team as well.
"Kudos for tackling a part of the website which is particularly challenging even to us to try to get a grasp on, what kind of information people are looking on this part of the website , who's using it , a lot of this big questions we grapple with as well"
-Julie Turgeon, Product Designer at The Met
_edited.jpg)
Client Meeting for the Final Presentation
Conclusion
At first the eye-tracking studies seemed intense and the technical issues were not helping either. But as we got the hang of it , the process became fun. The data we gather from eye-tracking provides us with visual proofs along with the user quotes which establishes our strong findings.
We appreciate the fact that we were able to work with such renowned museum and hope that our study helped them understand the usability issues on the perspectives section of the website.