top of page
Case study
Cooki
Cookbook tool
Project overview
The product
Cooki is an app that allows users to cook meals while alone. The users are between 10-88 years old. The goal is to provide easy user flow for all users.
Project duration
February 2021 to March 2021
My role
Lead UX designer, UX researcher
Responsibilities
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
The problem
Most cooking websites need users to read the recipe before cooking, and while cooking it often needs users to stop for a while listening to the instruction.
The goal
Design a website that allows users to freely use while they are busy on their hands.
Ps
I use iPhone SE as the model to present the product is that this app design considers aging people first. As they told me the iPhone SE is the lightest handphone to carry with.
Understanding the user
User research
Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users are sensitive about the presence of the design and would like clear navigation. They don’t like many advertisements and care about money and time.
Personas
Problem statement
Momo is a poor vision aging person who needs a cookbook tool to learn cooking because she needs to cook at home alone.
Problem statement
Green is an Art student who needs to learn cooking because he always being alone at home.
User journey map
I created a user journey map of Momo's experience using the site to help identify possible pain points and improvement opportunities.
Affinity diagram
Competitive audit
An audit of a few competitors' products provided direction on gaps and opportunities to address with the Cooki app.
Click to view
Ideation
I did quick ideation to come ups with ideas that how a cookbook tool would work during user flow. My focus is to help users manage a cooking flow that they didn’t waste money and time.
Starting the design
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing sound controllers for users to navigate easily is my key part of the design.
The cooking ingredients would appear here as a reminder
There are time and flavors appear here, and the steps consist of order
Low-fidelity prototype
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing sound controllers for users to navigate easily is my key part of the design.
Click to view the Cooki
Usability studies
Study type
Unmoderated usability study
Location
China, remote
Length
30 minutes
Participants
5 participants
Findings
In this section, people prefer a larger text and simple function in that they don’t feel anxious about the user flow.
Design
The visual design is small
Guide
There needs a simple bar to clarify each button
Microphone
There is no sound effect represent the microphone function
Refining the design
Mockups
Participants told me that the needs section includes very small pictures and they want two versions of the recipe. So I add additional buttons on the page. Also, I changed the video bar so people can see the timeline with a green loading line.
Before usability study
After usability study
I add a question signal that when users click on it, it would work as a reminder
Before usability study
After usability study
Mockups-App
Mockups-Website
High-fidelity prototype
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. And because it is a cooking tool so I wish it could be easy and clear.
Click to view the Cooki
High-fidelity prototype
Accessibility
The initial focus of the visual and microphone design helps define the core tasks or the action for the user
Clear labels for interactive elements that can be read by screen readers.
Responsive Design
Information architecture
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Food Saver sitemap to guide the organizational structure of each screen's design to ensure a cohesive and consistent experience across devices.
Responsive design
The designs for the screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Mobile website
Tablet
Desktop
Going forward
Takeaways
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned
I learned that design should be user-centered. And if the design for aging people, the visual design should be as simple as possible. Otherwise, they would feel anxious and uncertain.
Next steps
Conduct follow-up usability test on the new website
Identify additional needs for users and keep usability study
Add more pages about how it might work while using Microphone
bottom of page