Yahoo Mail Today Tab

When

2020 - 2022

Role

Lead designer
- Interaction Design
- Visual Design
- Prototype

Team

1 Project Manager

4 Mobile App Developers

2 Researchers

1 Design Manager in Taiwan

1 Design Director in U.S.

When

2020 - 2022

Role

Lead designer
- Interaction Design
- Visual Design
- Prototype

Team

1 Project Manager

4 Mobile App Developers

2 Researchers

1 Design Manager in Taiwan

1 Design Director in U.S.

Evolve Yahoo Mail from a communication tool into the personalized content hub that powers users' daily routines.

Background

Launched in 1997, Yahoo Mail serves millions of users globally. Over time, the inbox became more than a place for person-to-person communication. Users were receiving newsletters, promotions, subscriptions, receipts, alerts, and other content that shaped how they planned and moved through their day.

Launched in 1997, Yahoo Mail serves millions of users globally. Over time, the inbox became more than a place for person-to-person communication. Users were receiving newsletters, promotions, subscriptions, receipts, alerts, and other content that shaped how they planned and moved through their day.

Yahoo Mail explorations based on the concept of “Mail as a personal media folder“.

At the same time, super apps in Asia-Pacific markets, such as Grab, WeChat, and LINE, were setting new expectations for integrated, all-in-one digital experiences. This opened an opportunity for Yahoo Mail to become a more useful daily destination, beginning with Yahoo’s strongest content asset: News.

At the same time, super apps in Asia-Pacific markets, such as Grab, WeChat, and LINE, were setting new expectations for integrated, all-in-one digital experiences. This opened an opportunity for Yahoo Mail to become a more useful daily destination, beginning with Yahoo’s strongest content asset: News.

12 logos to demonstrate Super App successful apps

Super App successful cases

Grab App: Home page

Business Goal

Help Yahoo Mail evolve into a daily content ecosystem where users can discover personalized information and utility, starting with Yahoo News as the strongest brand asset and entry point.

Design Goal

Build a personalized media experience inside Yahoo Mail that helps users discover the information most relevant to their day?

My Contribution

I led end-to-end UX design for Today Tab, including the personalized news feed, content customization, weather module, and accessibility guidelines. In partnership with two UX researchers, I validated five design concepts through a three-month biweekly rolling research study, which directly shaped the product value proposition and launch direction.

The project was a collaboration between teams in Taiwan and the U.S. I was based in Taiwan, working closely with our product manager, mobile engineers, and design manager, while partnering remotely with Mail designers, researchers, and design leadership in the U.S.

I led end-to-end UX design for Today Tab, including the personalized news feed, content customization, weather module, and accessibility guidelines. In partnership with two UX researchers, I validated five design concepts through a three-month biweekly rolling research study, which directly shaped the product value proposition and launch direction.

The project was a collaboration between teams in Taiwan and the U.S. I was based in Taiwan, working closely with our product manager, mobile engineers, and design manager, while partnering remotely with Mail designers, researchers, and design leadership in the U.S.

Outcomes

30

Global Markets Launch

Today tab was launched across   30 global markets in Oct 2020.

52.5%↑

Time-Spend

Users who used Today tab have increase engagement (TS/UU) 52.5% with the app.

*early launch data

89%

Retention Rate

Today tab users’ D7 Retention rate (4 points above the app baseline).

*early launch data

Design Process

I worked on two parallel tracks.

For the MVP track, I designed a technically feasible version using existing data, components, and infrastructure so the product team could meet the first release timeline.
For the research track, I partnered with researchers to test broader product concepts and define the longer-term direction for Today Tab.

I worked on two parallel tracks.

For the MVP track, I designed a technically feasible version using existing data, components, and infrastructure so the product team could meet the first release timeline.
For the research track, I partnered with researchers to test broader product concepts and define the longer-term direction for Today Tab.

Rolling Research

Working with two UX researchers, I validated five concepts through a three-month biweekly rolling research study.

The initial concept was called “Discover Tab,” where users could access different Yahoo services, including News, Shopping, Finance, and Sports.

