Creating A Seamless Mobile Browsing Experience for the Poster House Website with Eye-Tracking Data
Role
UX Researcher
Duration
8 Weeks
Team
Yang Cheng, Esha Mohol, Cici Lin, Anne Kuo (me)
My Role
Conducted 2 eye-tracking studies and took notes for 2
Analyzing the behavioral studies and eye-tracking data
Delivering our progress during the meetings
Making the prototypes for testing and recommendations
Abstract
Poster House was founded in 2015 and has been showcasing diverse themes of posters from the 1800s to the present time. Our project aims to dive deeper into the findability and information hierarchy of their mobile website, which the majority of people are viewing through. We evaluated their social media ads, home page, exhibition detail pages, search feature and newsletter sign-up and identified usability issues. Our goal is to create a seamless mobile experience that drives online engagement and physical visits.
BACKGROUND
The Mobile View: A New Perspective
We decided to focus on the mobile site based on behavioral data and client’s preferences. We discovered that there 62% of people are viewing their mobile site during the past year, but the design efforts were mostly dedicated to polishing the desktop view. Both our team and Poster House are excited to find out the unique aspects of the mobile browsing experience.
Aside from the mobile site, we also incorporated the paid social media ads into our scope, hoping to see the audiences’ interactions and preferences.
SETTING UP THE RIGHT GOALS
How should we measure the impact of our study?
To further narrow down the scope, we clarified some of the key metrics that Poster House values -- they are seeking more online engagement and more physical visits that leads to more revenue.
To measure online engagements, we decided that since “Sign Up for Newsletter” is set as the most prominent CTA button on the desktop site, it would be interesting to explore the discoverability of that feature in the mobile site where the CTA button is not visible.
How our recommendations might impact physical visits isn’t as straightforward since Poster House removed their online ticketing feature from their site. Instead, we focused on exploring how participants discover the visiting information such as hours, ticketing information, and location. These information are crucial for people that wants to visit Poster House, and people that viewed the visiting information might be more likely to pay them a visit.
Research Questions
How do visitors discover the Poster House website through paid social media ads (Instagram and Facebook mainly), and how do they navigate through the site?
Can users find all the information they want efficiently using the website on their mobile devices?
What parts of the website are users interested in exploring? How do they go about navigating them?
How might we convert online visits to physical visits?
CONSTRAINTS
How Can We Recreate The Experience of Seeing A Social Media Ad?
It is almost impossible to tune our accounts to receive a specific social media ad. We tried to tune our accounts by searching for arts & museum related accounts, only to be broadcasted with other museums ads. We realized that naturally encountering the Poster House ads would be very arbitrary, and not suitable for a controlled study task.
Therefore, we decided to focus on simulating how the ads are presented, and comparing different Poster House ads instead of comparing them with that of other museums. We used Figma to make a prototype that simulates how audiences discover the ads in Instagram Stories to ensure that each participant has the same process. Two ads with different animations were included in this prototype to compare the participants’ reactions.
STUDY OVERVIEW
How we designed the study
Methods
Moderated Usability Testing
Retrospective Think Aloud (RTA)
Pre-test and post-test questions
Affinity diagram & Severity Rating
Comparing data with behavioral analytic tools
Tools
Eye-tracking: Tobii Pro Lab
Behavioral Analysis: Google, Analytics, Hotjar
Prototyping: Figma
Data analysis: Google Sheets
Task List
-
You’re scrolling through your friends’ Instagram stories and discovered contents from Poster House. Please open your friends’ Instagram stories and explore for a moment. If you’re interested in one of the ads, you can click on it to explore more.
-
You are interested in the Art Deco/Environmental exhibition (depends on what they may have clicked on in Task 1). If you’re planning to go to this exhibition, what information do you think you need to know before going to the exhibition? Look for the exhibition events on the website and invest some time in exploring the content provided on their exhibition pages.
-
Please use one or two minutes to explore the homepage without clicking into any pages.
-
You are interested in an exhibition about Japan. Please look for any information about this exhibition.
-
Please find the newsletter and sign up for it.
Participant Demographic
We recruited 9 participants within the age range of 18-35 that lives in NYC. They share a similar interest in arts, exhibitions, and museums, which we think would more likely be the target audience of Poster House.
Testing
We used Tobii Pro lab to capture participants’ gaze and ask them to walk us through their thought process while replaying their gaze video.
FINDINGS & RECOMMENDATIONS
Overall Findings
Overall, the clean and visually stimulating design of the website is appreciated by all of our participants.
For goal-oriented tasks (task 2, 4, 5), we asked the participants to rate how easy it is to complete the tasks from 1-5, with 5 being very easy. Their ratings overall were positive, with minor fixed suggested.
We also identified 6 different findings in different key areas:
01
Personal interest and animation direction plays a big part on participants’ preferences social media ads.
We discovered that personal interest and animation direction are two factors that would affect what participants choose. Apart from their interest in Art Deco and/or Environmental Crisis, the animation direction plays a big part: 4 out of 9 reported that they like the vertical animation, because it matches how they scroll through a webpage to get to know more information.
On a side note, 3 participants reported that the animation was going too quickly that they didn’t have enough time to read and understand the texts.
02
Scannable information are preferred over long paragraphs in the exhibition detail pages.
We discovered that participants enjoy the bullet points and Selected Images area, but they are often exhausted by the long scroll and they don’t always reached those sections.
This problem is prominent especially in the mobile site. We compared the hotjar scroll map data and found a significant difference between desktop and mobile:
Users that scrolled to bullet point area:
Users that scrolled to selected images area:
✨ RECOMMENDATION
Prioritizing scannable information to the top and shortening the scrolling length
We think the page could benefit from moving the scannable information to the top, and reducing the scrolling depth of the page in a whole. We proposed tabs and accordions as great ways to store information and making the navigation easier.
03
Participants were looking for clearer pointers to the visiting information.
The exhibition detail pages offered limited information of the location and admissions. We discovered that the exhibition detail pages offered limited information of the location and admissions. The only information available lies in the bullet points area, which only consists of the room, approximate visiting duration, and parental guidance.
Given that the mobile version lacks an omnipresent navigation bar that show the “Visit” button when users scroll though the page, it relies more on the page content itself to guide users to the visiting information.
✨ RECOMMENDATION
Add a link to the visiting information page
We recommend adding a button that leads users to the visiting information to make it easier for users to access the visiting information, which potentially leads to more physical visits.
original (left) and recommended (right) layouts
04
The search function is somewhat hidden, and the results are not easy to interpret.
In the mobile version, the search icon is hidden in the hamburger menu, and users would have to click on the menu, look at the bottom to find the search function.
Moreover, in the search results page, there were no clear indicators of dates, so users have little clue differentiating which event or exhibition is currently open. These little frictions makes looking up an exhibition less pleasing, and it could be fix with simple tweaks.
✨ RECOMMENDATION
Make the search icon visible on the navbar, and add timing labels & filters in the results
We suggest showing the search icon on the mobile navigation bar to make it more accessible to users. Labeling search results with dates and marking the expired events would also make it easier for users to find something they can attend in the future.
original (left) and recommended (right) layouts
05
Newsletter sign-up is expected to appear in the menu and needs more presence.
In the mobile version, the big newsletter CTA is not shown, and the only place users could find it is in the footer. 3 of our participants tried to look for it in the Join section of the hamburger menu, and not finding anything.
✨ RECOMMENDATION
Add a link in the menu and make the sign up button visible on the homepage
Since people that are purposefully looking for newsletters would very likely click on the menu, we propose that the newsletter would be more discoverable if there’s a link in the menu.
Furthermore, since the mobile site isn’t showing the desktop CTA, we thought of more different ways to promote the newsletter and make its presence more prominent.
adding a marquee on the homepage &
adding a join newsletter option under the join menu
06
The homepage label “Museum, Shop, Cafe” can be misleading with unclear affordance.
Participants reported that they were confused about what those labels mean, and they were wondering if it is clickable. As the labels are in the same font size, viewers might put equal weight on those three functions, and they might wonder what this place is really about.
✨ RECOMMENDATION
Prioritize the “Museum” label and add hyperlinks to all three labels
Since these labels are the first important thing viewers see in the homepage, we recommed adding more hierarchy to the labels to clarify the main purpose of Poster House. We recommend linking labels to corresponding pages to offer more information about the space:
Museum → About
Shop → Online Shop
Café → Café des Affiches
original (left) and recommended (right) layouts
RESULTS & REFLECTION
Client Feedback
I appreciate how you balanced participant feedback and user data from the analytics. This really gave us a clear picture of what our audiences might be thinking.
— Ola, Director of Operations at the Poster House
Our clients gave us positive feedback and expressed how they enjoy viewing their website from an outsider’s perspective.
If I could do this again…
Looking back, one thing important that I would include is the System Usability Scale (SUS). Although we received a lot of valuable feedback, the SUS rating would have been another great quantitative evaluation tool to show our clients how the website is serving its users.