Eat Well App
DURATION: 3 WEEKS
OVERVIEW: Eat Well is a health and nutrition app that was created by a team of 3 individuals including myself. The idea for Eat Well came from the empathy we all had for people who have trouble finding foods that fit their specific dietary needs, which ends up making grocery shopping even more time-consuming for people with busy lives.
The Problem: We live in a modern society where people are starting to understand the importance of health and nutrition, which has also shown a rise in people with specific dietary exclusions for their well-being. Specifically, we wanted to focus on people with allergies and intolerance, as consuming the wrong foods could lead to serious medical consequences for these people. My teammates and I also all had some sort of dietary restriction due to either gastrointestinal disorders or intolerance of a common ingredient found in foods that are eaten by Americans every day so we could easily empathize with our user.
The Solution: My team and I thought we might solve this problem by creating a mobile application that will help users find information about the foods they want to eat or can not eat. We wanted to create something that will be valuable to anyone who consumes food, with the primary focus of helping to improve the lives of people living with chronic conditions that limit their food intake; i.e. (people with special diets, food allergies, food intolerances, gastrointestinal conditions – Crohn’s disease, IBS, celiac disease, etc….).
Research
The research for Eat Well was eye-opening. Our research really focused on surveying everyday people, including our peers and people within the millennial demographic. We used a questionnaire, which brought about a significant amount of responses. The questionnaire consisted of ten questions about food and nutrition habits of people. We were really focusing on learning about those individuals with really specific food needs related to their personal health.
Surveys
We incorporated the use of social media surveying, something I believe I will continue to experiment with along my UX-UI journey. The questions followed a similar format to the questionnaire, with a bit of a twist to adapt to the Instagram story format.
The amount of qualitative research we collected came from a total of 57 people, which was very helpful and reassuring to us because we needed to move forward due to our tight deadline. Lastly, it is important to note that we did conduct a few 1-on-1 interviews which gave us first-person insight into the motivations of our potential users.
Interviews
The people we interviewed take a lot of risks when eating. They aren’t always sure if foods will make them sick or cause a reaction.
We needed to figure out a way to make it easy for people to make better and more informed decisions about the foods they eat and help eliminate the fear of eating due to whatever health issues they experience. The following quotes came from some of the interviews we conducted as a group.
Competitor Analysis
We decided to do some market research on mobile apps that were doing the same thing or something similar in order to decide what would make our app different. We conducted a competitor analysis chart with a few comparative apps, however, there were two apps that stood out to us. The direct competitor of choice for us was ShopWell, a food scanner app while our indirect competitor of choice was the Food Intolerances app. You can see a bit more details about each company in the diagram.
Definition
Affinity Diagram
Affinity diagramming is a tool that we used to help us sort through the data collected. We were able to divide our user research into the following categories: Food Research Thinking Process, Health Apps, Possible Features of the App, Pain Points, Eating Habits, and Reasons For Food Restrictions Diets (Allergy, Symptoms, Religion, Medical, Personal Preferences)
Once we collected our data, we defined who our users would be. We were able to create two user personas, one being the primary user and the other being the secondary one; see the gif below.
Our primary user, Unbreakable Ursula would likely use Eat Well to keep her diet in check to ease her symptoms from her diagnosed gastrointestinal disorder.
Our secondary user, Laid Back Blake is a friend of Ursula who has a son with a peanut allergy and she wants to avoid foods that will cause a reaction in him.
Once our users were defined, we started to wonder who Eat Well would be as a company, so we decided to create a value proposition that helped us to understand how Eat Well would contribute to everyday people. We believe that our app is valuable to the everyday consumer, with a focus on individuals with medical conditions that limit their food intake.
Ideation
At this point, we had come into our own about what Eat Well would be and who it would be for. So from here, we began deciding on the actual features and design of the app, including the branding. We created an “I like, I wish, What if” diagram to sort the ideas and features we wanted to capitalize on.
The sticky notes highlighted showed the features we agreed on and favored as a team.
We eventually decided to focus on the following three key features of the Eat Well App.
Personalization – allowing users to add dietary needs and preferences to customize suggestions
Scan – see the UPC bar-code of a product to get instant nutrition and ingredient information about foods.
Creating Grocery Lists – users wanted to reduce the amount of time actually spent finding groceries that are healthy for them
We also created a User Journey Map (as seen below) in order to illustrate the story of our user finding and using the Eat Well App.
Prototype
The design thinking process is not a linear one, so it wasn’t uncommon for us to refer back to our ideation phase a few times to re-iterate and finalize changes. In this phase of the process, we started sketching and creating low-fidelity digital wireframes which eventually brought us to the final prototype.
Sketches
Below are the sketches that became the precursor to what we eventually called the final prototype. We also defined the most important pages for the prototype based on our key features, as stated in the ideation phase of this project.
Digital Low/Mid-Fidelity Wireframes
Moving forward we began to work on the first iteration of what would become our low fidelity prototype so that we could begin user testing to ensure the most user-first experience for the application.
Low/Mid-Fidelity User Testing
We conducted the following test once we decided that our low/mid-fidelity prototype could be understandable to users. We wanted to see how we could improve the user experience by asking actual users for their feedback.
Our user testing gave us critical feedback on our design and helped us foster a final prototype with better design practices. You can see where the most critical changes were below between our low-fidelity prototype and our high-fidelity one in the following iterations of the app.
The original lo-fi account personalization page did not translate to our users well, so it was suggested that we place the choices in a different way.
I also worked on improving the copy and tone of the app so that it clearly communicated to the users.
Final Outcomes
Now that we had some user feedback we moved forward to finalize our mobile applications design and branding we felt confident to move forward with our final prototype. We were on a very tight deadline, so it was necessary for my teammates and I to fill in all the spaces we could to finish this project successfully.
Design: Colors & Branding
It was important that we implemented a design style for Eat Well to properly reflect what we had defined our brand as earlier in the process.
The Eat Well app is all about eating healthy, planning healthy, and living healthy. We chose the green color because it expresses a calm, relaxed, peaceful feeling, and is associated with helping people to restore their health (i.e. eating healthy greens). This is why we chose green as our primary color. The orange color and the tomato red add vitality along with energy to the palette. Lastly, the teal color helps to balance the two together.
As we got close to finalizing the prototype we created a style guide reflective of our brand. A key feature of the app is to inform users about the ingredients they want while helping them avoid the ones they don’t so it was important that we had a friendly tone associated with the brand. While we wanted to keep a friendly vibe we still wanted the copy within the app to be direct so as to not sway users’ trust in us.
Final Prototype
The final prototype is seen below.
However, because we are UX designers before anything we proceeded to do user testing on the final prototype to ensure that users liked what we had created. While we received pretty positive feedback, we did implement a few minor changes to the final prototype in order to have the best one ever. Below are a few of the iterations we made.
Contact Information/Privacy Policy.
Added a “Leave a Review” Feature.
Updated the hierarchy of in-app copy/ CTA for better user experience and readability.
We decided to go an extra step and make an attempt to actually develop a working prototype of the Eat Well App, which you can see in the gif below. This prototype was developed using WebFlow, an online website design software program. click here for the prototype.
Social Media Branding Mockup
We went an even further step to create a full social media mock-up of an Instagram account for Eat Well. This was my personal project to do on the side and I enjoyed creating it using the Adobe XD program.
Click here to see it.
Future Features
Lastly, we thought about what this app could be and any future ideas that could help bring it to life.
In Conclusion
The user-first strategy helped us to make an app that people are likely to use because we had their input.
Information Architecture is an important aspect of creating a project of this caliber because we are helping people who have put their trust in our brand be change their lives.
Working on this project made me realize that there is a necessity for something like Eat Well and there is a market for it.