Dodefy Health is a nutrition and food database app that allows users to see critical nutrition information correlated with medical advice.
I conducted user research, design, user testing phases, and design iterations to further explore this study. People need an educational guidance that helps them understand these values through a superior and feasible user experience.
Dodefy Health's current problem is that they are looking to see what information is the most important to show a user about nutrition and health advice.
The goal is to show users nutrition labels & values and how these foods can change their health. This problem can be challenging because we don’t know what nutrition information is important for a user to see. Another challenge is that we don’t know if people value nutrition information, how often people use these values, and experience with these food labels. (value, usage, experience).
I conducted competitive analysis; completed user research through user flows, and moderated user testing. I transferred my design ideas into sketches, prototypes, medium and high fidelity wireframes. I made design iterations based on user testing with: guerilla usability testing, moderated and remote user testing.
All Ages
All Nutrition Expertise
Photoshop
Illustrator
Sketch
Miro
Invision
Screener: 18 Participants
5 User Interviews
3 Users on Guerillaba Usability Testing
10 Moderated User Testing
Eighteen participants were asked to participate in a screener that asked them to answer thirteen questions about nutrition. This screener helped explore the company’s challenge. By helping understand how users' value, understand and experience with nutrition labels and values.
Participants often complained on how small words can get in nutrition labels can get and how difficult it is to read. Small font should be avoided with the design.
The people that took the test answered that they need more clarification, bigger wording, images, videos, interatictiveness to help them learn and understand these values a lot more. I did see that most people are moderately to highly motivated to learn. This meant that people do care about keeping a healthy lifestyle. This helped know that this solution is valuable to people. This screener also helped me determine which participants to ask to be further interviewed. I chose to target two groups, people whose expertise is beginner & low-intermediate, and high-intermediate & proficient.
Five participants were chosen that stood out from the screener. They were asked twelve questions concerning their problems, experience, and ways to improve their experience regarding nutrition labels and values. This helped clarify the challenge for the company. To be able to tell how users value nutrition labels, their experience and when they use them.
From these interviews several topics were created based on the interviews: teaching, reading, how to learn, knowledge, feelings, advice, considerations, visuals, resources, learning, and difficulties. This helped better categorize the two targeted groups and recognize the company's goal: value, usage and experience.
Each post note was a user response.
I categorized user responses based on topic.
Participants often mentioned that they use the labels and values when dieting and being healthy. They feel more in control because of nutrition labels and values. They would want to learn visually and for a way that is easier to learn. More experienced participants use labels because they know how to understand and interpret information and values.
The interviewees stated that they do not understand the nutrition label one hundred percent. Most participants mentioned that nutrition labels are more general and do not show information regarding their own calorie intake and serving size. Beginners most often ignore this information and values, but do have some understanding.
I ended up making a venn diagram to quickly distinguish the characteristic from both targeted groups: beginner & low-intermediate, and high-intermediate & proficient.
I then created an empathy map to build a stronger empathetic connection with the participants. I divided the users into beginner & novice users and intermediate & proficient users after creating the venn diagram and having interviewed participants.
I was able to know what users say, feel, do, and think. After creating the empathy map I saw the differences from these two groups. With this information I am able to tell what is more valuable, what they would find more useful, and how I can create a better experience for them.
I then had more of an understanding of the users who would use Dodefy Health. From these two groups I ended up making two personas: the starter and the expert.
These personas are great and impactful for the company to know who the targeted users will be. The personas will help furter in development, design and marketing. I was also able to get to know their goals, frustrations, needs, problems, and how they feel about nutrition labels and values in depth.
The Starter overlooks nutritional values and does not understand the majority of information that is listed when looking at a nutritional label. They don’t know about unhealthy foods but is not fully aware how to break down the nutritional label with their daily values & daily recommendations. As well does not know understand how the body handles the macronutrients and micronutrients.
Learn to read & understand nutritional labels & values
Practice better eating habits while implementing best practices.
Learning general information.
No to Low Confidence
Worried about what they are consuming
Not fully aware of nutrition labels & values
Expects instructions and guidance
One to one interaction
Entire physiology, measurement, values break down
Lacking Knowledge
Need more instructional content
Need comparison values
The Expert understands the content of a nutritional label but at a certain extent. They might run into difficulties with understanding the physiology. Some nutritional label information might seem unclear for the expert user. The Expert needs more clarification and might need to revisit topics that has to do the physiology, nutritional labels and values.
Learn and memorize the physiology of all
Learn in depth about measurements, daily values, recoemmendations,
macro and micro nutrients
Learn more resourceful information
Diffiuclties in reading & understanding
Confusing to keep track of
Reassurance
Detailed Explanatory Process
Forgetting
Understanding food labels as a whole entity
A competitive analysis was done before the design started because it is critical to see what other similar companies are doing right and wrong. I did that by looking at the guiding rules to building a successful product design. I looked at three Nielsen Heuristics Principles which included: visibility of system status, aesthetic & minimalist design, and user control & freedom. The competitors were CalorieKing, My Food Diary and Fat Secret.
These competitors had high traffic and had a food database system developed. This means that they have so much food information ready and available to users and other companies to use. CalorieKing was the only competitor to use all three heuristic usability principles.
I learned that I should create more white space so that a user does not get overwhelmed. Another lesson I learned was to allow the user to feel in control to change numbers and information based on their weight, size, intake, etc. Another lesson I learned was to show the user where they are throughout the process. I don’t want them to feel lost while using the application. This method partially fulfilled one of the company's goals: to know what nutrition information is important for a user to see.
I was able to gather quantitative data from the competitors. Sometimes this information can help recognize which company is overall doing better regards to traffic, marketing, and user flow goals.
It is often hard to recognize user experience problems without the qualitative data. It was helpful to know the average page duration to see how long users stay in a page. Also bounce rate to see how users transition from pages, as well as backlinks to recognize how well they are being recognized by other locations in the world wide web.
A user story was created to understand what users would like to do so that they can achieve a task with the design. This helped determine the most important design elements that needed to be designed first. The most important design that needs to be developed first is called the most viable product for a design.
I was able to decide which two most viable products were to be designed and developed first. This was the signing and out screens, and the food search. With these user stories I was able to determine what features would be valuable for the company to have. Also, learn more about user experiences when trying to achieve a goal or task.
A sitemap was then created to see how a user will be taken throughout the design within the application. These pages are listed in levels and the pages that are first are in the top. The top pages will be shown first and then freely navigate throughout the rest of the pages. They are displayed as primary, secondary, tertiary and quaternary levels.
This method really helped achieve how pages would be categorized and displayed to a user. It was great to see an overview of all screens before starting to design.
A user flow was then created to see how users will navigate throughout the pages. I was able to create two user flows: one is how a user will interact with the food search and the other one how a user would favorite a product.
It was great to further expand on the sitemap and know more about how users interact and decide to navigate through the screens.
There were so many options a user can filter and sort by. It was a long process to learn how users will interact with a filter and sort by option. The green boxes are all the options that a user can narrow down their search results.
I was able to create low fidelity wireframes with a pen and paper. I researched and analyzed other mobile applications before beginning to sketch. I got inspired by eBay and Amazon design because of their massive product inventory. They have a lot of options to allow further narrowing of product search results. They also have ways to share a product, favorite or save, and add to cart.
A guerilla usability testing was then performed on three users with the low fidelity wireframes.
Users were able to navigate throughout the app design successfully. All users liked the content the app had to offer.
Users had trouble distinguishing the bottom tabs and text. Users skipped the app introduction and users had difficulty adding products to favorites. I learned that for the next guerrilla usability test that I should design text larger and draw more recognizable icons.
After testing users I ended up making these sketches into digital low fidelity wireframes. I was able to transition a lot quicker by making sketches and creating a style guide. This is the style guide that I created after creating a moodboard. I was able to set the colors, UI elements, and imagery. This helped me continue with designing high fidelity wireframes.
Users will be able to do multiple functions such as add to favorites and diary, share and have their own favorite list.
I am now set to design the application in a high fidelity wireframe. Now that I know what information to show users about nutrition labels and values I can continue with a more detailed design. The company's goal is to show users nutrition labels and values and to test if this information is valuable to them. Another challenge for the company was to know if people would use these values and how. Also, to increase user experience and satisfaction within the application. Now to test users and see what works in the design and what doesn’t.
Users will be able to scan food products quickly and conveniently with their camera function in the app.
Users can now filter foods that are vegan, gluten-free, non genetically modified foods, and much more.
Users will be able to do multiple functions such as add to favorites and diary, share and have their own favorite list.
Four participants tested the design that was more detailed with more wording, imagery and colors. They were asked to complete tasks within the app. Before proceeding with the user testing I did not know what to expect from users regarding what nutrition value information they find valuable and how their experience will be different than reading a nutritional label. After this user testing I found the answer to my challenges. I am confident that I can provide more value, more usage and a better experience than reading food labels within the app.
Users were able to follow with the majority of tasks successfully. The tasks were then modified after for better understanding. I had to be more direct with the questions because they were more difficult for the user to complete. Users were impressed with what information the application offered.
Users wanted the design to be more colorful and bold. Call to actions were not visible enough. Some users couldn’t go back on some screens. Also users felt the information provided in a product wasn’t extraordinarily useful like the way they expected it to be. The gesture screen was a total failure. Users were not quite understanding what that screen meant. Users also did not know there was a camera functionality within the search screen.
Users felt the information was incomplete and needed more information.
Give more details or information about foods in the food description. List out health benefits and health consequences. Use the “i” icon for more information on certain information, where the user can interact with.
Users really found this information valuable after adding colors, seperating design and text elements. This design neatly organized it for users to understand nutrition values and how it can change their health. After changing the design of this screen, users ended up spending more time analyzing the page.
Users felt the information was incomplete and needed more information.
Give more details or information about foods in the food description. List out health benefits and health consequences. Use the “i” icon for more information on certain information, where the user can interact with.
Gesture screen was not clear enough for users. It did not work as intended because users did not use the swiping gestures. It however did help users know that the item can be tapped on.
Make a gesture screen for each interactive action. List the steps a user needs to be able to add to favorites and to their diary.
Skip option not available in certain screens. Users did not know how to skip through certain screens.
Included the “Skip” option in screen that needed it. Adding additional benefits for why the user should register is also beneficial for the company to get more registered users.
Five participants were tested with the updated designs. This time the tasks were reworded to be easier. Now that users were tested once, I know what information is valuable, which design elements will be used and how to provide a better experience to users within the designed app. I am more confident that I have met the business goals and challenges. The goal was to show users nutrition labels and values and how that can change their health.
All users signed up for an account this time without asking them to sign up. I thought this was an interesting finding. The product description screen was heavily focused on within the user testing. Users found this screen to be interesting and stayed reading the information.
Users were trying to interact with this gesture screen this time. If this screen was to be developed, the user will have that choice. It was more difficult to replicate this in a prototype. This screen will only show up once and also the user can see this gesture overview screen in a designated page with the application.
Adding extra features would be the next product release. A feature that would allow users to customize food per serving and for the nutritional information to change based on user response. For example changing serving size, weight, height, goals, activity levels.
Another feature would be for the favorites to show a signal when adding a product to favorites. One design element that needs change is the delete option should change colors when users are deleting several items from their favorites.
