Food in Bytes

🥬 Mobile App Design

🥬 Image Recognition

🥬 Market Analysis

Role

Sole UX Researcher/Designer

Requirements Engineer (1 of 2)

Tools

Figma

Adobe AfterEffects

FlowMapp

Duration

Jan 2021 - Mar 2021

3 months

Project Overview

Food in Bytes was completed as part of the INF 151 course that's offered at UCI, which focuses on creating a design project and applying industry standard project management techniques. Our team was comprised of 6 individuals who are all Informatics majors: 2 requirements engineers, 1 UX designer/researcher, and 3 software developers. As part of this project, we charted our progress of designing and implementing an application.

Project Context

According to multiple polls from 2014-2019, a majority of Americans, around 60%, reported dietary restrictions because of health or religious reasons. I myself, being a vegetarian, am part of this 60%. With the growing number of recipe websites that cater to a specific diet, such as veganism, vegetarianism, or gluten-free, it’s easy to become overwhelmed with the complexity of recipes and not have access to recipes that exactly mirror ingredients in the fridge.

Food has been known as something that brings people together, but for individuals with dietary restrictions, it may sometimes set them apart and make everyday cooking more difficult. How do we provide a solution?

Around 60% of Americans report dietary restrictions because of health or religious reasons.

Design Process

The design process for Food in Bytes was lengthy and detailed. The bulk of time was spent developing collecting/analyzing user and market research and synthesizing design ideas from these findings. During this process, I also produced artifacts including a business case, scope statement, and risk analysis.

User Research

Who are we designing for?

To get a better understanding of various dietary restrictions as well as the concerns and pain points individuals with these restrictions have, we conducted 10 face-to-face user interviews. All interviewees lived consistently by some dietary restriction. We structured the interviews such that 5 participants would be under 30 while the other 5 were over 30. As a team, we wanted to explore the possibility that certain goals and/or pain points of these individuals have something to do with their age or current life stage.

Design Insights

Once our team had information from the interviews in hand, we were able to analyze the responses received and distill the participant insight into our own design insights. We generated 3 design insights that formed the backbone of our project's purpose.

Having options matters.

Users want feasible recipes.

Save and view for later.

  • Potential users may be transitioning from a different diet plan and need to have access to recipes for more than one diet plan

  • Potential users may need to find recipes for different diet plans, depending on family member needs

  • Potential users find that recipes following unique diet plans often involve complicated ingredients

  • Potential users need a way to find recipes that contain ingredients they already have

  • The ability to mark that a recipe is of interest is important to potential users

Personas

To further consolidate our user's goals, needs, and pain points, I created two user personas for our team. I made sure each detail, include personality and demographic, matched someone from our user base.

Meet Stacy! (THE STUDENT)

  • Goal: become 100% vegan before exiting college

  • Frustrations: busy during weekdays, has trouble documenting her interesting recipes for later in the weekend

Meet Oliver! (THE PARENT)

  • Goal: make it easier for him & his daughter to follow restrictive diets

  • Frustrations: has trouble finding recipes that suit both his and his daughter’s respective diets, is busy at work and wishes he can find recipes that cater to what’s in his fridge

Defining more narrow themes

After we created our personas, our entire team sat together and distilled all the new information we had learned (through our design insights and interviews specifically) into 3 core themes that we would be basing our design decisions on:

Feasibility

It’s frustrating when users are presented with recipes containing ingredients they don’t have

Lack of options

There are limited options for users experimenting with multiple diets

Memory

Users currently have difficulty recalling recipes at the time of cooking

With these themes, we were now able to define the problem space we would be working in:

Individuals who are restricted in terms of diet, for whatever reason that may be,  generally find it difficult to know what they can feasibly cook with the ingredients they have in their fridge. This is especially true for those who are transitioning to a different, more restrictive diet.

Individuals who follow these diets wish to be exposed to more options that work with the ingredients they have.

Market Research

What else is out there?

After gaining a better understanding of our team's potential user base and their needs, we evaluated what the current market looks like for a recipe system.

Competitive Analysis

As part of this evaluation, I conducted a competitive analysis along with another requirements engineer, which helped us assess the strengths and weaknesses in the solutions already on the market. The analysis involved exploring features either found or not found in each of the systems - SuperCook, Vegan Meal Plan, and Samsung Whisk.

SUPER COOK

A mobile application that focuses on users being able to input ingredients in and generating recipes from these inputted ingredients. 

Lacking: inputting of ingredients is still manual, requires more time and effort from the user

VEGAN MEAL PLAN

A mobile application that focuses on aiding vegan individuals in finding suitable recipes. Features include the ability to save and share recipes. The app does not focus on user ingredient input.

Lacking: any sort of ingredient input method (even manual), only caters to vegan users, not open to other diets

SAMSUNG WHISK

A fridge system and mobile application that focuses on using AI to automatically scan contents of the users fridge (scanner is on the fridge). User can then use the mobile application to find recipes based on the ingredients. App does not include any diet filters.

Lacking: a diet filtration, more focused on innovative way to capture data about food through fridge

SWOT Analysis

Finally, I conducted a SWOT analysis on our team's proposed system to ensure that our product would be competitive in the market we would be aiming to launch in.

With all of our research completed, we were able to now sit together as a team, discuss our overall findings, and distill our research down to some key design ideas for our application:

