Lifestyle Dashboard.jpg

Lifestyle Dashboard

This project aims to motivate users to build up a healthier lifestyle.
@23andMe
Type

 

Work Project
My Role

 

End to End

Product Designer

Time

 

09.2020 -

12.2020

Team

 

Project Manager
UX Researcher
Engineer

 

BACKGROUND

23andMe provides a direct-to-consumer DNA test that includes 55+ health reports, trait reports & automatic Family Tree. 

Home Page

Ancestry Page

Health Page

OUR CHALLENGE

  • How can we help our customers become healthier?

  • Customer engagement and retention reduces after reviewing their DNA reports.

OUR MISSION

  • Motivate our customers to build up a healthier lifestyle based on their DNA and health report.

RESEARCH DISCOVERY

To achieve our mission, I worked with 23andMe scientists to better understand how can we help our users.

How can a person build up a healthy lifestyle?

  • Maintain a healthy weight (a BMI of 18-25).

  • Maintain physical activity whenever users manage to fit it in.

How big is our community?

10,000,000+

23andMe User Community

5,000,000,000+

DNA + Health Reports

How are our users doing in physical activity?

Based on 23andMe user’s step database, half of our users are at a sedentary level.

DESIGN OPPORTUNITIES

Motivate users to level up their activity.
Visualize the 23andMe community overall performance
Provide unique suggestions based on user’s DNA report

PROJECT GOAL

Help user build up a healthy lifestyle
Increase user engagement
Improve user satisfaction

PROJECT ROADMAP

Phase 1: Activity Data Connection

To functional successfully connect with user's daily activity data, I designed the lifestyle dashboard to help users connecting Healthkit or Fitbit to the 23andMe app.

Home Page

Lifestyle Dashboard

Phase 2: Community & Motivation

Today I'll introduce phase 2 design:

  • Create a 23andMe community chart to motivate users to be more active.

  • Create personalized suggestions based on users' DNA reports.

Lifestyle Dashboard Phase 2

DESIGN PROCESS

Community Chart Design Elements:

  • Distribution chart of the 23andMe community

  • User's location in the 23andMe community

  • The motivation for users to level up

Step 1: Distribution chart design for the 23andMe community

Design 1

Design 2

Design 3

Design 3 visually deliver the community distribution concept most

Step 2: User's location in the 23andMe community

Design 1

Design 1 provides a simple and clear layout

Design 2

Design 3

Step 3: Motivation for users to level up

Design 1

Design 2

Converting steps into minutes helps the user to better achieve their level-up goal

DESIGN ITERATION

I made a prototype and worked with UX researchers to run a usability test on the design mockup with 12 Participants. The following are the feedbacks and revision insights I received.

What's working:

  • 10/12 users understand and excited about the community comparison chart.

  • 9/12 users think it's fun, motivating, and interesting with the level-up goal approach

Further Revision:

  • Better communicate the concept via the title and subtitle.

  • Add X&Y axis to help users understand the information.

  • Highlight the level-up goal with better copy communication.

  • Highlight the color to visually focus.

What's not working:

  • 5/12 users think the title is not clear to deliver the concept.

  • 8/12 users don’t understand what's the height of the column.

  • 5/12 users think the level-up goal is not clear.

DESIGN SOLUTION

Interactive Community Chart with Level-Up Goal

This interactive chart helps users to compare themselves with the 23andMe community. In the meantime, it provides an achievable level-up goal to motivate user to be more active.

Filters to Compare with Similar Users

Based on previous user testing, I designed a filters feature to help users compare with similar users in the community.

Personalized Suggestions

Working with scientists and UX writer, I designed different cards and graphics to motivate users to be more active.

Scale-Up to All Categories

DESIGN IMPACT

We launched the project before thanksgiving. Following are the results:

  25%

User satisfaction rate

  14%

User engagement rate

23andMe user's step database changes after launch:

ONE MORE THING

While we are launching the project, iOS 14 released a widget feature.

I realized the lifestyle dashboard would be a perfect feature for a 23andMe widget.

A widget potentially could:

  • Increase the 23andMe app visibility.

  • Help users achieve the level-up goal easily.

  • Scale-up with other 23andMe features in the future.

Design Exploration

Design 1

Design 2

Design 3

Design 4

Design 3 most helps users to understand the level-up concept and visually more appealing.

User Testing

9:00 AM

4:00 PM

7:00 PM

What's working:

  • 14/18 of users feel motivated by the widget

  • 13/18 of users willing to add the widget to their phone

  • 16/18 of users like the visual layout of the widget

What's not working:

  • 10/18 of users feel frustrated by waking up and been told they need to walk 47 mins to the goal

Design Iteration

Before

After

Further Revision:

  • Break the big level-up goal into small goals at each level

  • The time becomes easier to achieve

DESIGN A 23ANDME WIDGET

Dark Mode

Light Mode

9:00 AM

4:00 PM

7:00 PM

© 2021 Erin Yi Yang's Portfolio