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.
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.
Software developer working on KetoDiet app for Android
Oct 2020 - Jan 2021 (ongoing collaboration)
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)
See Upgrade Prompt
Begin Upgrade Purchase
Complete Upgrade Purchase
*Only 4% of people who install the app subscribe.
Planner Day Meal List
View Recipe or Custom Meal
View Blog Post
Find Planner Day
Add Food to Planner
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.
Improve user retention
Increase subscription conversion rates
Improve user engagement on the Planner page
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.
Information overload- many channels that lead to one screen
Excess amount of text - how can we organize information better?
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
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.
So far, over 900 users participated in the A/B testing for the User Onboarding.
Increase in user retention
(users stay on the app for day 4 and beyond).
fewer views on the subscription screen.
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.
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.