RotulApp is an application created to help consumers understand the nutritional information on food labels sold in supermarkets.
The application is part of the PhD project in Pharmacy at the Federal University of Minas Gerais (UFMG - Brazil) carried out by student Alessandro Rangel Carolino Sales Silva.
Today there is no law in Brazil that imposes the obligation of brands to put clear nutritional information on their labels, it is provided little information containing present technical terms that are difficult to understand.
To solve this problem, the student Alessandro Rangel Carolino Sales Silva developed the RotulApp project as part of the doctorate he is carrying out in the Postgraduate Program in Food Science (PPGCA), in the scope of the research about Food Science and Nutrition Group (PeCAN). ), where it is studied food labeling and ways of communicating nutritional information, besides studying potential problems related to the use of basic information available on products.
Strategy | User report | Persona | Initial Sketches | Wireframes | Prototypes
UX / UI Designer - I was responsible for the entire design process.
Ideation and User Research
Sketching and Wireframing
Prototyping with Figma
January 2022 - January 2023
Due to the urgency of collecting research data, a developer was hired to create a prototype just to be able to collect the data necessary for the study.
However, as a previous user experience and user interface study was not carried out, many people, especially the elders, had difficulty using the app.
In order to understand the problems, I did a usability test with 15 people and they all reported difficulty in reading and understanding.
For the quantitative research, I collected information from 1,004 people.
I collected information on gender, age, education, income, marital status, whether the person is responsible for home purchases, and in which region of the country they reside.
After analyzing all the data collected, I created two Personas profiles.
After numerous testing and feedback, I altered the app's user flow.
To show the connections between the app's features, I created a user flow that would help the users easily navigate through the app, as well as adjust to the functionality of the app.
To improve understanding and facilitate user choices, a new design was created.
The main improvements were:
Used icons to help make navigation easier.
I changed the font, font size and background colors to better understand the texts.
A simpler user flow has been created, which takes them from the entry point through a set of steps to a successful outcome.
Creating a simple and fun tutorial for better understanding and answering questions.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. In the second study, it was used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
To improve understanding and facilitate user choices, a new design was created.
I have combined all the elements shown throughout the design process to create what I feel is a warm, functional, fun and approachable app.
I developed a design system to add consistency, structure and communication across all team members. I chose a simple readable humanist typeface that would improve reading legibility in both small and large sizes. The colour palette is mature, yet modern and has good contrast.
I also implemented icons and friendly illustrations to bring some fun and enjoyment to the app.
The RotulApp application was created to help consumers understand the nutritional information on food labels sold in supermarkets.
Through product barcodes, RotulApp checks for the presence of excess nutrients, such as sugar, saturated fat, and sodium in processed and ultra-processed foods.
The app is free and available for Android devices ( only in Brazil ).
For the next steps:
We will improve the product database;
Create personalized list options, such as a list of already scanned products that are healthy and another with unhealthy products;
Conduct more user research to determine any new areas of need;
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
To learn more about the App and PhD research, watch the article made by the UFMG channel: