Title: Chews Wisely
Project Time: 12 days
Team: Cory Malnarick and Myself
My Role: Team collaboration for research. Lead for design strategy, user journey creation, and storytelling presentation plan. Second-in-command for wireframing and UI design.
Project Context: This project was the fourth of five completed during the General Assembly UXD Immersive Program. We were instructed to pick a topic, hypothesis a possible problem users face within that topic, and then apply the design process to solve the problem. My partner and I chose nutrition and grocery shopping and hypothesized that users have difficulty or feel confused when trying to maintain their standards of nutrition. We wondered, how might we help users make better decisions about their health when grocery shopping?
RESEARCH + STRATEGY
For the purposes of our research, we narrowed our scope to city-dwelling millennials who care about nutrition but are not experts. We surveyed 45 people and conducted a grocery store shop-along to learn about our intended audiences’ grocery shopping habits and what role nutrition plays when they’re shopping. We then followed-up with several in-person interviews to dig deeper into our target users’ motivations and feelings.
Through our research, we found a few key insights:
Nutrition guides our audience. Six out of every 10 people, said that nutrition was the most important thing to them when grocery shopping.
“I read the ingredients, look for unprocessed foods and avoid sugar”
And, “nutrition” means something different to each person.
“I buy filling foods and avoid dairy and gluten”
Though nutrition is the users’ primary guide, most rely on their existing knowledge to make decisions at the grocery store.
“I started reading nutrition labels after reading Michael Pollan’s Food Rules in college.”
However, the nutrition experts we spoke to said that labels are deceiving.
“I relied on the ingredients list and realized after research that it was lies. I consulted my doctor for clarification.”
These insights highlighted a missing link and our opportunity. Our intended users may unintentionally make decisions that are not aligned with their nutrition values. When it comes to applying their knowledge of nutrition at the grocery store, there are unforeseen nuances. Within a single grocery shopping trip, our intended users usually face at least 1–2 difficult decisions. When debating over an item, they rely on the nutrition label to help them make a decision. However, according to the experts, nutrition labels can be misleading.
With these insights in mind, how might we assist nutrition-focused, non-expert users with in-store grocery shopping decisions by providing transparent and clear access to nutrition knowledge?
Since this was a school project, we had the luxury of deciding our point of view. For example, who we were as a business, what type of design we would provide (ie. digital and/or service), and what our revenue model would be. After gathering our research, we ideated about who we should be from a business standpoint. We found two points of view that were strong and required little work from the user.
1) Redesigning the FDA nutrition label
For the FDA nutrition label redesign, we wondered how we could make the label less deceiving. Thankfully for us, we are not the only people that recognized this fact. We researched variations of the existing label redesign ideas and found there are many ways nutritional content can be better portrayed. Visual aids such as graphs, stoplight colors, more detailed food processing information, and nutritional facts about added and removed sugars and fiber were all common themes.
2) Redesigning the grocery store experience
For the grocery store experience, we consider how we might build easier decision-making into the user’s experience. Like the nutrition label, bringing the solution directly to the user in the store would require the little effort on their part. Shelves could be organized by level of processing a food has gone through, or a level of “healthiness” determined by nutritionists. Store employees could be more knowledgeable about nutrition and prepared to help customers, pesticides used or distance the food was grown could be included at each produce section, interactive nutrition labels could be displayed on each shelf, and the list goes on.
We liked both of these ideas. However, our research was focused on a specific audience, not the entire country, so these redesigns were far out of scope. In addition to assisting our intended users, these redesigns would impact the greater population. We also know our users have different opinions about what is “healthy”. We did not want our solution to have an opinion about what healthy is. Instead, we wanted to provide the user with the tools and knowledge to make the decision that is right for them. We decided not to pursue these paths since they did not align closely with our research. Instead, we decided to on a customer-facing app that our audience could use at the store when faced with a difficult decision.
From our user research and secondary nutrition label research, we narrowed down some key concepts that were important to our users and would help them shop better.
We created initial wireframes that included all of our original ideas and user tested. After testing we found that the colors needed updating and the visuals could be clearer. We went back to the drawing board to better our design and further develop our features.
Barcode Scanner: The homepage would have a barcode scanner so the user can easily scan an item that are interested in.
Interactive, Modular, and Updated Nutrition Label: The item’s nutrition facts would populate the newly designed, visual label. The daily value percentages are based on the user’s personal daily intake goals and the serving sizes are adjustable. The ingredients are interactive and allow the user to click on items to learn more about them.
A few important pieces of information have been added like level of processing, glycemic index, and added and removed sugars for the user who values these details. Each piece of the digital label can be moved around depending on what information you care most about. For example, if you are on a low carb diet, the carbohydrate section can be moved to the top so it is the first thing seen when a new label is scanned.
Personalized Profile: The profile is primarily important for letting users specify their dietary restrictions, nutritional values, and adjust their daily value goals. All items could be prioritized too. For example, if you like to eat a diet high in fiber but it’s not a deal breaker, a food that is low in fiber won’t appear as a “unhealthy” for you. However, the recommendations section could help you find a better fit.
Curated Recommendations: The recommendations section provides suggestions based on your profile and other options available in the store.
Product Comparison: Compare items side-by-side in the app. The label of a newly scanned item would automatically adjust to the same preferences of the first label scanned.
To put the solution into context, consider one of our target users, Jake. He grocery shops once a week with a mental list of the items he needs. He also tends to improvise at the store based on what he’s craving at the time.
This week, Jake is craving cheese. He doesn’t buy it often so doesn’t have a usual type or brand in mind.
Jake heads to the cheese section where he finds some string cheese that looks like the perfect thing to fulfill his cravings. He picks up the package and reads “Niacin” in the ingredients list. He doesn’t know what his is but notices a ad for Chews Wisely at the store that suggests he can learn more about his food. Since Jake cares about nutrition, he decides to download the app.
Jake opens the app and scans his item from the home screen.
Jake is presented with an interactive, clear nutrition label. He scrolls down and sees Niacin and taps it. The app provides a definition of Niacin. Turns out it’s vitamin B, he decides Niacin is a-okay for him. He thinks he will probably eat more than one cheese at a time so he adjusts the serving size as such. The interactive label presents jake with an updates label based on his decided serving size. He then sees that his serving size amount provides him with far too much sodium than he knows he should eat in a sitting. He scrolls down and sees that the app recommends an alternative item with a better health score.
He taps the recommendation and it compares it with the existing label, side by side, to best present differences in the labels and why the score is better for the recommendation.
Jake finds his new cheese, with low sodium and now knows what Niacin is all from using the Chews Wisely app. Jake leaves the store feeling satisfied and confident after making a wise, healthy choice.
On his train ride home, he plays with the profile of the app to adjust it to his own calorie and nutrient needs.
Update colors: The colors still need work and we think the stop light colors would be effective if included.
More user testing: The app is still a prototype and more user testing would help us narrow down a design we are more confident with.
Comparison for more than 2 items: The current design does not include comparison for more than 2 items so it would be beneficial to test some designs around this concept and include it in future iterations.