Finding solutions for sorting and filtering food selections in PC Chef™
BACKGROUND
Meal kits have become a popular choice for families and individuals who value convenience and time efficiency while still creating high-quality meals. PC Chef™ Meal Kits is a meal kit service founded by Loblaws, a Canadian supermarket chain. PC Chef™ entered the market in 2020 during the midst of the pandemic when online delivery became the norm. The service provides customers with fresh, pre-portioned ingredients and recipes to create delicious, restaurant-quality meals at home.
However, our customers have voiced concerns about navigating the menu while shopping. This case study will explore the pain points related to the efficiency of menu navigation, user flow, and experience when selecting recipes on our website.
Prototype: PC Chef™ Prototype
01 Discover – Insight Into the Problem
In order to provide the best experience for our customers, we conducted a survey to outline their user experience when navigating our website. As a result, our customers expressed concerns about the difficulty of choosing and filtering recipes based on their specific lifestyle and needs. To understand and provide possible solutions to the problem, I created a research plan outlining the questions that is needed to answered. Once the research plan was completed, I collaborated with the researcher team to conduct 1-1 interviews and asked participants to do card sorting to gain insight into users' mental models regarding food categories and their thought processes.
During the interview, participants shared their screen to demonstrate how they would navigate the current website when deciding what meal kit to purchase. Throughout this process, users' behavior has been examined. In card sorting, they grouped similar recipes and labeled them to form food categories. After collecting the data, it was time to synthesize and form insights. This was done through affinity mapping and creating an empathy map to gain a better perspective and understanding of our users for designing a solution.
Insights
Users are overwhelmed with choice- more specific on the menu categories
"I want to see if there's a way to select items between breakfast, lunch, and dinner."
"There are a lot of choices, and I don't know what to pick."
"I'll add this for now, but I would like to see if there's anything better."
"I'm a vegetarian and I would like to see an option where I can filter this out."
Users are seen going back and forth between the navigation options.
Family servings and kid friendly recipes are one of the dominating factors in choosing meals
"I want to see something that my kids will also like to eat."
"Well, my family likes to eat a lot of pasta, let's see if there's anything here that they would like."
"I chose the family pork chop because it has the highest serving size and it fits how much my family eats."
Users want a intuitive experience - Less thinking, less navigating
"I wish there was a way for it to be more specific in terms of searching."
"There's so much food! It's a little overwhelming looking at it all at once. It all looks great, but it's hard to choose if you don't know what you want."
"I didn't like how I have to go back and forth between pages and scroll all the way down to see if there's a recipe that I would like."
Users categorized food in 2 ways by the choice of protein or by cuisine
During the card sorting exercise, participants were given pictures of recipes from the menu and asked to group them based on their similarity. Once the pictures were grouped, participants were asked to label each group. The findings showed that users tended to categorize the food either by the choice of protein (chicken, beef, pork, vegetarian) or by the origin of the cuisine (Greek, Asian, Italian, etc.).
Competitive Analysis
To better understand the market and the competition, a competitive analysis was made. The goal was to identify which features are successful and which ones are not, in order to avoid making the same mistakes. Both direct and indirect competitors was studied to gain a comprehensive perspective and deliver the most optimal solution for our users.
Site Map
I have created a sitemap to analyze how information is categorized on our website. Its purpose is to identify areas where we can improve the flow and user experience. By looking at the sitemap, we can see how the recipes are divided into four categories: most popular, home-cooked meal kits, family meal kits, and restaurant meal kits. However, it's evident that there's a need for more categories to be added to help users navigate the site more efficiently and find exactly what they're looking for.
02- Define the area to focus on
Our user is a 35 year old woman that values time efficiency, she is married and has 2 kids to feed after her 9-5 job. Our user has a problem that it takes too long for her to choose and navigate on what food to purchase in the PC Chef™ website.
Our solution should deliver a way for her to have an easier experience in navigating the recipes in the website so that she can reduce the time on what meal kits to purchase for a faster checkout.
How might we make it easier for the users to navigate through the recipes in the website so that they can save time searching?
Possible Solutions
1. Create a filter search engine for users to specify what they are looking for
2. Sort and group the meal kits in multiple categories ( Cuisine/ protein / kid-friendly, family-friendly)
3.Creating tags in the filter search
03- Develop
User Flow
The task is to buy a meal kit with the use of the filter search engine
Lo-fi Wireframes
After creating my task, I began to create some core screens and wireframes. My first step was to create the main categories (protein) on the homepage. The idea is that when the user selects a protein, it will filter out the recipes based on their preferences. The next step was to create a filter search engine. I added a filter button that leads to the search engine at the top of the page. I also added pre-filled filtered buttons that are scrollable horizontally from left to right. The search engine can be filtered by price, time, cuisine, protein, and other categories.
Mid-Fidelity wireframes
For my mid-fidelity wireframes, I added branding elements and conducted usability testing. One major finding was that users wanted to see more options in the categories beyond just the protein category and wanted to see other categories such as kid-friendly, breakfast, or dinner menus. Another piece of feedback that was received was that users would like to be able to remove some of the filter tags once the search results have been generated. This would allow them to delete specific options and refine their search.
Users have found the flow of the search engine easy to follow and have also appreciated the food category icons, which have helped them choose the meals they are looking for.
04- Deliver
High-fidelity wireframes
After the usability testing, I have consolidated all the feedback and have made the changes to create our final wireframes. The users have expressed adding more categories to “what are you craving” section and therefore made more categories for the users to choose from. I have also made the filter tags deletable in the search results in order to refine their search after it has been made.
Prototype: PC Chef Prototype
Conclusion
In conclusion, this research has provided valuable insights into the development of a user-friendly search engine for PC Chef™. The initial wireframes and mid-fidelity wireframes helped to create a solid foundation, but the feedback from usability testing helped to refine and improve the final product. By adding more categories to the "what are you craving" section and allowing users to delete specific filter tags had made the search engine more versatile and adaptable to user preferences. Overall, users have found the flow of the search engine easy to navigate and have appreciated the visual aids, such as food category icons. These changes will help to enhance the user experience and make PC Chef a more user-friendly platform.