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. 

23andMe app.png

Home Page

Ancestry Page

Health Page

OUR CHALLENGE

User interface_Two Color.png
  • How can we help our customers become healthier?

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

OUR MISSION

Fitness App_Two Color.png
  • 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.

Doctor_Two Color.png

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.

Lunch break_Monochromatic.png

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.

Group 11.png

DESIGN OPPORTUNITIES

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

PROJECT GOAL

Group.png
Help user build up a healthy lifestyle
Group-5.png
Increase user engagement
Group-4.png
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.

Steps.png
23andMe app.png

Home Page

Lifestyle Dashboard

Steps 2.png

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

Group 11.png
Group 1152 (1).png

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

Group 1153.png
Group 1153.png

Design 1

Design 2

Design 3

ic_success copy.png

Design 3 visually deliver the community distribution concept most

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

Group 1158.png

Design 1

ic_success copy.png

Design 1 provides a simple and clear layout

Design 2

Design 3

Step 3: Motivation for users to level up

Group 1163.png

Design 1

Design 2

ic_success copy.png

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.

Group 335.png
Group 1085.png

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.

LD.gif
Group 1164.png

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.

Group 1165.png

Scale-Up to All Categories

Group 1171.png

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:

Group 12.png

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.

maxresdefault.jpg

Design Exploration

Group 1166.png

Design 1

Design 2

Design 3

Design 4

ic_success copy.png

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

User Testing

Group 1167.png

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

Group 1168.png

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

Group 1144.png
Group 1169 copy.png

Dark Mode

Light Mode

9:00 AM

4:00 PM

7:00 PM