Lose Weight, Stay Healthy: Lose It App Redesign UI/UX Case Study

15 min readOct 16, 2021

👋 Hello There, Thanks for Tuning in!

In this Case study, I am going to walk you through the process & design decisions, that I took while redesigning the Lose It App.

Note: I’m not affiliated with Lose It, This project and the views are my own.

To give you a bit of context here

❓ What is Lose It App

Lose It is a calorie counter and food diary app that helps people in losing their weight.

How does it work?

Let’s say you want to lose weight, so you can tell the app how much you want to lose, & in what time span,

based on it, the app will suggest you some daily calorie goal;

and if you follow that daily goal for the time you pick, then you should be able to lose your desired weight.

The app also gives users other resources that might help them such as home-workouts, recipes, challenges.

🤔 Why Redesign?

The primary aim of the app is to help users lose weight, but unfortunately,

The disappointment I felt as a user with the primary goal of weight loss in terms of UI/UX was excessive.

There are places where the app could have taken different approaches to improving the user experience.

It’s a pretty popular app among people who want to lose weight and stay healthy; it got over 10 million downloads.

So I took this as an opportunity to redesign this app and to enhance my learning experience.

🎯 Setting up “Goals”

Apart from Enhancing The User Experience by fixing usability and functionality Issues,

I had these Two reasons I redesigned this app.

Ability to Easily navigate through the app

Rethinking the Information Architecture — The information needs to have in an organized, structured, and effective manner;

since most of the play store’s critical reviews that I have gone through having this in common.

2. Make it super accessible

I noticed how distinct elements of the process and the interrelationships among the various steps function in a way that certainly doesn’t help the user.

The navigation flows are not user-centered, the WCAG Contrast is failing on CTAs, and so on, which I will talk about in a while.

The users use this app worldwide in various demographics by various ages of users with different levels of tech-literacy,

hence the information must be accessible to everyone in a simple and clear way.

What you’ll find below is a case study offering potential solutions to address some of the user frustrations and problems, as well as ideas for future development.

☯️ The Redesign

Let’s take deeper dive into the process

I began with a thorough analysis of the app and explored what existed and where was room for further exploration.

When I got familiar with the app by using the app for a couple of days, I had some rough ideas of what I wanted to change in this app.

I went through other similar apps that are in the same domain to see how they are accomplishing in terms of UI/UX.

I also visited the app’s play store reviews, tried to find user’s frustrations, & noted the very common critical reviews.

then I took screenshots of the current app and put them into Figma file flow-wise,

which helped me to understand the app and shape my ideas better.

Then I visited each screen in my Figma file one by one, flow by flow, noted down every point where I had thoughts,

I prioritized my findings according to their importance & defined the main issues that I had to solve.

I also put its solution’s wireframe beside each screen that helped to bring priority and clarity to my thoughts about feature placements & I could come up with better ideations.

Alright now, let’s break it down one by one!

🚶‍♂️Onboarding

Current Onboarding

The current onboarding flow looks something like shown in the below image

here 2 things are happening;

App asks the user his/her basic details; and his desired weight and time (Screen 01–08 in the below image)
App asks users some questions to give the user a personalized feed for recipes and workouts.

here The number of screens here can be reduced to give a faster and less time-consuming onboarding, the survey can be taken inside the app.

Redesigned Onboarding

Now the onboarding flow looks something like this

I made 3 big changes here

I added a BMI Calculator in the app!

Let’s just say if a user wants to lose weight, and he/she has a clear number in his mind of how much he/she wants to lose.

but what if the user doesn’t know how much he/she should lose?

then BMI calculator will help those people by considering the basic details that the app asks users in the beginning and based on it,

The app will suggest a healthy number to users.

2. I asked one question at a time, “To Minimize Task Perception”

Separating fields in distinct steps eases the user’s perception of how hard it is to complete a task and makes the entire process look easy.

3. Moved the survey inside the app & added a sign-up and sign-in option with their Apple ID, Google, or Facebook account to give users a faster and less time-consuming onboarding.

apart from these,

