top of page
KetoDiet_Mock.png

KetoDiet

A low-carb mobile app that helps you adopt a healthier lifestyle

Intro

KetoDiet app teaches you how to reduce your carbohydrate intake and build a healthy balanced diet by keeping blood sugar levels stable and appetite under control.

Role
Lead Product Designer

I created the User Onboarding and redesigned the Planner page for KetoDiet App on Android mobile devices. As the sole designer, I worked with the developer to analyze metrics, define business goals, communicate the design outcomes, and conduct A/B testing.

Team
Software developer working on KetoDiet app for Android 

Duration
2020 - 2021

EMPATHIZE

What are the problems?​

​

The developer and I analyzed current user metrics to understand users’ good and bad experiences on the mobile app. With an average of 30,000 monthly active users on KetoDiet, we discovered:

  • Decrease in user retention (per 300 users)

​

​

 

 

​​

​​

  • Decrease in subscription conversion rates (per 1000 users).

​

​

​

​

​​

​​

​​

​​

  • Improve user engagement for our top 3 popular pages (75% of user's time spent)​

​

1000

App Open

636

See Upgrade Prompt

121

Begin Upgrade Purchase

40

Complete Upgrade Purchase

*Only 4% of people who install the app subscribe. 

300

Day 1

45

Day 2

21

Day 3

Planner Day Meal List​

View Recipe or Custom Meal​

Recipes Fragment​

19.55%​

16.55%​

14.37%​​

View Recipes

View Blog Post

Find Planner Day

View Ingredient

Add Food to Planner

7.29%

4.64%

4.33%

3.8%

3.29%​

DEFINE

Building a plan​

​

First, we defined the problems. Then, we defined our business objectives and roadmap to start developing, testing, and releasing updates on the app.

Goals

  • Improve user retention 

  • Increase subscription conversion rates 

  • Improve user engagement on the Planner page

How​

  • Create a User Onboarding to guide users to understand how and why they are using the app

  • Redesigned the Planner page to improve discoverability by solving conflicts with information architecture and enhancing the UI

  • Promote subscription upgrade since only 63% of users discover the upgrade screen

Roadmap.jpg

IDEATE & PROTOTYPE

Redesigning the Planner page​

​

There's an immense amount of features and information on the app. So I created a flow chart and information architecture audit before jumping to the redesign. I made minor changes to the UI and organization of the content. The developer and I decided to create visual cards to organize the content from Body Stats and Readings. These are the two most important pages under the Planner page. By improving the flow and experience, we hope to retain users on the Planner page and increase discoverability for other features such as the blog, guides, or recipe pages.

Before 

  • Color inconsistency

  • Information overload- many channels that lead to one screen

  • Excess amount of text - how can we organize information better?

Artboard 4@4x-100.jpg

After​

  • Update visuals for Mood & Energy and Activity page

  • On Body Stats and Readings page, organized content into visual cards and charts. Each card will hold contents related to measurement progress, description, and overview

Artboard 3@4x-100.jpg

Iterations​

​

Initially, I designed a Macronutrient visual chart to show the user's Macros intake in days, months, weeks, and years. But the developer and I decided to use the chart for Body Stats and Readings. Because the Diary page will be the Homepage, we wanted to create a unique visual chart to show the user's Macro intake.

Macros overview.jpg

Diary page as the new Homepage​

​

The Diary page will function as the new Homepage for users to easily view their daily Macros and enter their meals. I designed variations of the Macro chart and cards to organize content for user's meals, body stats, and ketone readings. The CEO of KetoDiet reviewed the Figma file and liked the Diary redesign. She plans to update the iOS with the same visuals. The redesign was put on pause because we decided to focus on launching the User Onboarding first before the new Diary page. We did this because the redesign would take the developer more time to create. We also didn't want the overwhelm the users with the excessive amount of changes we're making on the app.

Diary overview.jpg
Onboarding wireframe.jpg

Creating the User Onboarding​

​

When we discovered a decrease in user retention, we decided to build and test User Onboarding to help users navigate through the app. I led the design of the User Onboarding and communicated the design decisions to the developer to ensure we met our deliverables for A/B testing. 

TEST

​

Outcomes

​

So far, over 900 users participated in the A/B testing for the User Onboarding. ​

30%

Increase in user retention

(users stay on the app for day 4 and beyond). 

BUT

6%

fewer views on the subscription screen.

Next steps

  • Run Onboarding test for a longer timer

We will run the test for a longer time to be confident enough to move forward into the iteration phase. We have over 800 users participating and we want to reach over 1,000. 

​

  • How can we increase more sales?

Fewer views on the subscription screen could be due to the randomness in the Onboarding testing sample. Our guess is that users are not viewing the subscription screen because they get impatient and decide to exit the Onboarding before they reach the subscription screen. Thus, we will test variants:

  • Onboarding listed as a card under the Diary page so users have the option to launch Onboarding at any time

  • Subscription as a call-to-action pop-up

  • Subscription listed as a card (as a reminder) under the Diary page

​

  • Test the redesigned Diary page

We want to release the Onboarding first before testing the new redesigned Diary page. So we put this on pause, although the designs are ready for testing. We hope the new redesign will improve user engagement for other features and help boost subscription rates.​​

​

Reflections

​

What I learned at KetoDiet​

  • Understand constraints to make appropriate tradeoffs

As a designer, I need to be creative but practical. It is important to learn why certain components aren't feasible from a developer's perspective and time frame. We met weekly to review the designs and decide the constraints, which helped prioritized our tasks more efficiently. 

​

  • Understand fully the context of the business before starting

I was unfamiliar with how keto dieting works and it was challenging to understand the Keto Diet background in a short amount of time. Before jumping into the design, I had to research a lot about keto dieting and what's important for the users. I learned to ask all the questions (non-obvious and obvious) before starting the project. For me, I had to construct a flow chart and conduct a quick information architecture audit before ideating and prototyping.

​

​

Thanks for stopping by!

If you want to learn more about my design process and experience, let's chat ðŸ˜Š

More projects

Frame 1541_White.png

Building analytics web tools

Reimagining the market access planning process

Sinergia_Thumbnail_A.jpg

Sinergia

Training people to better monitor and plan their energy consumption.

Juvo_Thumbnail_C.jpg

Juvo

Helping sedentary teenagers live a healthier and more active lifestyle by connecting physical activity with the world of music.

bottom of page