“HealthFit” — Personal Dietary Coaching system in a Grocery delivery app

12 min readMar 15, 2024

Welcome to my journey with HealthFit, the personalized dietary coaching app designed to transform the way individuals approach their well-being. This case study unfolds my 3-week adventure in crafting the Minimum Viable Product (MVP) for this revolutionary app.

To set the context, let’s begin with the problem statement.

Why HealthFit?
What Sets HealthFit Apart?
Take a look at the final solution, I have come up with.
Explore HealthFit.
Home screen of HealthFit.
Meal Tracking Feature.
Key decisions made in the Meal tracking feature.
Nutritional tips and shorts feature.
MyCoach feature by OpenAI.
Key decisions made in MyCoach feature.
Heuristics evaluation or selecting food quantity and tracking feature.
Learn the UX behind UI of the home screen.
UI components/Architecture.
Tool skills that helped me create scalable products.
Design Process.
Competitor analysis.
Paper Wireframing.
Future Considerations
Key Learnings

Why HealthFit?

I was drawn to the challenge of creating a user-friendly diet coaching app that not only informs but empowers users to make healthier choices. The goal? Optimal well-being.

What Sets HealthFit Apart?

features of healthfit — Features of HealthFit

Unlike other apps, HealthFit stands out by offering:

Affordable and commitment-free memberships.
This means users have the freedom to take control of their health journey and encourage long-term usage.

Now, let’s dive into the exciting world of HealthFit and explore how it came to life in just three weeks!

Take a look at the final solution, I have developed.

Prototype of the app

Click here to see the prototype.

I wanted to make a one-stop solution to solve the problem of users who need diet coaching and all the related tasks in one place.

features of diet coaching app — Features of HealthFit

This will help businesses by positively impacting the increase of Monthly Average Users(MAUs).

Let’s explore HealthFit in more detail and understand how it works to cater to users' nutritional needs.

Here is how users can share their health goals, dietary preferences, and activity levels to unlock a personalized experience.

diet coaching app onboarding screens — Onboarding screens

During onboarding, the app personalizes itself to cater to a wide range of users with diverse health goals.
Customized meals are provided based on users’ health goals and preferences input during onboarding, aiming for optimal health.
AI algorithms, analyze user input, track progress, and learn from user behaviors over time.
This allows the app to tailor its advice, recommendations, and motivational messages to suit each user’s unique needs.

This will increase MAUs as MAUs directly impact user engagement and ultimately, revenue.

Let’s take a look at the Home screen of HealthFit.

Check out the screenshot to see how HealthFit’s home screen boosts user engagement with personalized features.

diet coaching app home screen screens — Features on the home screen

The home screen’s seamless integration of personalized features in HealthFit not only enhances user experience but also drives long-term engagement, directly impacting the app’s business success.

Here’s how users can easily interact with the Meal tracking feature.

Let me show you how easy it is to interact with this feature.

diet coaching app meal tracking feature — Meal tracking feature

diet coaching app meal search feature — Meal tracking feature

The data users enter when they complete a meal or daily activity improves the service and initiates an internal trigger, keeping the habit of using the app going.

Let’s closely examine the important elements and key decisions made in the Meal tracking section.

Based on the feedback I got, some users expressed confusion and had questions, especially while adding meals.
To address this, I added tooltips that appear when needed, giving users instant guidance.

This change ensured users feel more in control, can avoid mistakes, and know what to do next.

Critical decision in meal tracking feature

Another critical decision I made was to empower users with control and freedom.
Inspired by competitors and usability insights, I introduced features allowing users to edit, delete, move, and copy items.

Inspired by the book “Hooked: How to Build Habit-Forming Products,” I added a variable reward system to the app.
It includes motivating messages and reminders for sticking to goals like calorie intake, staying hydrated, and completing daily activities.
The main reward will be the satisfaction of completing the daily goals itself which will keep users motivated.

With clear guidance and repetition goals, users see their achievements as personal wins, making the app a habit for them.

Here’s how users can easily interact with the meal planning feature.

The app will automatically analyze and display a selection of curated meal plans that align with the user’s health goals, dietary preferences, and activity levels.

Users will have an engaging experience as they discover, customize, and interact with a variety of meal plans.

This will lead to increase in User Engagement metrics.

Let’s closely examine the important elements and key decisions made in the Meal planning section.

Check out the images to understand what decisions I made.

Critical decisions in meal planning feature

To come up with ideas for adding a filter and sort feature, I looked at how other apps handle this feature, not just direct competitors.

This helped me gather more ideas and progress with my project.

Another decision I took after doing the empathy mapping was that users get more clarity and guidance in cooking if a video on how to prepare the meal is provided.
Moreover, users will stay in the app for a longer time and the system can keep getting better based on the actions that the user is taking.
This in turn results in providing personalized recommendations more accurate.

Also, users will come back to view more meal videos which will in turn increase the monthly average user count.

Let’s see how users can get nutrition tips and advice to improve their health and overall well-being.

Instead of relying on chunky textbooks and a pool of information on the internet, users will receive the most important health-related information curated for them in the form of:

Articles
Shorts

diet coaching app shorts feature — Educational shorts and articles

These short videos and articles, showcase nutrition and health-related content, offering tips on improving health through simple lifestyle choices.
Users find it easy to consume as it provides short and trustworthy information.

It leads the users to engage more and increases the DAU’s.

Let’s see how users can get a tailored search experience with MyCoach.

