Looking For Fashion?




What if AI Taught You to Eat Well — a UX Case Study


What if AI Taught You to Eat Well — a UX Case Study

We all enjoy a good meal — but when it comes to improving food habits, it is often hard to be consistent in learning what’s good for you. Lots of people track their food intake for diverse reasons: from managing particular health conditions, achieving weight-loss, or muscle gain goals.

Note: I do not work for nor am affiliated with any companies mentioned in this article. All the design decisions are based on publicly available information.

Challenge

Being passionate and cautious about food myself, I wanted to explore the following topics:

#1. How are people currently using technology to reflect their food habits?
#2. Are the available tools accurate and relevant to each user’s needs?
#3. Identify user pain points.
#4. Prototype a solution.

This case study was created to examine the existing digital calorie/nutrition tracking experiences. Ultimately, I aim to design a new product that will help the various types of users understand and improve their lifestyle, taking into consideration their varying knowledge, interest, and dietary constraints.

Strategy — Defining the Who, What, and Why

Market Research

Although people are increasingly getting interested in making better food choices and exploring different digital tools, food tracking is still a time-consuming and often error-prone process. Most of the available apps rely on manual data entry. To alleviate users’ effort, my food tracking product should provide a coherent and cohesive service to automatically estimate nutrition and assure sufficient balance to match dietary requirements and performance targets.

French Fried Facts and Figures

38% of Americans followed a diet in 2019, according to the International Food Information Council Foundation. This means that 2 out of 5 people have been taking action to improve the way they eat.

The generation between 20 and 30 seems to see food not just as necessary but also as an adventure. As stated in Instagram global statistics, almost 70% of millennials take photos of their meals before eating to capture the momentum of their dining experience — and then use digital tools to collect and share content within their network.

Additionally, 4 times more content is consumed by food lovers on Instagram compared to the average user. Other social channels popular among Generation Z like Snapchat and TikTok also have high user engagement in food-related content.

A Goal in Mind, a Finger in the Pie

Consequently, I set out to design a mobile solution applying gamifying mechanics used in social media to create a satisfying and fun experience. This would be done by implementing AI recognition to provide an option to auto-populate nutrient data to free user’s time, giving them an opportunity to create content for sharing. My purpose here is to integrate this self-improvement process into a digital routine that is fun and easy to use.

Understanding the User’s Contexts and Needs

It’s important to understand how users differ, what their goals and needs are, and how they think and feel. In order to create a realistic representation of the user segment, I conducted user research on some friends living in the US, Canada, and Australia.

To be able to understand all the different possibilities of why someone would use a food-tracking app, I created a list of probable users, stories, goals, and outcomes. This helped me dive into the mindset and background of their behaviors and needs. All the assumptions and design decisions made in the initial phase were validated or invalidated during user research and testing.

To inspect the reason behind creating this digital diet service, I created a chart inspired by the Ikigai exercise:

Empathy Map

I combined the key insights of this user research in an empathy map to immerse myself into a user’s environment.

Empathy map

Personas

The results from the user survey suggested that there were several types of users with diverse needs. It provided sufficient information to create 3 provisional user personas:

Delegator
Do-it-yourselfer
Advice seeker

Competitor Analysis

Before jumping off to the sketching phase I researched the existing market offerings with similar solutions to identify best practices and missing pieces. I applied heuristic evaluation principles for identifying usability pain points in current contexts — to make them addressable and solvable. I collected actionable insights on creating an effortless user experience.

Defining the Scope

Information Architecture

To organize and maintain a useful and usable body of information I structured a basic hierarchy IA by conducting card sorting and tree testing exercises.

Basic IA structure

User Flowchart

Up until now, I had a vague idea of how the app should work. I mapped out a basic user flow to figure each step of how the user will move through the content of the app. The flow will be translated into sketches to blueprint every stage of the flow.

Cooking a meal at home user flows

Sketches — Nothing Beats Pen and Paper!

The next step is to refine the ideation sketches by applying interaction design principles.

Hand Sketching

Implementing the Solution

Wireframes — the meat and potatoes of the new app

Once I felt ready, I digitalized my sketches into a set of wireframes to conduct my next round of user testing. These wireframes work as a visual guide that represents the skeletal app framework, which allows me to focus on key actions before starting on visual design.

Name & Logo Identity Ingredients

The name Yummy Frame is meant to reflect the idea of an enjoyable meal captured within a camera’s frame. I designed a simple logo that can be associated with a couple of visual references: a QR code, a fork on a plate, and the phone camera focus icon.

UI Components À La Carte

Before getting started with the visual design I created an inspirational mood board to explore and analyze the visual language from food-related products and services.

I chose a well-balanced combination of Museo and Lato typefaces to complement the natural earthy color palette of beige, orange, peach, and green. Additionally, I made all the corners rounded and included a great deal of white space to give a calm and soft appearance. The UI components library for Yummy Frame consists of a uniform visual style to build user interaction as simply and efficiently as possible.

Selected elements from the app library

Onboarding in a Nutshell

The goal of the onboarding flow is to collect information about the user’s characteristics and behaviors to create a truly personalized experience tailored to their needs.

The primary challenge was to make the users answer a questionnaire without getting them discouraged and turning off the app. I simplified it into a “one step at the time” process, showing the journey length in the progress bar.

Half-baked Mid-Fi Visual Design

The interactive mid-fi prototype represents the design in more detail. It is an illustration of how the product screens will look and work before it ever goes live. Its main purpose is usability testing with defined tasks for participants to validate. The stakeholders are more likely to behave naturally during testing and provide feedback that will help to foresee any issues or functionality failures.

As soon as the users create an account, they are able to snap and validate a meal image, to make sure their first interactions with the app provide a worthwhile and inviting experience.

Apple Watch Version

Food for Thought with a Grain of Salt

I had a blast working on this design exercise! It taught me how to keep the people I’m looking to serve at the heart of the design process by recognizing their needs and mental models. I identified and proved some of my assumptions in this digital solution. The project didn’t just help me stretch my interests in user experience design, but also pushed me to learn more about user behavior.

Thank you for reading. I’m always looking to meet other professionals in the field or those who are interested in learning more about UX. I really appreciate any feedback or areas I can improve. Feel free to get in touch.

Connect via LinkedIn
Or drop me a line
d.shustova@gmail.com


What if AI Taught You to Eat Well — a UX Case Study was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.