Redesigning the article experience for all Yahoo brands, on all devices.
My role
A horizontal team was formed with representatives from a few different brands, and a few core "media" team folks. I was the lead designer responsible for collaborating with all cross-functional partners to design and execute.
The team
I collaborated with a product director, design director, three product designers, two product managers, and the product and engineering teams from each of the brands involved. Especially finance, as they were involved in the pilot.
Each Yahoo brand historically used its own template for article pages. This was a result of many years operating in silos.
Our job was to create a new, flexible template, and move it onto one tech stack for all brands to use.
The problem
This legacy had created a poor article experience for our users when trying to read articles, and while bouncing between different brands.
This experience was jarring. They were jumping between different articles in the same ecosystem, but the interaction and visual design was completely different.
Addressable audience
These article pages have a lot of traffic. Existing active users, and unique visitors.
Monthly active users
Monthly unique visitors
Business opportunities
We can experiment and optimize at a larger scale by better understanding user behavior from one consistent baseline. Plus, creating a better article experience will lead to more engagement, which will generate more advertising revenue.
Core hypothesis
By building a better, more consistent article consumption experience, we can increase engagement, revenue and positive sentiment.
I conducted an audit, collecting all existing article templates across all brands and platforms.
Here's some of the details from the audit with inconsistencies called out.
Example of inconsistent navigation patterns.
Examples of inconsistent recirculation modules.
Examples of inconsistent media, author, date, as well as comment/share bars.
Examples of inconsistent navigation, text styles, and advertising modules.
To align the core team, our design explorations, and with stakeholders, we created a framework.
The framework was created as we started piecing together the findings from the audit, and while deciding which components we wanted to keep vs. update. The goal was to create consistency, with built-in flexibility.
How the template is applied conceptually.
I started working on the baseline template in close collaboration with cross functional partners.
Referencing the "fixed, flexible, free" framework, I worked each component individually, and the template as a whole. This took a lot of ongoing communication and collaboration within the core team.
Spec'ing out desktop and mobile web.
pilot launch
Using Yahoo Finance as the pilot, we began experimentation with the MVP template.
To ensure we integrated the article experience well into the Yahoo Finance apps, I highlighted areas of interest that would be changing with these updates to make sure they were on board.
The header and tab bar treatments.
The text links used for recirculation.
Quotes from this article got an update.
Proposed updates to the "x-ray" pills.
Once everyone was on board with these problem areas, we shared this example with the team for what the updates would look like on Yahoo Finance.
Updated pill treatment, removed tab bar.
In-line quote treatment, updated navigation.
Recirculation treatment updates.
A big win
Moving the "x-ray" pills, or "quotes from this article" to the top of the article page created a 300% increase in engagement. This led to an increase in page views, and a bump in advertising revenue.
It also prompted the assembly of a new team to work specifically on building out this interactive component further.
Measure and scale
Once we had learnings from the pilot, and felt confident in the changes, we continued experimenting with different layouts to optimize for advertising.
This involved testing "above-the-fold" layout options, as this space on the page was highly sought after, and getting pretty busy.
Layout option 1.
Layout option 2.
Layout option 3.
And we also started preparing to make sure this was available globally, buy pressure testing language support. This was particularly fun for right-to-left reading languages.
We were seeing positive impact across the board, based on our success metrics. We were tracking well to soon prove our hypothesis.
All signals were looking good, and we geared up to continue the roll-out based on the response from leadership.