Check out the image to understand the thought process behind the feature.

diet coaching app Open AI search feature — MyCoach feature

This approach allows for a more tailored search experience by incorporating the recommendation engine’s understanding of the user’s preferences.

Let’s closely examine the key decisions made in planning the MyCoach feature.

After conducting empathy mapping and thorough research, it became evident that integrating AI into the virtual coach significantly enhances the app’s capabilities.
To develop a robust solution, I conducted competitor research to understand the thought process behind similar features in other apps.
My primary goal was to transform the MyCoach feature into a dynamic, responsive, and intelligent component of the app, thereby enhancing the overall user experience.

Here’s how I did heuristics evaluation for selecting the quantity and tracking food features and the home screen.

I did heuristics evaluation to find any usability issues and identify areas for improvement to enhance user experience.

Using established usability principles, like Nielsen’s 10 heuristics and Gestalt principles, I examined the features for clarity, consistency, and ease of use.

Let’s see some of the design decisions(UX) that I took while designing the UI of the home screen.

Check out the image to understand why I made decisions about the UX behind the UI of the home screen.

By focusing on the user experience, I aimed to create a seamless and intuitive interface that enhances user satisfaction, encourages engagement, and ultimately achieves business goals more effectively.

Let’s explore the visual elements of the app in detail.

This design system keeps everything consistent, makes the design and process smoother, and sets us up for scaling and improvements.

While designing each element of interaction, I kept in mind how it can act as a signifier for the affordance of taking an action, so that users can interact with it, tap on it, and receive feedback indicating that something has changed.

Using components make sure designs are efficient.
Its like bringing in automation for doing things faster.

Take a look at how my tool skills helped me create scalable and efficient elements in the project.

As designers, it is very important to think of scalability because we have to built a 100s of screens.
Scalability ensures reusability of elements by not going and making it again and again.

I used Figma’s component properties for elements in a way that makes them easily modifiable.

Thinking in system ensures that the elements are easily modifiable,efficient, reusable, adaptable and scalable, contributing to more value in business and overall design process.

Here’s a sneak peek at the fun mess I made while prototyping! 😅

Let’s deep dive into my design process decisions taken in crafting HealthFit.

To start with, the process was non-linear, involving multiple iterations in both decision-making and design.

After getting my problem statement, I made an initial hypothesis based on some secondary research by looking at other existing diet coaching apps and learnt more about how diet coaching apps work.
I then turned the problem brief(goal) into an experience a user should have in terms of a high-level macro flow.
I imagined how I wanted a user to have an experience.
At this point I was thinking of doing first cut UI happy cases.
If happy cases are working with the users then, I’ll go and build edge cases and error cases because if it doesn’t work with users, then it will be a waste of time.

Next through journey mapping I stepped into user's shoes and went into micro details and ideated every thought the user is having, every action the user is taking, and every pain points user is having.

Each of these thoughts could be an existing pain point or opportunity to create a better user experience.
I put down these thoughts which in turn inspired me to get multiple ideas for the product I was building.

Following that, I translated the insights into user stories.

User stories makes the insights more structured and helps determine on what to prioritize based on what is more business to us and what is more impactful.

Here’s how competitor apps played a pivotal role in shaping the design of HealthFit.

It’s crucial to understand how competitors operate, not just from a business standpoint but also from a design perspective.

I began identifying patterns and understanding how competitor apps functioned for both new and existing users.

These observations served as valuable insights into building my product.

Here’s how paper wireframing helped me transition from ambiguity to clarity in the whole journey.

When I think of a screen or a flow, I write it down on paper sketch the initial screens, and iterate on it as needed.

After achieving clarity on paper, transitioning to digital screens becomes easier.

What’s next for HealthFit?

There were certain aspects I had to leave due to time and knowledge constraints.

Here are some key elements that would be considered in the next iterations:

Video consultation with Nutritionist: Allowing users to contact qualified nutritionists and talk to them frequently through virtual consultations, provides users with personalized dietary advice and guidance which enhances overall health coaching dietary experience. Even though I initially planned for this, I wasn’t able to implement it due to time constraints.
Managing Multiple Use Cases: When I started, I first created only a happy journey that I wanted to give my users and tested if it worked well with them. I wasn’t able to implement the rest of the use cases due to time constraints.
Expanding grocery store: This feature can enhance the overall user experience and further support users in achieving their health and wellness goals. Even though I initially planned for this, I wasn’t able to implement it due to time constraints.

Take a look at the key learnings I had throughout the process.

Importance of getting clarity on paper:

Paper wireframing is a powerful method to move from ambiguity to clarity. In the initial stages, with a lot of ambiguity, I started putting ideas on paper, which helped me gain a clear understanding of my approach.
It’s simpler to iterate on paper than on a screen.

2. The impact of using a design system:

This is my first time using a design kit for a project, and the Material design system saved a lot of time and effort for many elements.
Also, the components in the Material design system are already tested with the users. Without any second thought I used it in my product.

3. Prioritizing what to Test:

User testing is crucial yet challenging. Through experience, I realized that we get answers only when we ask the right questions. It’s essential to prepare what to test and how to test .

Thank you for taking the time to read my work, and I hope you found it engaging and informative. 💡

Also do let me know if anything could be improved, or just any general feedback for me is very much welcomed 📭. you can let me know by commenting 💬 or connect with me on LinkedIn.

I would like to express my gratitude to my mentor, UX Anudeep for his guidance and support throughout UX journey.