A La Carte

An end-to-end application for home cooks

Role: Product Designer (including research, strategy, information architecture, interaction design, UI design, user testing)

Tools: Figma, Airtable, Zoom, Whimsical

Date: March - April, 2021

Project Overview

PROBLEM

In the US and Canada, 30-40% of the food supply is wasted, equaling more than 20 pounds of food waste per person per month. This project set out to empower home cooks to utilize ingredients they already have in their home that are about to expire, rather than disposing of them. I looked to design an application that allows home cooks to easily find recipes for the ingredients they have leftover. 

OBJECTIVES

This project aimed to (1) design an end-to-end mobile application that helps home cooks utilize ingredients they have leftover, and (2) design the logo and establish the brand for the application.

SOLUTION

An end-to-end mobile application that enables home cooks to better manage the ingredients they have leftover, thus reducing food waste in the US.

Phase 1: Research

RESEARCH PLAN: OUTLINING RESEARCH

I started the project by conducting research in order to better understand the users and evaluate my current knowledge of how home cooks manage their kitchens and leftover ingredients. To help frame my research and ensure a structure was in place, I created a research plan, which includes the goal, objectives, assumptions, methodologies, participants, questions, and timeline.

Overall, my goal when conducting research was to learn the value of an application that enables users to find recipes so they can use up their soon-to-expire leftover ingredients.

I also outlined several objectives in my research plan for areas I was particularly interested in learning more about:

• Understand the market and trends in home cooking and food waste
  
• Identify competitors and their strengths and weaknesses
  
• Understand the customer base and their needs, goals, fears, and frustrations
  
• Understand user sentiment towards cooking and what, if any, current methods are utilized to find recipes and use ingredients

The research methodologies I used for this project were secondary research (including both market research and competitor analysis) and primary research (through user interviews).

Secondary research

MARKET RESEARCH: UNDERSTANDING THE FOOD INDUSTRY

I began by conducting market research, looking at broader industry trends and any recent shifts, to gain a better understanding of the market as a whole and help me understand the users I would need to speak with, as well as the questions to ask them, during my primary research.

I looked at four main topic areas and found:

Food industry

• On average, the effects of COVID-19 are likely to increase the growth of FAH (food at home) sales by 1% and decrease the growth of FAFH (food away from home) sales by 0.9%.
  
• Food and beverage in-store sales for the first 8 months of 2020 were up 12.2% compared with 2019.
  
• Grocery store food prices increased by 3.5%, on average, from 2019 to 2020. Supply chains struggled to adapt to the transition, which put upward pressure on retail prices.

Food waste

• The United States is the global leader in food waste, with Americans discarding nearly 40 million tons of food every year. 
  
• More than 80 percent of Americans discard perfectly good, consumable food simply because they misunderstand expiration labels. 
  
• According to the USDA, Americans waste more than $161 billion each year on food. The average American family of four throws out $1,600 a year on produce. 
  

Cooking at home

• 54% of Americans are cooking more and 46% are baking more since the start of the pandemic.
  
• 60% of Americans are looking for ways to use ingredients on hand.
  

Demographics

• When asked about their post-pandemic plans, a full 43% of Gen Z respondents said they intend to cook at home more after the pandemic is over.
  
• Older generations are typically much more likely to cook at home every day than younger generations. However, one-third of millennial and Gen Z consumers have learned new cooking skills during the pandemic.
  

COMPETITIVE ANALYSIS: EXAMINING COMPETITORS

Looking at both direct and indirect competitors through a competitive analysis helps me to not only get a sense of their strengths and weaknesses but also identify potential areas where A La Carte can better differentiate itself against these competitors. 

PROVISIONAL PERSONAS: IDENTIFYING THE USER

With the secondary research complete, I took insights from market research to create provisional personas, helping me identify who I should target and speak with for user interviews.

Primary research

USER INTERVIEWS: TALKING WITH USERS

Building on my knowledge of the market, I wanted to speak with home cooks directly to get insight into their needs, goals, fears, and frustrations. I created an interview guide to frame my interviews, focusing on understanding how a user manages their kitchen and ingredients. I conducted six interviews in total, targeting those who frequently cook their own meals and purchase their own ingredients. After completing the interviews, I returned to the assumptions I originally laid out in my research plan and found that:

• People end up throwing out a lot of food because it’s expired. Validated. 4 out of 6 participants mentioned throwing out food because it had gone bad.
  
• People forget when ingredients are going to expire. Validated. 4 out of 6 participants said they were not diligent about throwing out expired food.
  
• People are interested in finding new recipes to cook. Validated. 5 out of 6 participants look for new recipes when deciding what they’re going to cook.
  