I divided the onboarding process into conversational steps so that it does not overload the user.
Added a progress bar that guides & corresponds with the user through several steps
Screen #10. Weekly Goal shows the expected date, user can expect his/her weight loss.

I also made sure onboarding screens look good even on smaller screen devices, so I designed onboarding screens for iPhone 8 too.

I made multiple iterations to make the best out of onboarding UI

while defining guidelines such as the distance of the “NEXT” toggle button from the bottom that would remain the same across devices,

the distance for questions from the top nav bar, and so on.

🧭Navigation

okay so now when a user has completed the sign-up or sign-in process, he/she can browse the app

Where the app’s navigation can be divided into 6 steps

The bottom navigation has 5 entities and Profile is on the top Navigation along with “Go Premium”

as shown in the below image;

Just to give you a brief context;

My Day- User can see his/her daily and weekly calorie consumption data.
Log- User can add food from here.
Add- Allows users to select food, activity, weight, quickly and add them.
Goals- Users who want to track their nutrition(Carbs, Protein, Fat), can set goals from here.
Social- Users can socialize with each other, can be a part of groups and communities, can make friends, chat with them, etc.
Profile- This is a part of the top navigation, in which users can find recipes, exercise, challenges, can edit his/her profile, set app preferences, and other stuff.

I revamped the current Navigation flow to something like this

All alright now let’s break it down one by

☀️Home (My Day)

This is what the current Home Screen looks like;

Redesigned Home Screen

okay now let me explain what did I changed here and why;

First, I changed the date picker; it will allow users to jump to a particular day, without doing multiple clicks

Then on the top right, I added Bar Code Scanner along with Notifications;

Lots of time people eat packaged food in their day such as chocolate, drinks, chips. right?

Every packaged food comes with a Bar code like this,

Now users can scan bar-code and can quickly log into the app.

Then we have the Main Card which shows the same information in a simple, intuitive, and easy-to-digestible way.

User can see nutrition information by tapping on “details →” on the main card

Now the user can see calories and nutrition into intake by day, by week, and also with custom duration

Furthermore, we have these cards; I moved these cards from the “LOG” Tab to the Home (My Day) screen.

I added one more card on the home screen “Weight” which shows the User’s weight journey

👀Explore

I introduced this new Tab in the App where users can find recipes, exercises, and challenges.

Currently, the app shows the same under the user profile, something as shown in the below image

Recipes, Exercise, and Goals are premium features in the app, to which I didn’t have full access.

let’s talk about one by one;

🍕Recipes

App offers a wide range of recipes that are specifically designed for people who want to lose weight & who deeply care about what they eat.

Redesigned Recipes Tab

I arranged the layout in such a way that a user can easily scan the screen, see what is important, and decide.

I revamped the whole flow while doing so I didn’t want to overwhelm the users with too many options as; It may lead to a bad user experience.

I used the same information that the current app offers and categorized & structured the layout around intuitive navigation, high readability, with a big eye-catching recipe image.

Now each recipe card has the information that will help the user to take action

Veg/Non-Veg Glyph
Amount of calories
Cooking Time
Bookmark button

I added the “Search” and “Bookmark” features; Search will allow the user to quickly find what they are looking for, and they can save recipes for later using the bookmark.

I Included a filter option in Search it will correspond to their specific needs & Users can apply filters based on the following.

Calorific value
Type of cuisine
Cooking time
Type of meal
Recipe Type

I also added a Context menu model to the recipe card, if you don’t know what context menu is? well ever heard of 3d touch? they are kind of similar!

it will allow the users to take a quick peek at the recipe details without doing back and forth again and again.

Now users can also see the nutritional value of the recipes and additional information, can share recipes with friends, which would make the whole flow more usable and pleasurable

Now when the user finishes the cooking app asks the user to share the picture with their Lose It friends,

It will increase user engagement on the platform and Users will socialize more often than before with each other

The heading here “Finally” you made it”, I thought of it as a dynamic means, every time users cook a recipe it won’t be the same.

okay so you cooked something, let’s do some workouts

🏋️Exercises

The app offers a set of exercises that are designed for people who either don’t want to go GYM and prefer Home-Workouts.

