top of page
Cookpad
UI/UX
Timeline
November 2023 - December 2023
Project Type
Individual Passion Project
Tools
Team
Figma, Miro
Individual
Project Overview
Cookpad is an app that allows home cooks to share, like and discover recipes or cooking tips from all over the world. Originating in Japan, the organization hopes to reach global cooking communities through a fun space for everyday chefs who cook for themselves rather than for fame. The platform considers ingredients right from their audiences kitchens to make cooking feel simple and accessible.
Establishing the Problem
Cookpad is Japan’s largest recipe-sharing platform but has struggled to earn the same followership in western countries like the US and Canada. This is mainly due to the poor conversion seen in the American version of the app. Western users cannot use the Japanese platform due to language and metric barriers, therefore must opt into the “overwhelming” and “unorganized” adaptation, as described by users.
User Research
To find out what specific limitations in the app were causing frustration in users, I conducted research through online reviews and articles. A response that really stood out and summed up several complaints came from a New York Times Article, With No Frills or Celebrities Cookpad is a Global Go-To for Recipes. Namiko Chen stated that users “find the sheer amount of information and recipes overwhelming...and not very inspired...[i]t is random pictures and recipes with no organization”, with no clear indication of where to begin. She also added that users often end up giving up based on feedback she gets from her blog. This is supported by Similarweb web analytics reporting lack engagement and exploration for their visitors with a 55.14% bounce rate.
I organized my findings into an affinity map using Miro.
In addition to the negatives of the platform, I wanted to find what was working well within the app to avoid removing or changing anything that kept users engaged. Additionally, I hope to enhance the positive implementations for an overall improved design. Therefore, I sought research on the creator Aki Sano’s intent for Cookpad. This included lots of opportunity for interaction, such as uploading recipes, searching ingredients or giving feedback. Collectively he wants the platform to be easily interpreted. Another key aspect users also seek is an unembellished experience that does not focus on the picturesque quality of the dishes hence, making the recipes feel more achievable and authentic.
“Cookpad seems to encourage everybody to retain their original culture. It doesn’t demand that food be impeccably presented or homogenized to have to appeal”
-- Ken Lord, 41, data scientist
“It is percisely this diversity that has won Cookpad a loyal following in America...many of those users are immigrants”
-- Aki Sano, Cookpad creator
“I cant find dishes from my home village of, Baissour - like hreeseh - by doing a Google search, I can only find them on Cookpad”
-- Areej Ismali, Lebanese stay-at-home mother in Pittsburg
User Journey
This graph displays the decline in engagement as users go further and further into the navigation of the application.
By constructing an user journey, I was able to identify where exactly users are experiencing apathy. Essentially, users come into the app very optimistic yet, based on user feedback I discovered a common trend of visitors giving up on the application due to three areas of concern, a cluttered UI, the lack of relevant recipes and a confusing navigation.
Top of the inspiration page
...scrolling further
...scrolling further
A significant fact that stands out on these captures is that all of these elements are seen in the Inspiration page. By filling up one page with multiple call-to-action buttons that are not related to one another, it can distract the user from what they are searching for. Specifically, the cooking challenges and the ingredient filter at the top of the page do not compliment or directly effect each other. Additionally, visitors are required to scroll up and down several times on the Inspiration page in order to locate certain categories. For example, they must scroll to the top to change the filter of ingredients and scroll back down to find a cooking challenge or a cooksnap through all those unorganized posts.
Design Process
Challenge
Cookpad shows potential in growing globally, especially in the west where many immigrant communities live. This being said, due to the cluttered layout and confusing navigation, users find it difficult to find relevant recipes. Therefore, I questioned how might I make the experience for users more personalized to increase visitation time without compromising the freedom of expression that Cookpad gives to home cooks?
Inspiration Board
I circled and highlighted elements of other apps that stood out to me.
Through this process I gained insight from Ticketmaster, Spotify and Goodreads, which are applications that use a step-by-step questionnaire for first time user. This procedure is similar to an onboarding that almost all apps use where they ask the user to fill in information about themselves. In this case the information about the user is actually helping the app create personalized recommendations. This is something I found that Cookpad could benefit from as they currently lack relevancy. For inspiration on organizing different styles of posts, I considered Twitter which does a well in separating different topics.
Competitor Analysis
I looked for inspiration in competing sites as well. SuperCook is more of a recipe-generator than a recipe-sharing platform; however, it provides insight on how to organize elements such as ingredients. I looked at Google reviews for specific things SuperCook is doing that is attracting users. Three points that especially stood out in the feedback include
-
the inventory feature is very useful as all ingredients in a recipe are what the cook already has on hand
-
helps keep track of your groceries
-
saves the trip to the grocery store
The pantry page of the app works well in organizing ingredients and making the search of recipes more personalized to the user. Now I question, how might I incorporate this into Cookpad’s purpose and intent.
Pantry tab on the SuperCook application
Sketches
Initial rough wireframe sketches that experiment with different user flows. The sketches on right include designs of posts which were used in the final mockup.
To create a personalization feature the amount of clicks may need to be increased, within reason, to ensure constant engagement. With so many tabs to filter in, having it all be in one place in the Inspiration page is adding to the clutter; hence, I want to minimize clutter for a more comprehensive UI. My first sketches were inspired by Goodreads 6 step process. This included categories of cooking goals, ingredients, cooking tools and others. However, I felt that a 6-step process requires an immense amount of clicking and decisions that the user may find unnecessary as they are really just looking for a quick and easy recipe. Instead, I looked to simplify the procedure as well as wanted to add more visual aids that could help users efficiently identify the options they had to chose from.
The Solution
With recognizing the high bounce rate it is evident that the home page must be redesigned to keep visitors engaged. Currently, the home page consists of ingredients, tool selection, recent recipes, cooking challenges, cooking tips and randomly generated recipes that ultimately swamp users. Therefore, to clear up the home page, a DISCOVER page can be created which would include the cooking challenges, cooksnaps, cooking tips and recent recipes. This page would follow a similar identity to a Twitter feed where users can look through for inspiration or leisure. If a visitor is looking for specific recipes they will be able to select ingredients, tools, cuisines and meal types that cater to them. This will be the KITCHEN page which is essentially where you would filter your HOME feed. For this I took inspiration from SuperCook’s pantry selection. The HOME feed will then be less congested, only containing related recipes.
Wireframes
Ingredients
Tools/ Cuisine/ Meals
Discover
Home
The final wireframe designs were achieved with a soft block style UI which incorporates both text and images.
User Flow
The user flows considers visitors who do not have the time to go through each tab and filter they can use the SKIP button at any time through the process to go directly to the HOME page. Additionally, each step in the KITCHEN helps produce recommendations that are relevant to who they are, their lifestyle, what the enjoy cooking, or what ingredients they have.
Final Result
Reflection
With Cookpad I wanted to put all my technical and research skills that I have been developing to the test. Application design was something that I had always wanted the opportunity to tackle so, I took it to myself to do a personal case study and I am glad I did. I was able to conduct thorough research on target users, the company itself as well as competing platforms. With this, my design process was very guided and I had a strongly established objective that I wanted to achieve. Most importantly, from the user flow to the wireframing, all the stages had intent and was translated into the final design. This is something my work often lacked in the past. Ultimately, this project shows my growth in design and user research.
Recipe images on Home and Discover page were taken from the Cookpad platform and those used in Kitchen mockups were taken from Google images.
bottom of page