Redesigning HealthifyMe: UI/UX case study.
In this article, I’ll explain how I redesigned the meal logging and the experience of calorie tracking for HealthifyMe- India’s most loved health and fitness app.
Disclaimer: This was a part of a 48-hour designation challenge that was meant to push me and my team’s boundaries to come up with a probable solution. I was in no way associated with HealthifyMe at the time of this challenge.
Overview
This is a redesigning project of the HealthifyMe app that I designed in 48 hours with the help of my team. I chose to redesign this application as, given our daily lifestyle and routine, it can be easy to develop an unhealthy lifestyle. However, it is necessary to cultivate a habit to make small but meaningful shifts in our lifestyle. It can also be safely said that tracking your daily calorie intake for every single meal can become a burden for a lot of people.
Through this app re-design, I hope to impact a larger audience who not only can track their meals and calories but also get relevant analysis to help them achieve their weight loss goal and attain a healthy lifestyle.
Problem Statement
To evaluate the logging meals flow of HealthifyMe app which includes discovering the meal logging, the process of logging, viewing reports with respect to meals, and redesigning the experience to make usability better for users looking for weight loss, leading to increased retention and daily active users for the company.
💡 By solving the problem of simplifying logging meals for users, we hope to see an increase in the retention and daily active users as more easier the process, the more the people will tend to log in their progress everyday.
💥 Plotting the flow diagram
Since we would be evaluating the flow in the entire course of the project and strive to make improvements, it would be of good help if we have static screens in front of us to refer to.
👁️ Problem Evaluations
a) Self-Heuristic Evaluations
By taking the existing flow, we try to identify if any part of the interaction in the flow goes against heuristic principles(rules of thumb).
This evaluation is used to reveal insights that can help us design and enhance product usability from early in development.
b) Non-Heuristic Evaluations
Non- Heuristic evaluations or Intuition based evaluations were done in order to trust our instincts as a designer and explore other problems that we feel might’ve existed based on our intuitions and experience.
🙇🏻♀️ Building our hypothesis
Now that we have identified all problems, we attempt to solve them ourselves without even starting any research. And all those ideas we get to solve your problem could be called your hypothesis.
💡 Going with hypotheses will always help us with enough material to validate it when we do research. Our research gets only better if we hypothesize better.
Finalizing the Hypothesis
From the problems and solutions made till now, we came up with ‘Hypothesis statements’ or in other words statements or questions that would require research to be validated or answered.
🗨 Research- Secondary and Primary, Competitor research
As a researcher, it is important to consume and indulge in insights, and learnings that already exist through various sources through industry reports, academic articles, analytics/business data that may already exist with a business, competitor research, etc.
This becomes a very important step before going and talking with users (primary research) as it helps us to have a better context of the industry and its users.
a) Secondary research
Secondary Research or Desk Research defines the research approach and gives us a new understanding and perspectives about the research problem along with new insights. Secondary research is significant as it becomes a foundation or base further into your research process.
By reading a variety of articles online from different perspectives, we included Include both behavioral and statistical data in our secondary insights.
b) Competitor research
Here we conducted a competitor analysis or research in order to understand the various aspects of the competitor like their product, its features, target market, their design and flows, and so on.
We reviewed the competitor apps and websites to understand their target market, user flows, features, and usability and derive insights and learnings from the competitor research.
Once we have conducted Secondary research from articles and competitor research, we plotted them to our current user flow. We also took note of our competitor's user flow.
c) Primary research
Primary research is essentially the simplest way to come up with new data from the user to get a better understanding of the audience you are designing and what you would potentially plan on designing. The purpose of primary research is that it allows us to validate our hypotheses, problem statements, and ideas from users.
We gathered this type of data through Usability tests with the users individually. This gives insights into the behavior, decision-making, and interactions of the users with the product.
Defining the research target user
Noting down the tasks for the user: The task should be something the user should be able to take action in the user flow. We tried avoiding writing tasks in a manner that gives clues or describes the steps to be taken as we wanted to observe if our users are able to perform the task given to them. The tasks were:
- Go through the app and add the meal with the following ingredients (Add dosa and chutney + report analysis screen)
- Go through the app and set your preferences as if you want to lose 5 kg
- Give the user with food log created and ask him to edit the added food and make changes according to his preferences.
Usability testing
Here, we wanted to understand the user’s initial comprehension of the user flow without asking any specific questions and then probe them further using exploratory questions and usability questions to understand both the mindsets they come from i.e with probing and without probing.
Probing questions for the users to evaluate the understanding of the user flow:
1. What has the interaction with other wellness/fitness apps been like?
2. Have you ever used an app to track your calories?
3. What was your previous way to track yourself with regard to health?
4. What did you enjoy the most about this app?
5. What did you not enjoy most about this app?
Non-probing questions for the users to evaluate their understanding of the user flow:
- If they have used any such apps previously?
- What expectations do they have from a health app?
- If they have any idea of heath apps — explain?
- Annoying tasks do they feel while performing the task?
- What other apps do you use for health tracking?
- “Asking the user to explore the app and share their understanding”
- What did you like about this app? How was it to understand the app?
Usability testing interviews:
The significant insights that I got after interviewing the users were as follows
🕵️ Analyze the data
Here is the time to organize the data to understand our user pain points and frustrations. We used the insights that we got from our primary and secondary research and mapped them with our existing user flow.
a) Journey Mapping
Now that we have insights from the users after our interactions with them, we can now understand the user at different levels, with respect to their behavior, thought processes, and feelings. Making an effort to understand him/her at these levels helps us to understand problems that are not quite evident but still exist. We did this by proceeding with the flow and based on our individual observations in the interview, we wrote down the observations about the user with respect to that aspect(it can be anything: how the user feels, does, think, etc). Another thing to note here is that while we took the observations received from our interviews, we simultaneously also noted down various other insights from intuition, heuristics, hypothesis validations, and any other new insights from the user. This helped us understand how many times that insight came and made a solid case for us to go ahead and work towards solving that problem.
In this case, we picked one user’s insights with respect to the user flow and note down its observations and other insights we thought it was validated. (eg: Insights from Primary and secondary research validated and Insights from intuition)
b) Validation of assumptions and hypothesis
Once I have analyzed the data, there are a lot of insights about what are the problems users are really facing and are significant. I also had previously made certain hypotheses before. So now we check if the hypothesis is getting validated and is coherent with these insights. For those who get validated/partially validated from these primary and secondary insights, these are the ones that I went ahead and ideated solutions for.
During primary research, we also came up with a newer hypothesis and hence added some more hypothesis statements to our previous list. Later, we together voted on which hypothesis we individually think is important to solve and took it forward.
🕵️ Ideate the solutions
It’s now time to craft solutions from the insights. We tried to focus on our problem statement and the problems that we are trying to solve, keeping our research alongside. Slowly we were able to identify our solutions, which will be the features of our product.
a) HMW Questions (How might we)
Keeping the above problems and hypothesis statements in mind, we tried to ask ourselves- ‘How might we be able to solve — ’ and so on. Here are the HMW questions that we came up with.
Q: How might we make this (nutrition flow) less confusing?
Q: How might we understand the meaning of Icons and the location of all CTA’s
Q: How might we remind the user to track their calories after every meal
Q: How might we improve the adding and undoing of calories (tick)
Q: How might we have a standard/uniform CTA all throughout the app
Q: How might we increase the interest of the users in buying a diet plan.
Q: How might we engage users in the app / engage the interactions of the users with the app daily/ weekly/monthly
b) Ideating- using the crazy 8 technique
What is the crazy 8 technique? Here, for each HMW question that I framed in the previous step, I must come up with at least 8 ideas in 8 minutes each. After I came up with the solutions individually, we regrouped and brainstormed our ideas. Some of us had very similar ideas that we regrouped as one!
Screen 1 solutions-
1. From the top replace the banner below somewhere and replace the nutrition cart at the top.
2. Removing the insights and icons from the nutrition card
3. Remove wiegtloss orange CTA card
4. Give options to users to hide/unhide icons/widgets (optional)
5. Remove the share icon from the top
6. Change the clock icon
7. For “today”- check Competitive analysis for inspiration
8. Change the meals to icons and add signifiers to the icons
9. Remove the “+” and the “view analysis”
Screen 2 solutions-
1. Adding images to all the meal
2. Add a search button
3. Removing the banner
4. Improve the banner (in case of information)
Screen 3 solutions-
1. Change the quantity in the flow and add metrics
2. Remove View recipe- add icon
3. Remove the report icon
4. Pick the quantity -change
Screen 4 solutions-
1. Remove the black banner
2. Change snack bar placement
Screen 5 solutions-
1. Choose to either have a banner or my diet planner
2. Simplify the insight icons
3. Same changes as the home page
4. Visual representation can be made better
5. Gamification- (optional screen for tracking streaks)
6. Letting the users know a clear goal for the day
c) Wireframing
It’s time to now create wireframes for the user flows that we have created above. We started off by using a pen and paper to wireframe our rough ideas and after a few iterations wanted to move to a digital wireframe, but due to time constraints were unable to do so and directly went on to build the UI screens.
A detailed explanation of what we’ve changed with respect to the screens and user flow is given below.
UI Design Phase
We’ve finally reached the stage where we can convert the wireframes to UI design and bring them to life! We did this by creating UI screens for the solutions mentioned above. We were also able to take some inspiration from different platforms to make our designs compatible and user-friendly.
a) Inspiring ourselves!
You often see designers getting their inspirations from other designs and pre-existing ideas to make a completely new and original design! It’s done so as to ensure we have a starting point to refer to and create our ideas from there. Now, a lot of people might disagree with this technique but I find it to have best worked out for us as we were short on time and had a deadline by which we had to submit! Some of the screens that we took inspiration from were-
b) Creating UI for the solutions
I often wondered why would anyone want to go through another ‘screen designing’ process when you’ve already designed two (using pen & paper and the digital) wireframes. Well, I can happily say that I’ve got my answer here!
Your wireframes give a good idea about the solution but it could be difficult for the user to understand. There, we will need to create some UI solutions (and prototypes, if you have the time!) for the same.
Few important things to note before I move on to show you the UI screens-
- We tried to replicate the style of our existing app as firstly, we are trying to better the experience of our app- HealthifyMe which includes using its current style. Secondly, we were short on time and had only about 5–6 hours left for our submission deadline. 🙃
- We tried not to focus on creating brand new styles or colors but instead focused on creating components that we required to showcase our solutions. For this, we followed the Material Design of the app.
- Created only the screens of the wireframes using our inspiration collection.
c) Creating UI prototypes
It’s now time to bring these UI screens to life visually by creating a prototype. As mentioned before, having a prototype in hand will ensure you get the best feedback from the users in the following next steps (revamped usability testing). Here, we tried to focus on creating a balanced consistent visual design. We also made a clickable prototype for the users.
Few things to note-
- We tried to create an end-to-end flow.
- We tried not to focus on creating a brand new design system and instead used the material design as the base.
- We categorized and organized our screen components, screen designs, and all their iterations.
- Created the flow between the screens involved, the action that will happen when they interact with your solution, or even how to get to it.
Revamped experience user testing
Now that we have our UI Screens ready with us, it’s time to test them with our users and see how efficient the solutions are! Here, we test our screens with our end-user and get their feedback to further refine and iterate on them.
Had we made only UI screens, we would do simple probing-based usability testing. Since we went ahead and also made flows with clickable prototypes, we can conduct task-based usability testing along with probing.
Things to note-
- We set up a call with our users matching the target user group.
- We asked and had a conversation about what they understood about the screens shown to them. Also asked some probing questions to see if they were able to comprehend everything on the screen.
- We tried to catch and note down spontaneous reactions!
- We tried not to give any explanations for the screens. We only listened.😎
Before we approached the user for testing the prototype, we make a list of tasks that we would be asking the user to do in order to check for the usability of our prototype. The tasks were as follows-
- What do you understand about the screens in the app?
- Can you show me how to explore and add meals in the app (non-probing question)
- Can you track your breakfast and show me what you understand while doing the task (non-probing question)
- Can you show me how would you analyze the food?
- Take me to the screen where you can see the summary of your breakfast.
- Tell me something you did not understand in the app/ screen.
- Can you show me the rewards section in the app?
- Can you explain what goes on in the result achievement screen?
We also made a note of the points to observe in an initial comprehension of the user.
a) Usability testing
Firstly, we showed the prototype to the user and asked them to perform one of the tasks mentioned above while we looked out for the observational points and took notes about the user’s comprehension of the prototype. This is done without asking any questions (non-probing)
Then, we took the user through the task again and started probing to check their understanding of each screen and take notes.
b) Concluding the testing stage
After finishing the usability testing, we now have lots of insights into what works in our prototype and what does not.
Before we start making the changes in our prototype, we categorized the insights from all our users to have better clarity about the changes that we need to make and the reasons for the same.
c) Updated UI
Based on the feedback received from the users and their insights, we reworked and modified the screens by implementing some required changes.
Given below are the reasons why we changed a few things on the screen after the usability testing.
👋 That’s all, people!
If you are reading this, then thank you for sticking till the end and hopefully, it was an interesting read for you all! Needless to say, I had a lot of fun (and sleepless nights, literally! 😛) in making this project. Looking forward to working on more such cool projects!
Wrapping it up with the key learnings that I’ve learned from this project-
1. In 48 hours you can accomplish so many things! Seriously, prior to this, I think I might have undermined the things I could do in 48 hours. Looking back at this case study made me realize the vast topics that we covered and worked on continuously for 2 days. Oh, and maybe I also learned the importance of sleep after the project was completed 😛
2. Less complicated functions and flows. Overly complicating a function or a flow will only make the user run away from using the app! An app should be simple, user-friendly, and easy to use.
3. Gamification. That’s it. Just this term. Why? Because until this project I had no idea what this term meant. I of course knew about how as a designer you will need to insert some elements to enhance user engagement, but with this project, my understanding of this term took it to another level. The constant iterations, and interviewing with the users to see what seemed interesting to them and how could we retain them within our app gave me a plethora of knowledge and insights that I can’t wait to use in the future!
4. The chance to convert a frustrating problem to a simple solution. Isn’t this why (most) UX designers do what they do? There is something satisfying about running behind a problem statement to dig deeper and come up with a design process to only later finalize a simple solution that would make a world of a difference to the user you are solving for. 😌
5. As the famous quote by Martin Luther King Jr. goes- “We may have all come on different ships, but we’re in the same boat now.” My teammates and I might have come from different backgrounds and fields of career but for those 48 hours, I felt like I was working with a team of experienced designers with various discussion topics ranging from heuristic analysis, typography, color theory and so much more! Having them working alongside me on this journey was a blessing in disguise. Thankyou you guys! 😄
6. And finally, a shoutout to all the designers and the people working at HealthifyMe. The more we dug deeper to understand the design systems of this app, the deeper my appreciation increased for all these wonderful people who came together to build an app that has made an impact on the lifestyle of many people! Kudos to you! 👏
👋 It would mean a lot to me if you could long press on the clap icon given below and drop a few claps to show your support!
👉I am currently open to opportunities as a UX designer and would love to connect with you on Linkedin and Twitter for any feedback, collaborations, or discussions.
