FoodLife Prototype • Slide Presentation

FoodLife: a product & service for health-conscious eating

For my first end-to-end user experience project, my intention was to design a product that could solve a real world problem. Having recently tried the Keto diet and aspiring to try Paleo, I chose to tackle healthy eating. I know friends and family members who also mean to eat well, but what does healthy eating look like from person to person?

This was a solo project, so I played the roles of Researcher and UI/UX Designer. From finding a real-world problem to designing a full prototype to solve it, this is the story of FoodLife—a product and service for health-conscious eating.

The Problem Space

To define the problem best, I first researched diets and the psychology behind how, why, and what we humans eat. I conducted surveys and interviews to find the pain points people had when trying to stay healthy. The most frequent issues centered around convenient access to healthy food, defining and finding the perfect diet, and staying consistent with healthy choices. With that, I developed this project’s problem statement: “How might we help health-conscious adults maintain the eating lifestyles they want?”

I decided that the best approach would be to make it easier for people to 1) define their own “healthy eating lifestyle,” and 2) adopt that lifestyle.

The Product: FoodLife

The solution I developed is FoodLife: a tool for helping users define their eating goals and stay on track with them. The FoodLife app includes a customized eating guide, recipes, and grocery list, all based on the user’s preferred guidelines.

The scope of this project was to get familiar with the research process and building interfaces via the design thinking process, so the app is the primary product. To solve the convenience part of the problem fully, however, I felt the need to add a food subscription service.

Here’s why:

The Audience

Through primary research, I found that my target users tended to be busy people who may not have the luxury of time or affordable food options on hand. Overall, they are health-conscious yet realistic, and open to trying new options that might work.

Here are highlights from each persona.

With Patrick and Hazel in mind, I made sure to develop a low-stress tool rather than a more strict approach. With FoodLife, they can create their own guides, see recipes and foods that fit within it, and get meals delivered to them consistently.

The Design

In designing the app’s MVP, I made sure to focus on two main functions. First, it must let users create and customize their own guides. Second, it must recommend recipes and food items based on user goals. The scheduled food subscription box would include quick meals that fit the user’s guidelines as well.

I decided to split the app into tabs for each main function: the guide, LifeBox details, and groceries. I added an account tab and the FoodLife dashboard tab so users can conveniently see all of their details at a glance.

FoodLife logo and color palette

Branding

“FoodLife” is a simple name that explains the purpose of the product. To reach the target audience, I wanted the brand aesthetic to look and feel driven, caring, smart, optimistic, and understanding. The colors are food and nature-related. Veggie green and sunny yellow are the foundations, and the coffee brown works well for dark elements. The muted blue is calming, and it reminds users of water and hydration. Both fonts—Barricada Pro for the logo and headers, and Lucida Grande for body copy—give character and strength without being too rigid—fitting for the audience.

Once I laid out the FoodLife moodboard and style guide with these elements in mind, it was time to start bringing this product to life.

Sketches & Iterations

In my early iterations, the full guide setup was squeezed into one screen with not much space for users to think or visualize the options. After going through several sketches and testing some early wireflows, it was clear that splitting up the information made it easier to digest. More screen space meant room for visuals, too. Not only would the food photos be pleasing, but they would also help users visualize meals for each diet.

I split the guide setup page into two parts. The first was for selecting diet options. I felt that presenting diets in the brand colors—green to start, yellow when selected—was more inviting than the checkboxes and toggle switches in past iterations.

I found a critical update within the second stage of the guide setup, where users would rate their food options. After reviewing the HMW and usefulness of the app as it was, I realized that user food ratings would not help them maintain healthy eating lifestyles. Personal health goals would, however. I replaced food ratings with goal setting, so users could visualize and commit to their goals (and selected diets) altogether.

A more welcoming and useful screen for guidelines

A major issue I found early on was in the guide setup process. In the first mockups, the user would choose goals first, then diets they liked. Through user testing and cognitive walkthroughs, it seemed obvious to start with the diet options as a base to build on instead. The user would customize that diet with personal goals and needs, so the two parts of the guide setup would actually work together.

To the right, you can see how the Guide page grew in usefulness as well. I removed the list of foods the user likes, and instead, suggested meals with photos and links to full recipes. The Guide still shows guidelines the users will need to follow, but incorporating their goals instead of specific food items would create more meaningful and intentional suggestions.

A Final Fix

In the last phases of usability testing, there was still a lack of context at some points, and much of the functionality still needed to be explained. Most of the actions were frictionless, but understanding the full concept was not as intuitive as I anticipated.

To fix this, I added popovers to give the functions more context (and give the user more understanding) without cluttering any screens. Later testing brought less questions about the product’s features. I would have to give credit to these popup screens.

The Result

After months of research, user testing, mockups and iterations, the FoodLife prototype is here. Some users were excited to start using the product and were sad to hear it wasn’t quite a real app—a great compliment for my first solo project.

How might we help health-conscious adults maintain the eating lifestyles they want?

I believe this final product would truly help users define and access their diet goals while making it more convenient and enjoyable to stick with it. With a low pressure guide at-a-glance and quick meals delivered, there’s only room for opportunity. See Prototype

This project taught me all about diets and how much people’s relationships with food differ. Deeper than that, it showed me how one’s journey to happiness could be as simple as finding constraints they can live with and committing to them every day.

I’m happy about how this project turned out, and I’ve definitely found my happy place as a low-carb pescatarian. Something tells me this won’t be the last food project I work on, either; there is some serious work that can be done in the food health space.

UX Case Study: Product Design for Intentional Eating