-Background-Navigation-Feed-Article-Customization-Design System-Analysis
Yahoo News
iPhone 12 screenshot of the yahoo news app depicting a favorited topic module in the main feed, specifically the celebrity news topic
iPhone 12 screenshot of the yahoo news app depicting the main feed with a breaking news banner on top of the main headline of the day
iPhone 12 screenshot of the yahoo news app- depicts a favorited publisher module in the main feed, specifically Bloomberg
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. 
April 2018 - 2019
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 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.
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.
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.
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
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.
iphone 12 screenshot of the yahoo news app depicting the special edition 360 article. there is a picture of amazon union workers celebrating taking up the top 30% of the screen. underneath there is the yahoo news 360 logo followed by the article title "are unions making a comeback after decades of decline" with the article text following that
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. 
Users can pick topics and publishers of interest to build their feed as soon as they download the News app.

iphone 12 gif of the yahoo news onboarding process. a user is picking favorite topics from a list of topics that are presented in pill containers. they scroll down and select favorite publishers, which are presented in small cards with the publisher logo. the user then continues to the main feed and sees an animation with the text "great! we're building your new feed!"
Receive only the alerts you're interested in! Set alerts for topics you follow or breaking news.

iphone 12 screenshot of the yahoo news app depicting the manage alerts page. there is a list of topics the user follows along with a toggle switch next to each topic. the user has breaking news and health toggled on and the rest are toggled off.
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 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.
April 2018 - 2019
April 2018 - 2019