Feed Redesign
Millions of people come to Cookpad to find ideas of what to cook today. However, the current feed - the first place people see when opening the app - does not properly serve its purpose due to a lack of personalisation and random ideas. How might we make the feed more inspiring so that people want to come back to Cookpad every day? The ultimate goal is to increase user engagement and frequency of app usage.
Role:
Product Designer
Responsibilities:
Problem Discovery
Product Strategy
User Research
UI & UX Design
Team:
Dilla Anindita, Alina Hryshchuk, Paco, Jacek Szmelter, William Tan, Cheng-Yao Lin, Shalva Avanashvili, Ridho Akbar, Martyn
PROBLEMS
For this project, we are looking to solve problems on two different sides:
Business Problem: The number of Daily Active Users (DAU) is not growing as expected and retention of new users is less than 50%.
User Problem: Feed does not communicate the value clearly and the recipes are often random. It creates a lack of trust, especially for new users.
The Feed stayed the same for a while due to other important priorities. But, our strategy changed to get more people using the app daily. So, we started a project to make the Feed more interesting and to encourage users to return more often. We focused on the Feed because it is the first thing users see when they open the app. Showing helpful and inspiring content there is key to bringing users back every day. Usability studies also taught us that the information on the Feed is sometimes too random for users.
"Cooking with frankfurters is a bizarre starting point." L.S.
"Doesn't feel like a spinach noodle recipe should be my home screen." H.S.
The existing design and structure of the Feed.
DISCOVERY
We used a design sprint to dig into issues and find the most crucial one to fix. From this, we found that people did not open the Feed for ideas, but to connect with others they followed. We saw that people often cooked familiar recipes they knew well. This is practical but can get boring. We think a livelier Feed with interesting recipe recommendation could inspire new cooking ideas and make it more fun. This led us to the "How Might We" question:
How might we help people to break out of their routine by encouraging more spontaneous cooking?
Elena and I conducted interviews with users from Indonesia, Spain, and Taiwan to understand their daily cooking routine and identify key moments where Cookpad can be useful. As part of the interviews, we prototyped our idea and asked for feedback from users to understand their needs.
From interviews, we mapped user journey to find important moment to intercept. People decide what to cook by checking their fridge. When they have a dish in mind, they use Cookpad for the recipe. They do not look for inspiration, just the right recipe. Surprisingly, trending searches were not popular. People often do not have ingredients for those recipes.
DESIGN & ITERATION
Based on the findings from the first round of interviews, we iterated the prototype to focus on browsing recipe ideas by ingredient. We then conducted another round of interviews to gather more feedback from our users. During these interviews, we observed several interesting findings:
Although ingredients availability is important when deciding what to cook, users still want to see variations.
Users wanted to see recipes they have made before, although not every day.
In some countries, seasonal ingredients were important.
Users wanted to feel inspired with many ideas when they open the feed, but it needs to be structured so it's easy to navigate.
To create the first version of the MVP within one week, I used existing components from Mise, our design system, and repurposed existing feed components. I collaborated closely with my team members to agree on the version we wanted to build. Within two weeks of finalising the design, we released the first MVP. Based on user testing, we made the following changes to the feed structure:
What's in your fridge?, showcasing recipe ideas using most common ingredients in the country users based on. The title was chosen to signify the moment of opening the fridge.
What are you craving?, random ideas to introduce a sense of "surprise".
Cook it differently, showing ideas based on users' recent searches.
Your cooking tools, showing ideas based popular cooking tools in that country.
Discover what's in season, showcasing ideas based on seasonal ingredients.
Editor's choice, curated recipes based on certain occasions, curated by our team.
Recently cooked recipes, recipes that received 5+ Cooksnaps from other users.
As the most important Feed feature is "What's in your fridge?", I tried many designs. I aimed for simple and fun use. Fridge organisation inspired me, so I tried cards with ingredient photos and names. The idea was users can tap multiple ingredient combination, and giving new recipe ideas with each refresh. Balancing both was a challenge.
I chose a design showing ingredient photos and variations below, plus descriptions. This layout went for all feed items, boosting visual appeal. Every item aims for new ideas when users open or refresh the app.
After the release of the MVP, we conducted user interviews to gather qualitative feedback from users. In addition, we also analysed the data. We discovered several usability issues within the feed that affect the user's experience when browsing.
1
The search bar is too big, occupying around 30% of the screen in the initial state.
2
The text for section title is too big, stealing the focus from the content underneath. The subtitle on each component also made the page too busy.
3
The ingredient items use text overlay on top of an image. It introduced accessibility issues, especially when the ingredient was selected. Also, with 2 rows of carousels, it occupied too much vertical space and made the recipes less prominent.
4
List of variations was sandwiched between ingredients and recipes which have strong visuals. It made the variations less visible. The data also showed that the number of interactions on variations were small.
5
List of recipes was not visible above the fold, even on tall screens. When users interact with ingredients and variations, they had to scroll to see the recipes.
Data from the MVP showed lower recipe card interactions due to reusing feed components with excessive text. Feedback led us to enhance feed's visual appeal and accessibility. I led the redesign, introducing new styles and stronger card components. Hours of trial and error went in. Toughest was perfecting "What's in your fridge?" with ingredient and variation layers. Prior design had readability and layout issues. Not all elements were visible without scrolling, and it looked too cluttered visually. I explored the design to fix all those issues.
After lots of iterations and discussions, we picked this design. As part of the project, I made new card components for Mise, Cookpad's design system. The updated Feed is more visual, with improved layout and spacing, highlighting content better for engagement.
RESULTS
The project has increased DAU by 8%. Additionally, we also doubled the number of new user retentions, making them more likely to stay. Due to the success of the project, we released the feature globally and it has become a key feature that users love.
“So excited with this fridge section! This’s really help me a lot. Usually if I motivate to cook, I will search for recipes but sometimes there’s moment I’m so lazy to cook and hesitate to search. Now, even when I don’t have mood to cook, I just choose ingredients in my fridge and BOOOM thousand of cooking ideas appear in my hands", Nuri.
"I'm excited about the new feed!!! Great job once again! Well done!"
"I've already tried it! What's in your fridge section is really helpful! Thank you very much!"
"It's the best I've seen, the most convenient and easy to use, congrats to whoever came up with it"
If you are interested to see the source design file of before and after, click on this Figma file below.