Putting YAZIO in shape

Miguel Bonales
7 min readJan 16, 2023

--

YAZIO is an application whose functionalities are counting the calories of the user’s meals, monitoring their intermittent fasting, providing suitable recipes to the user, and monitoring physical activity through the synchronization of external devices, and… Broadly speaking, we could say that YAZIO’s app helps people look better, so we tried to do the same for them.

YAZIO is also a highly rated app, with 4.7 out of 5 stars on the Appstore and Google Play. With over 50 million users, it is obvious that they are doing something well, but there is always room for improvement! So, as part of my UX/UI Design training with the Ironhack Bootcamp, let’s see how I came to the conclusion of what aspects of YAZIO could be improved.

Research

Before I started redesigning YAZIO I had already been using it for several months, so I knew superficially how it worked, but I had to go further. What things was YAZIO doing wrong? What type of users were using this app? What pain points they had?

Quantitative Research: To carry out this project we had little time, so we mainly used methods that did not involve users directly, so as a quantitative research method we used Heuristic Analysis. From the analysis of some principles based on Nielsen’s 10 principles of heuristic analysis, we obtained the following score (out of 100):

This means that, according to the principles analyzed, YAZIO can be classified as a “good” application, so there is some room for improvement. For now, we will focus mainly on those that scored negative, such as Control&Feedback and Forms, and also those principles that obtained a neutral score, such as Help and Performance.

Qualitative Research: As mentioned above, for this project we tried to obtain information from users in a more indirect way, such as through heuristic analysis, or through the reviews in the App Stores themselves (as we will see below), although we also did spend some time conducting a couple of interviews with regular users of YAZIO.

On Google Play (for Android) and the Appstore (for iOS) we found the following ratings:

And on the other hand, from user interviews we obtained comments such as:

“I wish you had more filters. Just the name of the product is not enough, like for example the brand.”
“I don’t understand why my weight and height have to be on the princiapl screen. Whenever I try to change it I make a mistake and go into my profile.”
“I didn’t know I could add my own meals until a couple of days ago and I’ve been using the app for months!”
“It bothers me that I can’t set my own meals. Everything is based on breakfast, lunch and dinner. What if I do fasting? What if I want to eat dinner 3 times? I imagine every country will be different.”

If we put together all the information gathered, we were able to build a sort of pseudo-Affinity diagram that helped us to build our User Persona.

Jim & Value Proposition

As a result of the Afinitty Diagram, and with the information we got from the Heuristic Analysis, Ratings, and User Interviews, we created Jim.
Say hello to Jim =)

Jim is a high school physical education teacher, and he had recently noticed that he wasn’t in his best shape. In response to this, Jim needed and knew how he could improve his diet, but he’s not a big fan of technology, and the apps with a huge amount of data, or that are confusing to use, make him tired of them quickly so he uninstalls them. So we had to help him with that.

With Jim’s help, we came to the following conclusion about YAZIO:

“We need to make the app less confusing, more personalised, and support the users everytime they need it”

And that is that we made that our Value Proposition.

Tuning YAZIO

From the first screens of the first application, we could upgrade the upper Stepper by making it determinated instead of indeterminated, so the user could know at which step of the process they were when signing up, and we also added a Clear Icon to the Inputs (when they have the focus). This way we improved both the Forms section and the Control&Feedback section that we saw in the Heuristic Analysis at the beginning.

Changes on the registration Screens

After the registration screens, the user arrived at the main screen/activity of YAZIO, which ended up being the real challenge of this project. In order to improve the usability of the app, more elements were changed than originally we intended. However, the final result looks pretty cool.

Changes on the Main Screen

1. Access to the user’s profile is moved from the Bottom bar to the Top bar in the upper right corner of the screen.
2. Icons have been added to indicate that you can review previous and subsequent days of your recorded meals. Previous to this change, you could also review them, but accessing through the calendar access that was where the profile access is now.
3. To view the details of your meals you must be a Premium user. So, what YAZIO proposes is that that you have to tap in you in order to know what it is inside, causing an extra and frustrating action for the user to discover that they could not really access this information. Now the access has been moved to the central information panel followed by the “PRO” icon.
4. The “MORE” button that allowed you to add food to some of your meals has been changed to“SETTINGS” to configure the amount of meals per day, and the order, so that it is fully customizable by the user.
5. To provide more and better assistance to users, the Floatting button has been changed, which again, allowed to add food to some of your meals (seriously, there were 3 accesses to add food? Yes). Now the Flotting button allows you to access the support chat-bot, the application contact methods, or even write an email directly to the support team.
6. The “PRO” icon in the Bottom bar has been colored to make it look different from the rest, as it was literally different from the rest. It was only used to buy the Pro version of the application, while the rest of the accesses allow the users to interact with the different functionalities (Fasting, Recipes, etc.)

Changes to the Filters.

And, as some users claimed, as we can see in our Affinity Diagram, the food search screens now have more filters.

Next Steps

  • Now that the proposed changes have been made to some of the application screens, it would be good to start with the testing part. Concept Testing, Usability tests, etc.
  • Continuing with the process, once the changes made were approved, maybe the rest of the application would need to go through the design process again (Fasting, Recipes, Profile…).
  • Once the usability of the application was completely renewed and improved, it could be considered to change the aesthetic elements of the UI such as colors, typography, iconography, or even the construction of components.

What I learned:

At first, as an UX/UI Design Bootcamp project I expected to learn the design process, to create my own components and to prototype some screens, but what I have actually learned is to design focusing on user needs, to get feedback from users even when you don’t have direct access to them, or to study the interface of an application to the point of making it mine, and to be able to improve their screens.

It has also been the first individual project we have done, which has allowed me to explore and be more creative in the parts of the process that aroused my interest, such as researching without users, or UI design.

I feel that “going further” is what I really enjoy. It’s only a matter of time before I can go further in each design phase, with each design, to keep learning and improving, until I master all those little things that set UX/UI Designers apart.

Thanks for reading this far, and see you in the next post!

--

--