UX Case Study: the process of designing a diet app
Written by Yousaf Ruhani & Mustafa Ali Akbar— November 02, 2019
Introduction
A few years back, we started working on a fitness/diet plan app called mdiet. We needed to redesign this app. It is the Arabic 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.
- People who like to keep themselves fit all the time
- People who exercise once a day but believe more on dieting
- The people in between who want to be fit and healthy at the same time
- 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 mdiet 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’s. 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 mdiet 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 it’s 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 mdiet 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
Final thoughts
This app’s UX was designed by a group of people. We worked together in understanding user needs, researching, creating detailed HTA etc. We enjoyed working on this project, and learned some valuable things while working on it.
The global fitness and health club industry generates more than 80 billion U.S. dollars in revenue per year. mdiet is a great app with a grand mission to get people moving. To achieve this, it faces one of the biggest challenges — changing a person’s routine/habits. It contains a lot of important and powerful tools just to do that, for example, setting fitness goals, setting diet plans, an inbuilt instructor to keep you moving etc. But changing someone’s routine or a habit is very laborious, so it’s essential to keep the app smooth and understanding of any kind of user.
Note: We are a bunch of UX Designers at UXRally, a Design Studio based in Lahore. We collaborated on this project with a client, and a group of people within our company. This case study was driven by our passion for solving UX problems. We conducted this case study in February.
Thanks for reading! If you want to collaborate, talk about product design, or just want to say hello, hit us up at info@uxrally.com or connect via LinkedIn or Facebook
