KetoDiet
A low-carb mobile app that helps you adopt a healthier lifestyle
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
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?
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
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.
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.
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
Building analytics web tools
Reimagining the market access planning process
Sinergia
Training people to better monitor and plan their energy consumption.