Through testing, we learned that News was the most valuable and relevant content type for Mail users. This insight shifted the product direction from a broad service-discovery tab to a focused daily content experience. The team renamed the concept “Today” and centered the experience around personalized news.

Working with two UX researchers, I validated five concepts through a three-month biweekly rolling research study.

The initial concept was called “Discover Tab,” where users could access different Yahoo services, including News, Shopping, Finance, and Sports.

Through testing, we learned that News was the most valuable and relevant content type for Mail users. This insight shifted the product direction from a broad service-discovery tab to a focused daily content experience. The team renamed the concept “Today” and centered the experience around personalized news.

Design iterations throughout the study.

I observed the user interview conducted in the UK remotely.

The interview was conducted in the UK remotely.

Key Design Decision #1

Today tab as my news — Users seek for explicit control over their content feed.

From the first interview, users consistently expressed a need for control over what appeared in their content feed. Because Mail is inherently personal, users expected Today Tab to feel personal as well.

To understand what level of control would best meet that expectation, I designed three prototypes that tested different customization models: liking or disliking articles, controlling news sources, and adding favorite topics.

User Need I heard

"Is there an option where you can change what you receive and what you see?"

Prototype A

Like or dislike

User Need I heard

“I want a way to say I never want to see that publication.”

Prototype B

Control over news sources

User Need I heard

“[I am] sick of sports and politics. I don’t want disasters and killings. But I’d love to see something make me feel nice. A big event. A nice offer. A nice place to go...”

Prototype C

Add favorite topics

Personalized News Design

Prototype B best matched user expectations, as users repeatedly said they wanted the ability to block specific publishers, articles, politicians, celebrities, or topics. Based on this finding, I focused the MVP on content controls that gave users a clear way to shape their feed without adding too much complexity.

Users can manage and block specific news publishers from their content stream.

Key Design Decision #2

Weather as an essential tool to prepare for the day.

In our initial design, weather was just a small entry point to the Yahoo Weather website. However, during early research sessions, participants consistently described weather as an essential part of their daily routine. This showed us that weather could serve as a practical daily utility alongside news content. I partnered with the researchers to explore weather modules with different sizes and interaction patterns.

Prototype A

Shortcut on navigation bar

User Testing Result

Users struggled to find content due to small text size and couldn't get enough weather details.

Prototype B

Expandable utility module

User Testing Result

Users wouldn't interact with the expandable module and missed the weather details.

Prototype C

Detailed weather card

User Testing Result

Users appreciated the detailed weather information but wanted to see precipitation forecasts as well.

Weather Module Design

To give users quick access to essential weather information while maintaining visibility for news content, I designed a compact, scrollable module with 24-hour weather and precipitation forecasts.

A compact, scrollable weather module on top of the Today tab.

Accessibility Design

Improving screen reader accessibility before launch

Once the development team had a testable build, I reviewed Today Tab with screen readers and found that the news feed lacked consistent accessibility standards. Many modules had been adapted from previous Yahoo experiences, where accessibility guidelines for readout order, labels, and focus behavior had not yet been clearly defined.

I raised this issue to the product team and partnered with four engineers and global editorial teams to define content order, screen reader labels, focus behavior, and readout formatting before launch.

Once the development team had a testable build, I reviewed Today Tab with screen readers and found that the news feed lacked consistent accessibility standards. Many modules had been adapted from previous Yahoo experiences, where accessibility guidelines for readout order, labels, and focus behavior had not yet been clearly defined.

I raised this issue to the product team and partnered with four engineers and global editorial teams to define content order, screen reader labels, focus behavior, and readout formatting before launch.

🔊 Readout Before formatting

🔊 Readout Before formatting

"Horoscope icon, Gemini, 5 of 22, minus, 6 of 21. Feeling good, 22 July."

🔊 After formatting

🔊 After formatting

"Horoscopes, Gemini, Prediction for 22nd of July. Feeling good."

I created a shared editorial guideline that helped international editors define content order, formatting, and screen reader-friendly descriptions.

I used Google Spreadsheets as the shared document.

I also created implementation guidance for engineers, including focus states and readout behavior.

Defining focus states and readout behavior.