• People find new recipes through people they trust, such as an influencer or friend. Validated. 4 out of 6 participants mentioned going to tried and true sources for recipes.
  
• People plan out the recipes they’re going to cook each week. Validated. 5 out of 6 participants plan out their meals for the week.

Research Synthesis

EMPATHY MAP: DEDUCING USER INSIGHTS & NEEDS

I found some interesting insights from my conversations with users, and I wanted to be able to synthesize the data I had collected. I created an empathy map to uncover findings from user interviews, identify patterns to prioritize focus areas, and ensure empathy with the user. This process led me to extract insights from users, which in turn helped me to define the needs of the user.

Insights

Users prefer to plan their meals ahead of time.

Users are not diligent about getting rid of leftover ingredients.

Users try to only buy ingredients they think they’ll need.

Users are interested in trying different recipes.

Needs

Users need to know what ingredients to purchase so they have everything on-hand.

Users need to know what ingredients are in their kitchen that are going to expire.

Users need to know how much food they will cook with for a given week.

Users need variety in their cooking.

USER PERSONA: UNDERSTANDING THE USER

With my findings from research, I created a user persona to get into the mind of the user and to keep the user at the forefront of my designs. Meet Isabella, an accountant who lives with her boyfriend in Denver. She will typically plan her meals for each week and looks to purchase groceries based on the meals she's planned for. Throughout the remainder of the project, I kept Isabella at the forefront of my decisions, ensuring that my designs would keep her goals, needs, fears, and frustrations in mind.

Phase 2: Define

Define & Ideate

POV STATEMENTS & HMW QUESTIONS: DEFINING THE PROBLEM

Utilizing the insights and needs derived from the empathy map, I could define the problem to focus on by outlining point of view (POV) statements and how might we (HMW) questions. This ensures I’m focusing on the problem at hand while laying the groundwork for ideation and brainstorming. Below is an example of a POV statement and HMW question I developed.

POV Statement

Isabella needs to know what ingredients to purchase so she has everything on hand because she prefers to plan ahead her meals.

HMW Question

How might we help Isabella know what ingredients to purchase?

Brainstorming

INDIVIDUAL BRAINSTORM: GENERATING MY OWN SOLUTIONS

With the HMW questions outlined, I utilized these as the basis for an individual brainstorm during which, using the mindmap structure, I timed myself for three minutes to ideate on solutions for each HMW question and repeated this process twice. Brainstorming helped me think through how the A La Carte application could help a user such as Isabella with their needs.

Strategy

PRODUCT GOALS: OUTLINING STAKEHOLDER GOALS

After brainstorming solutions to address the user’s needs, it’s also important to keep in mind the goals from a business and technical perspective, as well as the user, in order to help prioritize features and ensure they map back to the goals of all stakeholders. With the goals of the user, business, and technical team identified, I also outlined mutual goals between the groups, which helped me identify the main goal to keep in mind for all three groups: for home cooks to feel empowered in their kitchen. 

PRODUCT ROADMAP: PRIORITIZING FEATURES

With the goals outlined, I compiled insights from ideation and went through each solution to develop a product roadmap, marking the solutions based on their relation to the product goals, level of confidence in the solution as backed by research, and the effort required to execute. Creating the product roadmap helped me prioritize the features into four categories, with the top features to move forward with first under the Must-Have (P1) category, followed by Nice To Have (P2), Surprising & Delightful (P3), and Can Come Later (P4).

Information architecture

APPLICATION MAP: INTEGRATING NEW FEATURES

Knowing which features I prioritized for A La Carte, I began to create a sitemap to understand the organizational structure of the application and identify content groupings, which helped me identify how to best integrate the features into the A La Carte application.

Phase 3: Design

TASK & USER FLOWS: HELPING ISABELLA NAVIGATE THE APP

Before taking pencil to paper and sketching the design, I wanted to ensure that I was keeping our user, Isabella, in mind and her primary goals. I began by creating a UI Requirements document to understand all of the screens and interactions needed to design the A La Carte application, as well as the tasks she would complete while navigating the application.

I then created three task flows to help Isabella complete her primary tasks as she navigates the features within the application. This helped me be more specific in identifying how Isabella would complete each task, outlining how she would go through the necessary screens and actions.

To further expand the task flows, I outlined the user flow to better see how a user may navigate the application and its features, as well as what steps they will need to take for each scenario. The user flow expanded upon the task flows and includes any decisions Isabella would make. Below is a piece of the full user flow, specifically for scenario 1 in which Isabella wants to add recently purchased groceries to her virtual kitchen.

SKETCHES: TAKING PEN TO PAPER

With the flows outlined, I began sketching out the necessary pages I’d need to help Isabella complete the tasks outlined. Sketching enables me to quickly begin to visualize what the A La Carte will look like before I begin outlining the details in a design tool.

