Yahoo Homepage Redesign
Timeline
Q4 2016 – Q2 2017
Platform
Mobile Web
Role
Lead Product Designer
Overview
With millions of visitors every month, we recognized that there was a tremendous opportunity to improve the overall experience of m.yahoo.com. We gave the mobile web Yahoo homepage a complete refresh and saw encouraging data immediately after launch.
The Problem
The old homepage was a homogenous stream, with a hidden sidebar which received less than one percent engagement. It had fixed video ads and inconsistent headers across Yahoo properties, contributing to a very poor user experience.
OLD YAHOO HOMEPAGE
Goals
The goals for this project included replacing the existing homogenous stream with a more dynamic layout, removing the sidebar (hamburger menu) which had a <1% engagement rate, modernizing and minimizing the header to optimize vertical real estate, surface community and social reactions more visibly throughout the stream, and inject elements from the right-rail (three-dot sidebar) into the home stream.
Inspiration & Early Explorations
TRENDING: DYNAMIC LAYOUT, CLEANER HEADERS
A mix of v1 to v3 explorations
Spotlight 1
By playing with a more dynamic layout, injecting elements traditionally in the sidebar into the stream, and introducing a cleaner header and over design, we were able to put more focus on the content and our community/reactions. We also removed the fixed video ad that took up a large portion of the screen, but because the stream layout was more dynamically presented, there was an increase in engagement and vertical scrolling. More people were scrolling farther down the homepage and, therefore, viewing more sponsored content. Because of this, our bucket testing showed that revenue stayed flat! Removing the fixed video ad was a huge win for the overall experience.
Spotlight 2
Keeping in mind that the new header design would eventually serve as a foundation for a new universal header, I worked through many drafts while considering significant stakeholder needs:
The Yahoo (or property) brand must be visible
Search results cannot be negatively impacted
Users need an easy way to access Yahoo Mail (or profile/account)
We bucket-tested multiple designs with various tweaks, including the length of the search bar, the color of the search bar border, the background color, and the size of the brand logo. Ultimately, we landed on a header that had the least negative impact on the business.
Impact
After closely observing dozens of different bucket tests for two quarters, we had a GA (general availability) launch to our global user base in Q2 2018. The one week post-launch data was very impactful:
Total mobile web views (for our organization/department) up 23% (not including video uplift)
Mobile web homepage had the strongest week of the quarter as a result of the launch (a 63% revenue gain compared to the previous 10-week average)
Total pageviews up 6%
Community comment engagement up 7.6%
Stream clicks up 7.8%
With the promising data, we were encouraged to fast-follow with more features we had lined up in the works, such as slideshow cards (designed by teammate, Bin L.) and the introduction of vertical videos. A bucket testing the new slideshow experience saw that users were consuming 42% more images and more users were returning to the homepage afterwards to consume more content. The launch of vertical videos contributed to driving up video mobile web views by 2x.
Learnings
With multiple bucket-testing and A/B testing opportunities, I learned how significantly data impacts many of the business decisions. I realized I could defend designs that were backed by data when conversing with different stakeholders.
I also engaged with senior product leadership – at the VP and SVP levels. My work was also featured at company-wide meetings to demonstrate how design impacts experiences and, ultimately, the business.