EatWell: Helping America Eat Better
One (fewer) Cheez-Its box at a time
Project: EatWell app
Role: Concept/Research/Design
Duration: Jan - Feb 2022
Tool(s) used: Figma
Project vision and challenges
According to the CDC, almost 3 in 4 (74%) adult Americans are either overweight or obese. Yet 63% of Americans say they’re trying to eat healthy most or all of the time. Americans are clearly motivated to eat healthier – what could be holding them back?
Perhaps it's a lack of easy access to solid nutritional advice when they’re about to buy groceries. Since 85% of Americans own smartphones, an app that allowed consumers to scan a product and learn about how it fits in a healthy diet could help them eat healthier.
For my final Google UX Design Professional Certificate project I chose to design an app called EatWell that would help Americans make healthier grocery buying decisions.
My key challenge was to develop a worthwhile app in an already crowded nutrition app marketplace. The audience for the app is women aged 18-39.
Americans are clearly interested in eating healthier. Could advice on healthful eating help the cause?
Early research
Before any sketches or mockups, I conducted extensive desk research and several interviews to determine who uses nutrition apps and learn where and why they use them. These facts informed my approach as I designed EatWell:
-
The typical user of a diet application is young. According to a Statista survey in 2017, 26% of 18- to 29-year-olds and 17% of 30- to 45-year-olds use a nutrition tracker app regularly.
-
Losing weight and keeping it off was a New Year’s resolution for 45% of Americans in 2018, according to Statista. And a 2019 Statista study shows that over half of Americans would like to get more exercise and eat healthier.
-
Many women don’t know what to eat because there is so much conflicting information in the media.
-
Interviews showed an openness to short articles on how to eat healthier.
Interviews showed that users were open to using an app that would be free and published by a serious nutrition organization like (fictitious) EatWellNow.org. Since grocery shoppers are looking for well-reasoned advice and not a lecture, the tone of the app needed to be gentle and not scolding about nutrition. It would report no personally identifiable information back to EatWellNow. Research showed that users were particularly interested in an app and not as much in a companion website.
Our users: Siena and Destiny
I sketched out quick user personas based on my desk research and interviews.
Young woman – Siena, early 20s, maybe college, maybe not, not much nutrition knowledge, needs some guidance when at the store. Active, very tech savvy, single but w/ girlfriend.
Busy mom – Destiny, late 30s, two youngsters, divorced, ER nurse. Tech savvy, loves Facebook and Instagram, busy, stressed, would love good, reliable nutrition advice when shopping.
Next it was time to create the personas. While at different life stages, both women want to make healthier buying decisions at the supermarket - Siena for herself and Destiny for herself and two children.
Ideation: paper wireframes
I used paper wireframes to explore early designs of the home screen.
An initial sketch of a hero image and explanatory text looked promising.
My goal was a clean, simple interface that did what was required and nothing more - exactly what a busy shopper needs when trying to decide if the "natural" chips in aisle 7 are actually healthy.
Wireframes
Next I built out the lo-fi wireframes using Figma. I designed my first app in Figma and the second in Adobe XD. While they're both excellent tools, Figma felt more intuitive so I decided to use it for the final project.
The main design challenge was onboarding, as it was crucial to get people signed up so they could use the app. Nutrition recommendations wouldn't have as much value without some basic demographic and dietary preference information, so a condition of using the app meant that you needed to get onboarded and sign up. My goal for onboarding was a fun, almost friction-free process.
User testing
I conducted a remote, unmoderated user study with 5 people. The users had two tasks: to create an EatWell account and scan two food products and view their nutrition info. Here are the findings:
-
Three users noticed that they couldn't select more than one item on the "I'd like to" and "I'd like to avoid" screens. They were right as I hadn't added in that functionality for the testing and neglected to mention it.
-
One user wondered why there wasn't a top navigation bar on the sign up pages. I did consider leaving it there but wanted to remove as many distractions as possible so users would continue with the onboarding process.
-
Overall the app received high marks, with two users pleasantly surprised with features like "Behind the Numbers." One user thought the name EatWell was "cute."
High-fidelity prototypes
The hi-fi prototype showing all screens built out. Users can register/sign-in, “scan” food items and read deep dives into nutritional topics.
EatWell user flow
User flow detail showing start of onboarding
EatWell demos
These animations show the finished EatWell app.
Onboarding and scan food items user flow.
Tips for eating well user flow.
Takeaways and next steps
Creating the EatWell app was a stretch for me as it had the most screens and level of complexity of the three design challenges in the Google UX Design Professional Certificate course. The extensive onboarding screens had me learning something new every day (hour?).
Given more time with the app I would make it as fully functional as possible and do a serious round of user testing as I'm very curious what testers would think of it.