Yahoo Article Consolidation
Unifying different article experiences and layout
Year
2024
Role
Lead Product Designer
Background
As part of a major company initiative, I led the effort to modernize and streamline Yahoo News article pages, which had become cluttered and visually inconsistent over time. The lack of a centralized layout led to a fragmented user experience and limited scalability. By consolidating the design into a single, cohesive system, we resolved years of UI debt, refreshed the outdated aesthetic, and created a flexible foundation for rapid iteration and future enhancements.
My Role
1 Lead designer (me) 1 Art director 1 Lead product manager 1 Engineering lead 1 User research
The outcome
The article page consolidation significantly enhanced the user experience, leading to a 60% increase in page views, a 14% lift in average revenue per daily active user, and a 59% boost in time spent on article pages. Internally, the unified design system improved cross-functional efficiency between engineering and design teams by 3×, enabling faster implementation and iteration. • Create a unifying and consistent experience for users from all traffic facets • Improve users daily visits and eventually lengthen user sessions • Having one article experience as a foundation to measure metrics • Create a foundation for future experimentation for a more accurate result • Improve efficiency of the engineering and design
The challenge
By 2022, Yahoo’s article pages had undergone numerous experiments, resulting in significant inconsistencies across visual design and user journey. Frequent shifts in company strategy, along with changes in product managers and designers, led to fragmented experiences that lacked a unified direction. Article pages is one of the most visited pages on Yahoo averaging around 400M Daily Active Users. Despite its high traffic, the page had a lot of inconsistencies resulting in broken user experience. And since Yahoo News functions as a central hub, aggregating stories from a wide range of third-party publishers. As a result, the platform hosts highly varied content—from articles with no lead images, to video-only stories, to pieces with minimal supporting text. The new layout needed to be flexible enough to accommodate this diversity of content while maintaining a consistent and seamless reading experience.
Before - some of the variety that's captured
Start design explorations and narrow down
The design exploration kicks off with the goal of addressing the various issues that we discussed in the earlier process. I sketched and mocked up design possibilities tackling different issues and the possibility is endless. To narrow it down, I brought in the design director, PM, and lead engineer to assess each concept and narrowed it down to several concepts targeting key issues.
Article explorations design
Categorizing tablestakes and expectations while exploring designs
Rolling it out and iterate
Due to the tight timeline to achieve the squad’s goal, the team decided to roll it out in phases. We did 1% bucket, monitor the metrics and then iterate from there. The goal is to have a neutral or positive revenue while maintaining engagement and reading experience. During the roll out, 2 problems arose from the design that’s chosen and the team had to pivot quickly to solve it. The problems were:
Image first layout. First, having to put the image first and article title later make the page looks less like an article. We originally decided this order to create a more premium looking page by having a visual first, turned out it didn’t work well because images we ingested from third party publishers are not great.
Close button removal. Eliminating close button helped create a cleaner look but it did hurt the traffic back to homepage which result in declining time spent per user.
