article-newgreen

Redesigning the article experience for all Yahoo brands, on all devices.

This was a horizontal project that I was a part of. This case study runs over the project from shaping the framework, through to a pilot test on Yahoo Finance.

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.

Overview

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.

300M+

Monthly active users

150M+

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.

Audit

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.

Framework

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.

Fixed

Some core patterns have to be “fixed” across all brands and platforms.

Flexible

Certain components can allow for flexibility for brands to express their own voice.

Free

Some brand-specific components can be created and owned by the brand teams.

How the template is applied conceptually.

Template

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 all of the components on iOS and Android in this core template file that became the source of truth for all iterations.

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.