Simplifying the grocery shopping experience for Food Network Kitchen app users, offering effortless organization of the grocery list.
Released on July, 2020
Team
1 product manager,
1 senior designer,
1 junior designer (me),
and engineers
Product
Food Network Kitchen
My Roles
UX & UI Design
Duration
Mar ~ June, 2020
Overview
Food Network Kitchen is a direct-to-consumer (DTC) cooking app that offers live cooking classes hosted by famous chefs, hundreds of recipes, and access to an extensive library of Food Network shows. It was the extension of the Food Network channel.
And the app won 2 Webby awards in 2020:
🏆 Apps, Mobile, and Voice - Food & Drink
🏆 Apps, Mobile, and Voice - Productivity
I joined this team before the app’s first launch in 2019, and contributed its fine-tune for the launch. During my experience at Discovery, I delivered the Shopping List, one of the main features of the app, which enhanced user convenience in their meal preparation.
Context
Why is this feature important?
Compiling shopping lists and going to the grocery store to buy ingredients was often the most time-consuming part of the meal preparation process for our customers.
Project Goal
The goal is to ease pain points in every step of users’ food journey, making the entire cooking experience simpler and faster and giving our users more time to enjoy their meals.
My Contribution
Iterated and developed the whole flow of the Shopping List feature from the early concept to the final, collaborating with the senior designer and the product manager
Created a prototype for usability testing with the product manager and the UX researcher
Finalized and delivered the final design for its first phase release to developers, conducting multiple design-polish sessions in close collaboration with them
Created a cohesive design integration across different platforms, including iOS mobile, iOS tablet, Android mobile, and Android tablet
Situation
However, some UX challenges were found in the initial low-fidelity wireframes, which needed to be addressed to improve usability before the launch
So, What Are the Challenges?
The initial design appeared cluttered, with key UI elements not standing out, resulting in poor usability and misalignment with the project's goal
Task 1: View Shopping List
How might we present
the Shopping List for easier read?
Analysis
The Shopping List view page is cluttered with too much text and too many elements, making it hard to read the list.
Uneven text alignment and lack of visual hierarchy make it difficult for users to skim the list
Date of when the last item added is not important info
“Add” button is not noticeable
Overloaded information, which is not essential; Recipes here is redundant with the Recipe view
This is not essential to be displayed on this page
Dividing ingredient items by recipe components is an overload of information
This arrow icon is confusing
Strategy
I formulated theses two hypotheses about reading the list experience and proposed solutions to address the identified problem.
Absorbable Data
Auto organize the shopping list by categories to enhance readability
Noticeable UI
Redesign components based on
the importance of functionality
01
02
HYPOTHESIS
If the shopping list is visually organized more clearly, it is likely to become easier to read
If the key UI elements are designed to stand out, the page will likely appear more streamlined and tidy
SOLUTION
Solution
I shared multiple design options to the team, and after a discussion, we decided to go with the following final design.
Why Works?
Focused on displaying essential details; better visual hierarchy
Made “Add” button more noticeable by turning it into a search bar
Creating a card-style container for each category works well as a scalable UI component that can be easily reused across other devices
Enhanced text hierarchy
After
Before
Task 2: Editing Shopping List
How might we allow users to edit the Shopping List at their best convenience?
Analysis
The process of editing the shopping list was overly complicated. There were unnecessary steps to go through and the design required tapping many times to edit just one item. This would disturb their experience of the shopping list quickly.
Editing name
Editing quantity
Editing units
Strategy
I hypothesized that user preference with a quick task, which should be quick, would benefit from a streamlined approach. I also looked into to other apps, and found out they they encouraged 1~2 styles of UI patterns for editing. Based on this assumption, I concluded that simplicity and conciseness were key to the solution.
Inconsistent interfaces can cause confusion during the editing process
Reduce Steps
Simplify the editing process by reducing steps and streamlining pages
Consistent & Easy UI
Improve the user experience by providing a unified interface style
01
02
HYPOTHESIS
Users generally prefer to avoid going through multiple steps for quick tasks, such as editing a shopping list
SOLUTION
Strategy
The original design required users to navigate through three separate sections to edit a single item, leading to at least three clicks and unnecessary effort. However, since editing is a quick and minor action, adding an extra layer like a modal or popup made the process feel unnecessary and disruptive. To streamline the experience, I combined these sections into a single interface, allowing users to edit seamlessly in place.
Solution
As a final solution, we decided to go with inline editing design option because it allows users to make quick and flexible changes.
Why Works?
Minimized the steps to enhance the speed of task completion, streamlining the workflow
Allowed to make changes directly in the context, allowing the experience more intuitive
After
Before
Finalizing the Shopping List flow
After numerous iterations, I successfully finalized the designs for the first phase release. As the process neared to its end, I worked closely with developers to deliver the completed designs and review their builds to ensure the absence of any design-related errors.
Adding Items to Shopping List
Users can add items to their shopping list while browsing recipes. Each recipe page features an "Add to List" button within the ingredients section, allowing them to quickly add groceries as they explore recipes.
Users can also search for and add ingredients manually. When a new item is added, it is highlighted in light pink, making it easy to spot.
01 Add ingredients from recipe page
02 Search and add ingredients
Shopping List Sorting Views
Users have the option to sort the list into two different views. The category view organizes items by appropriate categories, while the recipe view organizes the list by the recipes that users added ingredients from (users can save items from the recipe detail page).
Category view
Recipe view
Delete Ingredients
Swipe left to delete ingredients. When the action is made, the snackbar saying Item deleted appears for three seconds. Users can undo the action.
Check-off Ingredients
Simply tap the ingredients you bought to organize your list clean. Checked ingredients are automatically categorized as the Checked Items section, except in the Recipe view.
Easy List Managing
Users can manage their shopping lists by deleting or checking off the items. They can also edit the item’s name, quantity, and measurement unit easily, just like editing note.
Edit Ingredients
Feel free to edit ingredient’s name, quantity or measurement. When the action is on, the ingredient is highlighted in light pink for clear notice.
Grocery Online Delivery
Through our research, we found that many users prefer ordering groceries online to save time and energy. To support this behavior, we introduced a sticky button that remains visible at the bottom of the screen. When users are ready to order, they can simply tap the button, which opens a webpage for online grocery ordering.
Usability Testing
We conducted usability testing sessions with the existing Food Network Kitchen app users, who had used digital shopping lists in other apps. In this process, I worked closely with the product manager and the UX researcher to set the goals and helped them create a prototype using proto.io. The goals of usability testing were 1) to validate most designs and functionality and 2) to understand the user experience, usability and value.
From the testing, we learned that the overall experience of the Shopping List was easy to use and understandable for users. Most of them were excited about it, mentioning that it would be one-stop app for cooking. After the testing, I made a few minor iterations and finalized the designs for the first phase release!
I use this app for recipe hunting, ingredient checking, carb monitoring, grocery shopping and as a ‘hold-all’ for recipes from other websites
🧓🏻
I have really enjoyed using this app for meal planning and making shopping lists for meals. It's definitely a time saver!
👱🏻
The app was rated 4.9 stars with +672.3K reviews in the App Store
⭐️⭐️⭐️⭐️⭐️
👨🏼🦱
I like the features of taking things off of the grocery list and sending it to yourself or adding
👨🏾
Love that I can add recipes from anywhere easily and the grocery list function
What I Learned
Working as a product designer at Discovery Inc, with the Food Network Kitchen team was a challenging, yet rewarding experience. I’ve gained several valuable insights:
Communication makes the process efficient
Communication makes the process efficientCollaborating with cross-functional teams, including product managers, developers, and researchers, was initially challenging. However, this experience taught me how to communicate, discuss, and share ideas, and balance product priorities efficiently.
Iterations improve the design
During the development stage, I iterated on the designs based on internal feedback from the team and results from the usability testing. This process allowed me to consider different perspectives and refine the work. Additionally, I learned to prioritize feedback and continuously improve the designs.
Justify “why” to your design
When solving the UX problems in the early stage of the feature, I proposed different design options based on the research insights gained from the analysis of other apps and the early research. This not only allowed me to improve my problem-solving skills, but also built faith in teamwork by providing data-driven decision-making.
©2025 JULIA HYERIN CHOI. ALL RIGHTS RESERVED.