🔮

Yahoo News

As one of the three designers on our team, I worked closely with the product team to conceptualize and design a news app that emphasized personalization.

I was responsible for designing and prototyping core utilities like the main feed, customization features, and interactive article content. I also helped build our new Yahoo News design system.

Timeline

April 2018 - 2019

Credits

Catherine Tai, Ashlynn Tan

Before Yahoo News existed, there was Newsroom.

Newsroom was Yahoo's social network centered around news. It was failing for a multitude of reasons. The interface was outdated and difficult to navigate, the search functionality was severely limited, and the comments section was flooded with trolls.

As problems with Newsroom kept piling up, it became clear that the initial vision for the app wasn't resonating with users and it wasn't the right direction for the company. Therefore, Yahoo decided to pivot and relaunch Newsroom as Yahoo News- a news app that lets you build your news feed around what matters to you. We invested hours of work and research into our core experience- the main feed, customization features, and news articles. As a result of our efforts, Yahoo News is easy to navigate, customize, and consume.

A more purposeful navigation.

Newsroom suffered from offering users too many marginally different ways to browse the news. Aside from the main feed, users could filter through topics on an explore page and a trending page on top of being able to create their own posts about articles they had read. We culled most of Newsroom’s features and organized the essentials into a bottom bar with three tabs, each with their own distinct purpose- a main feed, a video feed, and an account page. We tested several navigation systems but the bottom bar proved the easiest to navigate and the strongest in establishing an app-wide hierarchy.

Before

Newsroom looked really bad and was incredibly confusing to navigate. The visual design was outdated and the bottom bar had too many options for browsing with unclear distinctions between the differences of each page.

iPhone 6 screenshot of the old newsroom app. depicts outdated mobile design, bad gradients, poor typography, and a bottom bar with 6 tabs, most of them useless

iPhone 12 screenshot of the yahoo news app depicting the main feed. there is a "top stories" header with a weather icon and today's weather next to it. underneath are thumbnails of the top stories of the day followed by the story source and a couple bullet points highlighting the main points of the article.

After

Yahoo News is easier to scan and consume as a result of improved typography and content organization. The new bottom bar lets users focus on consuming information rather than figuring out how to find it.

Background

A feed that lets you focus on what's important.

The feed is the cornerstone of the News app. It is the first thing users see when they open the app and is where users spend a majority of their time while browsing. We trialed and tested several different layouts for the news feed to find the best solution that would allow users to digest the latest news thoroughly and efficiently. We also spent lots of time perfecting details like typography and spacing to minimize any confusion while scanning headlines.

Top stories

The biggest stories of the day are followed by brief main points from the article. Users can get a quick snapshot of the day’s events without ever leaving the main feed.

Improved hierarchy

Instead of an endless stream of similar-looking articles, the feed is now separated into separate sections like top news, topics, and publishers for increased legibility.

iPhone 12 screenshot of the yahoo news app depicting a favorited publisher module in the main feed. the publisher is USA Today and has a blue background per their respective branding and a star on the right conveying that this section is favorited by the user. underneath there are story thumbnails from USA today

Customization

Users can not only choose their favorite topics and publishers, but they can also choose the order they appear in on the feed so they can easily access the topics most important to them.

Video feed

If users would rather watch the news than read it, a separate video feed allows them to consume news in video format and watch breaking news from the live Yahoo News channel.

Weather

Weekly weather reports are also available in the feed by tapping on the weather icon in the main feed.

Articles that put legibility front and center.

Article pages also received a massive refresh during the redesign. The old Newsroom design felt cluttered and distracted users from the contents of the article. We took the time to make articles more readable, more accessible, and more focused on the news itself.

Summary

For users who are in a rush but want to understand the big picture, selected Yahoo News articles offer a summary of the article and the option to listen to the transcription.

iPhone 12 screenshot of the yahoo news app on the article page. the article is titled "new york's cannabis dispensary program: fresh take on reparations?" there is an icon with the word "listen" that users can tap to listen to the article. underneath that is a gray box titled "summary" containing bullet points of the main takeaways of the article

Accessibility

Adjust text size within article pages for easy reading (eye strain eventually comes for us all).

iPhone 12 gif of the yahoo news app depicting the text size adjustment feature in articles. the user is tapping an icon in the bottom right of the screen to surface the text size drawer. they are dragging a slider to make the article text bigger and smaller.

360 articles

To tackle complex topics, Yahoo News offers 360 articles- an article format with diverse perspectives from multiple accredited news sources and additional interactive content.

Customizing your news experience.

We wanted users to be able to customize their feed according to their own news preferences rather than relying on algorithms. Our intent was to make users feel in control of the news they consume without introducing so many options that they struggle with decision fatigue.

Onboarding

Users can pick topics and publishers of interest to build their feed as soon as they download the News app.

‍

Alerts

Receive only the alerts you're interested in! Set alerts for topics you follow or breaking news.

‍

Feed reordering

Sometimes our interests and priorities change. Add, remove, or reorder topics and publishers any time from the feed.

‍

iphone 12 gif of the "customize my feed" feature in the yahoo news app. the user is reordering their list of favorite topics. they unfavorite "money" and a blue toast notification at the bottom of the screen alerts them that they are no longer following the money topic.

A fresh and flexible design system.

Since we were redesigning the News app from scratch we needed a new, well-defined design system so we wouldn’t run into problems like we did with Newsroom. Although we had the assistance of our company-wide design system with decisions like color, typography, and iconography, we still had our work cut out for us. We spent countless hours creating a robust design system for iOS and Android that would allow for quick iterations in the future, lighten our workloads, and onboard new designers quickly and efficiently. This work also helped lay the foundation for the Yahoo News desktop site redesign.

collage of the yahoo news design system. depicts various header styles, module title styles, speciaal event banners, list styles, in-app notification styles, iconography, and button styles

Final outcome and learnings.

One week after launching Yahoo News 2.0, we saw 26% of iOS users and 46% of android users customizing their feed. The number of articles per DAU went up from 0.9 to 2.3. Click-through-rate went up 49% and video watch time went up 47%. As of February of 2020, we hit a record high of 4.4 million MAUs.
‍
Numbers aside, it wasn't all smooth sailing to get here. Our team lost so much time and resources due to changing product requirements. Some major learnings on our part were that a clear product vision and roadmap, good communication between teams, and frequent user testing is key when undertaking a massive app overhaul such as this one. Although I transitioned off the News team, it was a privilege to work with such hardworking designers and developers and I've loved following their progress from the sidelines.

Article

Timeline

April 2018 - 2019

Timeline

April 2018 - 2019