1. Build a responsive website to accommodate all recipe posts and upcoming cooking classes.
2. Design a new branding that is inspiring and inviting.
The pandemic has significantly impacted people and limited ways of getting food. I was not surprised about the increase in recipes and tutorials during this period. However, it is important for me and the owner to understand if this is only a temporary fashion before expanding businesses. It is also critical to understand if business could offer what user needs. I firstly carried out a research plan to understand more about the market of recipes and cooking classes and their users. The full market research results can be found here.
I also conducted competitive analysis to get insights of how other websites/apps currently on the market are addressing user concerns and satisfying user needs.
Some key takeaways from the analysis are:
With these results, I was able to better define the target users. I created provisional persona to portrait target users and their needs.
To unveil more information about the way people cook, find recipes, use recipes, and other needs and frustrations. I have conducted interviews with five people who vary in occupations and age. Participants are aged 24-40. Three are single. Two are married (one of them has kids). The research script could be found here.
I recorded all the calls and wrote down key words during the interviews. I used empathy map to organize to process all the information shared by the interviewees.
These two are essentially the reasons why interviewees cook. They hope they can control what they eat to stay healthy. Also, 3/5 interviewees mentioned that they want to save money by cooking themselves.
4/5 interviewees mentioned that they find cooking is fun and they entertain themselves by experimenting new things. Time, difficulty, and review are the key factors that help them select recipes.
3/5 interviewees said that they don’t normally make plans for their grocery shopping so oftentimes they find recipes based on what they have left in the refrigerator.
Based on the research, I created a persona that reflects the target users of Kendall Kitchen. The persona helped me better define the problems and understand the users and guide me through the entire design process by keep user's needs, goals, motivations, and pains in mind.
In order to deliver a successful product, defining the common goals for the business owner and users is a key step before diving into concepts and design. I wrote down their goals and created the chart to find the overlaps. Essentially, the goals of this website design are to:
Key challenges I defined for this website design are:
After brainstorming and competitive analysis. I was able to define features based on the priorities that would provide great solutions to the problems defined earlier. I created product feature mapthat shows the support from the research, goals to achieve, and detailed requirements.
From what outlined in the product feature map, I created the site map by building out the hierarchy to indicate the basic structure of the site. Recipe categories were explored and designed to help users find things with different ways. The categorization of the recipes are based on the open card sorting result (the majority of participants choose meal type categorizations), competitive research (the majority of them use meal in a day), market research (global cuisine is a trend), and the user research (having ways to find special diets).
With the developed structure of the site, I used two scenarios to create user flows to understand users' cognitive process when interacting with the site. The user flows laid out the movement that users take from the start to the end. This helped me optimize the site and increase the conversion rate.
The site structure and user flows helped me understand pages to be designed. I drew some initial sketches to start thinking about the page layout design based on the structure and to help users completing the process of interacting with the site.
With the sketches, I was able to create mid-fidelity wireframes to standardize design elements by following the Bootstrap grids.
Considering the limited time on the project, I wanted to test out major issues with the current design before I create the site branding and design details for each page. I created mid-fidelity prototype to test the main functions of the website. I carried out a test plan with a moderated think aloud method and recruited 4 participants in the target market. There were two tasks from user flow that users were asked to complete for the test.
After the usability test, I synthesized the results of what user said and what I observed by creating an affinity map. There were three main issues are observed. The recommendations were provided to solve these issues.
In order to help users, especially those who are on special diets make decisions quicker, I added a 70% transparent banner to accommodate special diets such as gluten free and vegetarian for users to better locate what they need.
1. This is not an issue from the usability test, but as one of the ideations, I added pictures as visual support to more efficiently instruct users. This is also one of the things users value when they look for and use recipes.
2. To mitigate the confusion of the checkboxes in ingredients, I removed them in my next version and added instructions "generate a grocery list for your next shopping by selecting the ingredients" to help users better understand the purpose of the call to actions.
3. As a supplementary of create grocery list, a pop up window will show up after clicking. Users are able to click checkboxes for ingredients they need.
1. The previous design assumed a big user needs in cooking classes. However, realistically, a new business very likely has no strong user base to support that amount. After evaluation and another research in cooking classes, I decided to start with six signature cooking classes. So the cooking class main page is simplified to promote them, see #1.
* please check #2, #3, #4 by scrolling
2. Another wrong approach in strategizing the cooking classes information architecture is that I expected users to search classes by date and time, rather than finding the class they like and choose the time work the best for them. The usability test approved that users tend to select time and date from the cooking class page. In my ideation, I have add time selections for users without changing their behaviors
3. To better present information, I have reduced the length of lines in paragraphs to fit users' reading habits
4. I removed checkboxes and added instructions to call to action of "create grocery list" to reflect changes I made in recipe pages
In this phase, the efforts were put into developing the solid new branding for the website to make it clean and inviting to existing followers and new account users.
After making changes to the mid-fidelity wireframes according to the recommendations, I create a mood board as branding inspiration and selected colors, typeface, and image styles. The logo was also designed to bring stronger identity.
Using the styletile as a guide, I developed the high-fidelity screens by visualizing the elements and making sure they are aligned with the brand attributes, have clear hierarchy, and appealing visual presentation.
The responsive design can be found here: home page, subcategory page, recipe page.
I also compiled the elements from the high-fidelity screens and created the UI kits as a live document and a communication tool with developer for future site construction.
Understanding what existing users' needs and how to cater future users is definitely a challenge in the project. It was a great learning and exciting process to go through and uncover many perspectives and behaviors from the users that were surprised to me. I also got freedom to create a branding for the new website in this project.
Kendall Kitchen is a young Instagram food account, and it is still early days in the design and development process. There are much more things to dive into and to learn as we go. I'm look forward to working and seeing more to happen.