Visual aesthetics & ergonomics needs improvements, and the layout can be more interesting.

Redesigned exercise flow

We can show the same exercise page in a much better way, as shown in the image

Now the exercise card has a big thumbnail image of it along with the name of the exercise also the number of calories the user will burn from it and the time it will take to finish.

also, I added a “Search” so that people can search for what they are looking for

🗻Challenges

We intend food to be eaten to provide nourishment to our body, but some foods are good for us and are bad for us (in terms of Nutrition), foods that are over-processed foods that aren’t really food.

The app tries to let the users recognize bad food, or bad eating habits by showing challenges to the users that might help them in their journey also can have other benefits such as;

Reduced BMI
Improved emotional regulation with eating
Decrease snacking and craving
Improved digestion, improved metabolism
Reduced overeating or Improved food choices

and this is what the challenges in the app look like;

The way they have put challenges in terms of UI/UX doesn’t help the users to see the actual value of the app

It’s important to recognize user’s needs, preferences, expecting them in the interface that understands and fulfills them. In a single word, “User-Centered Design”

Redesigned Challenge flow

okay so on the first screen in the image above the user can browse and see challenges, can search a particular challenge using the search icon on the top right
if the user has taken part in a challenge, then it would look like the second screen in the image above
if he/she has taken part in over 2, then a “See All” button would be there like screen 3 so that the user can see all his/her challenges on a dedicated screen
the fourth screen is the Challenge Detail screen, where the user can see all the information related to that challenge
the fifth screen is of comment that users have made or on the challenge detail page so any user sees what other people are saying about it, the user can also post comments in it.

You can clearly see the current one doesn’t help the user to take action and in the redesigned one I have summarised the information related to a challenge that the user might be interested in;

moving forward

➕ Add

A user can add/log food in two ways first: by tapping on the “PLUS” icon from the bottom navigation and second: by going to the “LOG” Tab

Which I have changed and put in the Home (My Day) screen which I have shown you already, right?

So here I will talk about the first way.

the flow of adding/logging a food flow looks something like shown in the below image;

Redesigned

in Screen 03, I simplified the number of options to choose in All, My Recipes, My Meals.
Screen 03 and 04- I decluttered the interface and made it easy to grasp the information at a single glance
the next steps also put filter options there, the user can apply filter here and see the data based on;

Most Recent
Most Frequents
A-Z or Z-A

also now a user can add the item quickly by tapping on the “PLUS” Icon right to the item or can search and add.

I added one more screen when a user adds food, it gives the user a sign of completion of the task.
The placement of controllers, CTA’s are being done to a certain extent that allows users to do operations with a single hand for ease of access & reachability

moving forward

The next tab is “Goals”, as I mentioned earlier, it’s a premium feature and I’m not a premium user of this app

I don’t have access to the data on how does it works, will have to skip this one.

but you might wonder why I didn’t include this tab in the bottom navigation that I have redesigned, well the answer is;

okay? but what about the “PRO” tab, what it is for it?

well, the current app shows ads everywhere when I say everywhere Yes, I literally mean “EVERYWHERE”,

Ads related to the offers and discounts, premium features, etc.

so I created a new tab “PRO”, where the app can promote all the offers, discounts, and premium features.

Nope, users don’t have to download two different apps, it can be done in a single app

👪Community

The app offers public groups and communities where users can be a part of them and socialize with other users,

which helps people to learn from each other and give support and encouragement to each other to reach their goals,

also people can make friends here, can chat with other users.

below is the image of the current “Social” Tab.

Redesigned Community Tab

I removed the “Activities” tab from the community
Divided the flow in 3

My Feed: The user can see a post from his friends and groups he is in.
Groups: The User can see and manage groups he/she is in.
Friends: here a user can see all his chat with his friends.

Made 2 cards for feed; one for group post and one for the individual post also gave visual treatment to the comment screen.

Now user can see all his groups at one place in the “Groups Tab”
the user can search for the group and join them also now the user can look for groups and communities in his/her local area, city, or state.
Users can (These 3 features mentioned below exists in the current app)