Home Redesign
Millions of people visit Cookpad daily, looking for inspiration for their next meal. However, the current Home page—the first touchpoint when users open the app—fails to provide a personalised and engaging experience. The content feels random, lacking the appeal needed to inspire users. How can we transform the Home page into a space that feels more inviting and tailored, encouraging users to return to Cookpad every day?
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: Home page does not communicate the value clearly and the recipes are often random. It creates a lack of trust, especially for new users.
Most Cookpad users discover the app through search engines, landing directly on the search results page. However, when they install the app and first see the Home page, many are let down by the content, finding it uninspiring and less relevant than what initially drew them in. This mismatch has resulted in a low number of return visits, making it difficult for us to retain new users. Existing users also face a similar issue—the Home page lacks personalisation and often displays random content, prompting them to skip it entirely and head straight to the search page to find recipes they actually want to cook.
"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 Home page.
RESEARCH
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.