Yahoo Mail Today Tab

Yahoo Mail Today Tab

Start your day right here

Today is a personalized content hub that helps Yahoo Mail users prepare for their day.

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.

Yahoo Mail Today Tab

Start your day right here

Today is a personalized content hub that helps Yahoo Mail users prepare for their day.

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.

Highlight

  • Shaping product value proposition through a 3-month rolling research.

  • Led end-to-end design from concept to product launch in 30 global markets.

  • Drove user engagement, measured by a 52.5% increase in Time Spent/User and 89% D7 Retention Rate (4 points above the app baseline).

  • Shaping product value proposition through a 3-month rolling research.

  • Led end-to-end design from concept to product launch in 30 global markets.

  • Drove user engagement, measured by a 52.5% increase in Time Spent/User and 89% D7 Retention Rate (4 points above the app baseline).

Context

Background

Background

The evolving mail service

The evolving mail service

The evolving mail service

Launched in 1997, Yahoo Mail is one of the leading Mail services across the global markets. In 2019, 45M users rely on Yahoo Mail to send and receive emails every day.

Launched in 1997, Yahoo Mail is one of the leading Mail services across the global markets. In 2019, 45M users rely on Yahoo Mail to send and receive emails every day.

However, in recent years, Mail became people’s personal media folder β€” Users receive more messages containing content rather than person-to-person communication.

However, in recent years, Mail became people’s personal media folder β€” Users receive more messages containing content rather than person-to-person communication.

Yahoo Mail explorations based on the concept of β€œMail as a personal media folderβ€œ.

The rising of Super App

The rising of Super App

The rising of Super App

At the same time, our user research and competitor analysis revealed a rising business model - Super App.

At the same time, our user research and competitor analysis revealed a rising business model - Super App.

Major platforms in the APAC region like Grab, WeChat, and Line were successfully integrating multiple services into single apps, offering users one-stop solutions for daily routines.

Major platforms in the APAC region like Grab, WeChat, and Line were successfully integrating multiple services into single apps, offering users one-stop solutions for daily routines.

Super App successful cases

Grab App: Home page

How might we

Evolve Yahoo Mail from a communication tool into a lifestyle ecosystem that powers users' daily routines?

Evolve Yahoo Mail from a communication tool into a lifestyle ecosystem that powers users' daily routines?

Evolve Yahoo Mail from a communication tool into a lifestyle ecosystem that powers users' daily routines?

We believe that Yahoo Mail can serve as an ecosystem where users explore a diverse types of content, starting from our core competence and strong brand asset - Yahoo news.

We believe that Yahoo Mail can serve as an ecosystem where users explore a diverse types of content, starting from our core competence and strong brand asset - Yahoo news.

To integrate news content into users' personal inboxes, we needed to understand two key aspects: what information our users value most, and how to seamlessly blend news reading experience into their daily email uses.

To integrate news content into users' personal inboxes, we needed to understand two key aspects: what information our users value most, and how to seamlessly blend news reading experience into their daily email uses.

Research & Design

Driving Product Value Proposition Through Rolling Research

Collaborating with US and UK teams over three months of bi-weekly research, I validated five design concepts to address international user needs, directly shaping our product value proposition and strategy.

Collaborating with US and UK teams over three months of bi-weekly research, I validated five design concepts to address international user needs, directly shaping our product value proposition and strategy.

Remote observation of user studies conducted in the UK.

Iterations of design concepts throughout the rolling study.

Research Finding 1

Today Tab As My News:
Users seek for explicit control over their content feed.

We observed users’ desire for control over their content feed. Through the rolling study, I explored different dimensions of customization and defined the MVP feature for development.

Design Explorations

User Need

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

Proposal A

Like and dislike options

User Need

β€œI want a way to say I never want to see that publication.”

Proposal B

Control over news sources

User Need

β€œ[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...”

Proposal C

Add favorite topics

Final Design

I designed an MVP solution focusing on content control, enabling users to manage and block unwanted news sources. This streamlined feature set meets both technical constraints and timeline requirements.

Designs for managing and blocking specific news publishers.

Research Finding 2

Weather Forecast:
Essential tool to prepare for the day

Our users in the U.K. rely on services like BBC weather and Met office to prepare for their day, and they appreciate having weather forecast to help them get started of the day.

In the rolling research, I tested, iterated, and finalized design to the version with scrollable module and 24 hours weather and precipitation forecast.

Design Explorations

Proposal 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.

Proposal B

Expandable utility module

User Testing Result

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

Proposal C

Detailed weather card

User Testing Result

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

Final Design

I finalized the design as a scrollable module with 24-hour weather and precipitation forecasts. The minimized height maintains visibility of our news content, encouraging users to explore through scrolling.

Today tab in default light and dark themes.

Inclusive Design

Create meaningful news reading experience for visually impaired users

To make news accessible for visually impaired users, I collaborated with engineers and international editors to write accessible text label and optimize content structure for screen readers. This ensures all users can properly access and understand our news content.

To make news accessible for visually impaired users, I collaborated with engineers and international editors to write accessible text label and optimize content structure for screen readers. This ensures all users can properly access and understand our news content.

πŸ”Š Readout Before formatting

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

πŸ”Š After reformat

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

First, I created and maintained documentation to guide our international editors on structuring accessible content, including proper text ordering, formatting, and screen reader-friendly descriptions.

First, I created and maintained documentation to guide our international editors on structuring accessible content, including proper text ordering, formatting, and screen reader-friendly descriptions.

Google Sheets documentation for accessible content structure.

Next, I created implementation guidelines for developers, detailing focus area specs and content formatting standards for accessibility.

Next, I created implementation guidelines for developers, detailing focus area specs and content formatting standards for accessibility.

Defining focus states and readout behavior for implementation.

Readout Examples