MID FIDELITY WIREFRAMES: FURTHER REFINING THE DESIGN

Once I had a sense for how the pages should be laid out, I took to Figma and began creating mid fidelity wireframes to add more details and hierarchy. I integrated findings from my research as well as utilized established design patterns to complete the mid fidelity wireframes, focusing more on hierarchy and function rather than style and user interface design at this stage of the project.

Phase 4: Test

PROTOTYPE & USABILITY TESTS: EVALUATING THE A LA CARTE APP

With the mid fidelity wireframes complete, I created a prototype to connect the screens together and mimic how the A La Carte application would function. The prototype then enabled me to test the screens with users and understand what worked well, or could be improved upon, in the design while focusing on the information architecture and flow of the application. 

Before reaching out to usability test participants, I outlined a usability test plan in order to highlight the objectives and process for testing the prototype with users, including the script and scenarios for each test. I conducted usability tests with six participants and noted any errors they made, whether a slip or mistake, while they took the test. The completion rate was 100% and the error-free rate was 92.8%.

AFFINITY MAP: SUMMARIZING USER FEEDBACK

The affinity map below shows the results and highlights common themes from the usability tests. With comments noted for each participant by color, I grouped common feedback together to uncover patterns and insights for each pattern.

For each insight, I developed a recommendation and prioritized the recommendations based on impact and level of effort required to execute. I've included examples of the insights and recommendations I developed below.

Insights

Using the camera icon to upload a receipt to add ingredients was not intuitive for participants.

The calendar icon was not obvious to users to represent adding a recipe to their meal plan

Recommendations

Call out the action of adding ingredients with text and visuals to identify the two options of either manually adding ingredients or through receipt upload

Explore a different icon or button to represent this action and distinguish it from other actions that can be taken on the screen

REVISIONS: ITERATING ON THE DESIGN

Taking into account feedback from users and stakeholders, I prioritized revisions to the design to improve the usability of the A La Carte application. Below are a few of the revisions I made:

Replaced the sole camera icon with two buttons to prompt the user to add ingredients to their pantry manually or by uploading a receipt. Adjusted the search bar to allow users to search for ingredients within their pantry

Included text next to the icons on the Recipe screen, creating a button which provides more context to the user as to what actions they can take on the screen

BRANDING: DEFINING A LA CARTE'S BRAND

With the mid fidelity wireframes updated, I focused on the second objective for this project, which was to design a logo and establish a brand for the application. I first started by outlining the brand's attributes, which I defined as:

• Friendly: A La Carte is approachable and inviting for users
• Fresh: The application not only encourages users to keep their ingredients fresh but also looks to keep its own product new and exciting
• Curious: A La Carte wants users to explore new ingredients and recipes
• Inspirational: A La Carte is a place where users can find inspiration for their next meal
• Welcoming: The application is a judgment-free zone, available for beginners or experienced cooks

Once I had the attributes outlined, I created a mood board to help define the direction for the brand. I then sketched various logo options, pulling inspiration from food and the idea of mixing ingredients together to make a delicious, unique meal, which is where the name A La Carte came from.

STYLE GUIDE: CREATING A LA CARTE'S STYLE

I refined A La Carte's brand further by creating the style guide, which includes the logo, color, typography, and imagery. The colors evoke the brand attributes of being fresh and inspirational while the typography is clean yet friendly.

UI KIT: MAINTAINING CONSISTENCY

With the style guide complete, I also outlined the UI Kit for A La Carte to ensure that a consistent design is maintained throughout the application. The document will change as the design is refined and any iterations will be reflected in the UI Kit.

FINAL PROTOTYPE: COMPLETING THE PROJECT

Now that the brand was established, I could finalize the prototype, allowing me to apply the style to the wireframes and complete the look and feel of the designs.

Takeaways

Passion for food: I was excited to work on this project because of my passion for food; in my spare time, I'm often trying new recipes or healthy baking methods. I really enjoyed uncovering ideas to help home cooks reduce their food waste and focus on what they love most--cooking in the kitchen.

Focus on the MVP: There were multiple directions I could have taken this project, and I could have (and most of the time wanted to) expand on the priority features I outlined in the product roadmap. However, given limited time and scope, it was important to keep my focus on the minimum viable product (MVP) and showcasing how the application could function, as well as opportunities for growth.

Next Steps

For immediate next steps, I would compile all of my design files, as well as any helpful instructions or tips, and hand off the designs to developers through Zeplin for development. In regards to the design, I would also explore creating onboarding screens to help new users become familiar with the A La Carte application, in addition to looking into other nice to have features that were identified in the product roadmap.

Let's connect!

I'd love to chat with you.