Britannica Topic Experience
My Role: User Research, Strategy, UX, UI, Prototyping
Team: Myself and one other designer
Tools: Adobe XD, Figma
The Challenge
Most Britannica users arrive at a topic page from Google, but many bounce after visiting a single page. Seeing as Britannica.com relies on ads to be profitable, the challenge was make specific information within the article easily findable, while also providing enticing opportunities for the user to continue their journey on the site.
The Process
Understanding the User and Business Needs
We ran a number of on-site surveys, which helped us to understand that our biggest group of users were students conducting research or studying for tests. We also learned that this group was coming to the site with a specific question in mind about a topic, and finding it difficult to get a quick answer.
Google Analytics tools like heatmaps allowed us to see that “Related Content” sections weren’t getting many clicks in the existing design. How could we make these links more enticing to get users to view another page (and thus get served another ad)?
Key user needs
Quick and citable answers to specific questions
Easily navigable Table of Contents that surfaces many ways of finding specific content
Pain Points
Table of Contents is too much text
Hard to find specific information
Business Needs
Higher number of ads served, getting users to click into more than one page
Hypothesis
By improving topic architecture and easily surfacing related content, we will quickly answer questions while encouraging exploration, seen through increased time on site metrics and lower bounce rate.
Initial Wireframes and Exploration
Early iterations of the Table of Contents attempted to deal with the issue of length. Was it better to implement a tab system to avoid the user having to scroll within the panel? We decided against the tab system, to remove any click barrier between the user and media/related content.
For the image overlay, we iterated on placement of panels, and how to display the image as large as possible while retaining ad space and utilities like cite and print.
AB Testing
We used Google Optimize to AB test smaller iterative changes with a small subset of traffic. Through this process we were able to fine tune things like the order of sections, labeling, and card styles.
I would have liked to have conducted some in-person user testing with a prototype as well, but we unfortunately did not have the budget or time.
Results
A More Succinct and Connected Table of Contents Panel
We first focused on improving the visual hierarchy of the panel with clearer sections, fewer lines of text, and by combining media from 3 text links into one scrollable media module. this module would also serve as a visual break between the Table of Contents itself and the “read more” style content below it.
Topic subpages, such as question pages, that used to be standalone, disconnected pages, would now retain a sub-version of the ToC in order to enforce the ecosystem of the topic.
To keep our student users on the site longer, we decided to serve student focused content and quizzes directly below the Table of Contents in the panel. After adding these links to the panel, the percentage of users clicking to a related page increased by ~12%.
Answering Questions Quickly
Using Google analytics data to see what users were searching before landing on our article pages, we created a top questions module at the top of the article page, to serve quick answers to those users. When expanded, the answers also provide links to read more, thus also offering a path to continue on the site.
Using news data from the Associated Press, we were also able to provide relevant news listings at the top of the article page, and drive clicks to an embedded full version of the AP article, thus improving ad revenue.
Media Gallery: Scrollable and Consistent
Once we had expanded the media functionality within the ToC panel, we focused on improving the media overlay experience, to encourage users to scroll through multiple images. In order to remove friction, we consolidated everything into a collapsible lefthand panel that is consistent with the behavior of the ToC, as well as overlaying the utility buttons to give the image more space.
After implementing this design, the number of users who viewed more than one image in the overlay experience rose by 15% MoM.
Results and Next Steps
Though these changes were made iteratively across a number of weeks, each led to increases in time on site metrics and pageview count, while decreasing bounce rate. When comparing the first full month post launch vs the same month the previous year, bounce rate came down 18% and time on site rose by 12%. These metrics directly impacted increased ad revenue, which was the chief business goal. With a stronger article template as an entrance point to the site as a whole, we were then able to expand our efforts into other, less trafficked parts of the site, like the homepage and category pages. Keeping the entire user journey in mind, how might we then extend that journey past the article page, enriching the user’s overall experience of the product?