Design Ideas

At this point, our team also produced several requirements engineering-related artifacts:

Business Case

Scope Statement

Risk Analysis

Ideation and Flows

Sketching

After doing my user and market research, as well as producing artifacts that helped me solidify my design ideas, it was time to begin thinking how my solution would look like as a mobile app. To be honest, starting the ideation process was a bit daunting at first because this was the first time I was the only designer within a group!

I first sketched out different screens of the mobile app I'd be creating, including key features/flows such as manual ingredient input, image recognition through a scanner, and the generation of recipes.

User Flows

DRAFT USER FLOW

Next, I wanted to outline how the user would navigate through the features that I envision. I displayed this through user flows.

Here is the draft user flow I created using my handy whiteboard and Post-it's. Here, each post-it represents a decision the user can make, such as pressing a button or saving a recipe. In this initial flow itself, I made sure to include the "manual" option coinciding with the "automatic" option (represented by the black arrow in the image to the right).

FINAL USER FLOW

Next, I wanted to outline how the user would navigate through the features that I envision. I displayed this through user flows.

Here is the draft user flow I created using my handy whiteboard and Post-it's. Here, each post-it represents a decision the user can make, such as pressing a button or saving a recipe. In this initial flow itself, I made sure to include the "manual" option coinciding with the "automatic" option.

I then created a more specific flow for the process of finding a recipe:

Wireframing

Making my initial designs as cohesive as possible…

This was my goal for this part of the design process. Making sure every card has the exact same rounded corners as the one below it. Making the wireframes as pixel-perfect as possible would help me when doing high-fidelity designs later.

With this in mind, I began my wireframing process on Figma, starting out with low-fidelity wireframes. I also prototyped a few of the key features during this process, including saving/unsaving recipes, taking a scan of the fridge, and filtering recipes. Prototyping these features early on helped me further solidify my user flow and make any necessary changes earlier in the design process rather than later.

Design System

Now that I had low-fidelity wireframes in hand, I needed to decide upon some design language to effectively communicate my features to the user. Below, I've presented my design language as a design system. This design system includes language for branding, form elements, cards, and typography. Food in Bytes's design system is anchored by a dark theme, which was very fun for me to experiment and play around with!

Branding and Colors

I started with deciding on the app's colors, specifically those that will 1) represent the app and become part of its brand and 2) will anchor the app's designs, including colors for disabled and error states.

Typography

Next, I decided on the app's typography. I only decided to go with 1 font (Raleway), as I found that adding a secondary font may throw off the typography's hierarchy. For this app specifically, there are certain screens I anticipated would have lots of text, and adding a secondary font would be visually confusing for users.

Form Elements and Cards

The final pieces in my design system were the form elements and cards. I made sure both these pieces reflected each other in terms of their design language.

High-Fidelity Prototyping

How do I use my wireframes and design system in tandem? Are there any other changes I need to make?

I used my low-fidelity wireframes and initial prototyping to create a high-fidelity version. This version is what I used to do user testing later on in my design process. This high-fidelity prototype includes all the features presented in the revised design ideas. The flow of the prototype is almost identical to the final user flow presented above. Below are all of the high-fidelity screens included in the prototype, as well as overlays for the filter and keyboard mechanisms.

User Testing

How do users interact with the MVP? What changes need to be made?

User Task List

I created a task list for our team to use while we conduct user testing. We tested our prototype with 5 users. The task list includes a description of each task, where the user will begin performing said task (machine state), and what constitutes successful completion of the task.

User Testing Analytics

After each team member finished their portion of the user testing, we all compiled our notes and analyzed the number of successful completions for each task.

Changes to our MVP

From completing the user testing, it was clear that we needed to make 2 primary changes to our prototype: 1) Add a way for users to edit the ingredient list as it is being shown and 2) Make the search bar more visible. 

Final Designs

Here is the final prototype for Food in Bytes! I've included 6 of the key features of the application ~ I'm very proud of how this project came out and the things our team got to explore while working on it, such as working in dark mode and producing artifacts that are related to product management as part of a larger team.

Login mechanism

Image Recognition Flow

Manual Flow

Saving and Filtering Recipes

View Extended Recipe

Unsaving a Recipe

Lessons Learned

Food in Bytes was an extremely exciting project to work on! I learned a lot by being in charge of the UX Design of the project while collaborating with my teammates who were responsible for other aspects of the project, such as product/project management and front-end development. Below are some of my key takeaways from Food in Bytes:


1) Detailed user testing is key.
In past projects, I wouldn't go into the user testing process and a list of tasks/script in mind, which often made me fumble around during the user test. This time, I decided to try creating a detailed list of tasks with success criteria, machines state(s), and a description for each task. Getting these basic thoughts down ahead of time helped me delve deeper into the user's thoughts during the user testing process, which helped me later when I wanted to make changes to my prototype.

2) Performing market research is an important part of product definition.
This project is also the first time I performed market research. I found this market research extremely useful in helping me focus my design decisions into key features that I thought would be most useful for the target user group.

3) Make use of sketches and preliminary ideation.
During this project, I was able to make good use of preliminary ideation for design and user flows. Using my whiteboard + post it's for the user flow was very helpful because I was able to erase and move post it's around before finalizing the user flow. I've found that these preliminary ideation techniques are vital in not losing sight of the product vision.