DODEFY
UX & UI Designer
PRODUCT DESIGNER
DEFY THE ODDS
YOUTUBER
0

Problem Statement

Introduction

Dodefy Health is a nutrition and food database app that allows users to see critical nutrition information correlated with medical advice. 

The Solution

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. 

The Problem

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).

My Role

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.

Targeted Users

All Ages
All Nutrition Expertise

Tools Used

Photoshop

Illustrator

Sketch

Miro

Invision

Methods Used

Screener: 18 Participants
5 User Interviews
3 Users on Guerillaba Usability Testing
10 Moderated User Testing 


Starting Off The Process

User Research

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.

Findings

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.

Beginner & Low Intermediate
& High Intermediate & Proficient

Gathering Insights From User Interviews

User Research

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.

Findings

Pros

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. 

Cons

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. 

Seperating Distinguishable Characteristics

I ended up making a venn diagram to quickly distinguish the characteristic from both targeted groups: beginner & low-intermediate, and high-intermediate & proficient. 

Building a Stronger Connection

User Research

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. 

Findings

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. 

Beginner & Novice User

Intermediate & Proficient User

Meet The Starter & The Expert

User Research

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. 

Findings

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. 

Goals

Learn to read & understand nutritional labels & values
Practice better eating habits while implementing best practices.
Learning general information.

Frustrations

No to Low Confidence
Worried about what they are consuming
Not fully aware of nutrition labels & values

Needs

Expects instructions and guidance
One to one interaction
Entire physiology, measurement, values break down

Problems

Lacking Knowledge
Need more instructional content
Need comparison values

How The Starter Feels About Nutrition Labels & 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. 

Goals

Learn and memorize the physiology of all
Learn in depth about measurements, daily values, recoemmendations,
macro and micro nutrients
Learn more resourceful information

Frustrations

Diffiuclties in reading & understanding
Confusing to keep track of

Needs

Reassurance
Detailed Explanatory Process

Problems

Forgetting
Understanding food labels as a whole entity

How The Expert Feels About Nutrition Labels & Values

Analyzing Design Principles From Competitors

User Research

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. 

Findings

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. 

Investigating Quantitative Insights

User Research

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. 

Findings

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. 

Finding the User Journey

User Research

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. 

Findings

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. 

Laying Out the Pages

User Research

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. 

Findings

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. 

How Would a User Navigate to Find a Food Product? 

User Research

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. 

Pros

It was great to further expand on the sitemap and know more about how users interact and decide to navigate through the screens. 

Cons

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. 

Findings

Transitioning User Research Into Design

Design

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. 

Testing These Low Fidelity Wireframes 

User Research

A guerilla usability testing was then performed on three users with the low fidelity wireframes. 

Findings

Pros

Users were able to navigate throughout the app design successfully. All users liked the content the app had to offer. 

Cons

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. 

Sign In & Sign Up

Insert Text Search Functionality

Favorites & Edge Cases

Filter Functionality

Moving Into Branding & Higher Quality Designs 

Design

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. 

Find Any Food Product by Searching or Scanning UPC Label.

Users will be able to do multiple functions such as add to favorites and diary, share and have their own favorite list.

High Quality Designs

Design

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. 

Insert Text Search Functionality

Scan on the Go!

Users will be able to scan food products quickly and conveniently with their camera function in the app.

Search Results Filter Functionality

Users can now filter foods that are vegan, gluten-free, non genetically modified foods, and much more. 

Favorites Functionality

Users will be able to do multiple functions such as add to favorites and diary, share and have their own favorite list.

First Round of User Testing Results

User Research

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. 

Pros

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. 

Cons

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. 

Issues

Users felt the information was incomplete and needed more information.

Recommendations

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. 

Findings

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. 

Issues

Users felt the information was incomplete and needed more information.

Recommendations

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. 

Issues

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. 

Recommendations

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.  

Successful Design Iterations Based On Second Round of User Testing

User Research

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. 

Pros

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. 
 

Cons

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. 


Findings

Next Product Release

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.