Introduction:-
A diet tracking app is used to maintain the fitness/diet of the user according to his/her requirements.
A few years back, we started working on a fitness/diet plan app. We needed to redesign this app. It is the Indian Mobile App and easiest to use for both iOS and Android, it has over 20,000 Arabic food items that do not exist in any other app.
Online research led us to different design layouts and some unique features used by other big fitness/diet apps.
Understand the challenge:-
There are multiple users that use fitness/diet apps in general and what diet subscribers want.
1. People who like to keep themselves fit all the time
2. People who exercise once a day but believe more on dieting
3. The people in between who want to be fit and healthy at the same time
4. Subscribers want flexibility in designing their own diets and tracking their food, exercise and water intakes.
Asking multiple users, we came to the conclusion that people like to keep track of their fitness routines, plus keep track of their meal plans and an app that would help them keep on track. The past app had some design flaws and user-centered problems. So we decided to put our UX design skills to test and to see if we can find some other competitors apps and improve the app.
Our design process:-
The primary factor of our success lies in the fact that we keep our user in the center of our design process. We followed our company’s design process.
Persona:-
At first, we created provisional personas of potential multiple users that use other big fitness apps based on online research and our understanding of people who we knew that used big fitness apps. These personas were created with assumptions and were not entirely research-based, but it was something that helped us understand this project more and guide us in the early stages of the project.
IA (Information Architecture):-
We hope you all are familiar with the term IA, and it is a crucial aspect of UX design. Without proper sorting, most users would be lost and confused when navigating your website or app.
After we built the personas, we started working on IA for the whole app.
Building IA for this app was time-consuming and tiring work, but it should be done to understand user flows and journey throughout the application.
Construction of this IA led us to different user-related problems and how can we solve them. For example, getting the basic information from the user. We got a rough overview of how our app would look like when we finished with our IA. Mapping the basic flow of the app forced us to figure out each step on the path the users will take throughout the solution.
HTA (Hierarchical Task Analysis):-
Hierarchical task analysis (HTA) is an underused approach in user experience, but one you can easily apply when either modifying an existing design or creating a new layout. You can also use this approach to support the UX development process.
As written above, HTA is a process which is not widely used; it is more time consuming and tiring than creating IA of an app. It is deep-diving into IA and defining each step of the user flows in more detail.
All that said; nonetheless, we created the HTA for the app and did some deep-diving for user flows. This allowed us to think deeply around fitness/diet users which led us to more user problems and their solutions. HTA allowed us to deeply study the users.
Ideating the solutions:-
We worked on a visual guide representation of the app. It helped us arrange the interface elements while we focused on the functionality rather than its appearance. Moreover, the simplicity of wireframes allowed us to test ideas without diving into the details quickly. Low-fi wireframes helped us to find more solutions instead be focused on the layout side.
Mid-fidelity mockups:-
Later on, we jumped on to create mid-fidelity mockups using a few UI elements available in the original app. We were able to redesign the app’s UX to be more relaxed and understandable for users.
Onboarding flow:-
The goal of the onboarding flow in the app was to collect information about the user’s weight, height etc to truly make it tailored to their needs. The critical part was to have the user answer different questions about their physique without getting them discouraged and leading them to close the app. It required a simple and quick process. Using simple/short questions and good design layout were some of the solutions we used to ease the process.
Adding a meal:-
This function is the heart of this app. After onboarding, the users can perform many different functions, for example, adding a meal or adding an exercise routine. Adding a meal allows the users to get notified when it is mealtime, which in turn show the meal selected by the user etc.
Conclusion:-
What did we learn?
Designing UX for this app has been a challenging and rewarding journey for us. It was clear from the onset that the major challenge for us will be to make the users interested in something quite different from other fitness/diet apps. Users need to be updated about their diet, so they have to keep interacting with the app from time to time. We researched different fitness and diet apps in detail. We understood the needs of the users. Finally, we faced the challenge of creating an engaging app from the user experience perspective.
What are the next steps?
Deep research about some unique features.
Usability test of the prototype with users.
Improve user flow.