CookUp
Your all-in-one cooking platform
. . .
Overview
Roles
User Experience Designer
User Experience Researcher
User Experience Researcher
Team
Elena Fang, Sharon Lin, Alice Shih, Helen Song
Tools
Figma, Miro, Zoom
Skills
User interviews, Storyboarding, Paper prototyping, Wireframing, Usability testing, Digital prototyping
Timeline
September - December (14 weeks)
Problem
Young professionals who are often overwhelmed with work and inexperienced with cooking don’t have the time to prepare their own meals and don’t know what they can do with their ingredients. While countless recipe platforms exist, users often have to scour through multiple platforms to search, plan, and track their recipes and ingredients, making the entire process overwhelming and inefficient. As a result, young professionals heavily rely on takeout and often end up with food waste.
Problem Statement: Young professionals require a recipe solution that is both comprehensive and streamlined, without requiring them to go through multiple steps to find recipes that match their preferences.
Problem Statement: Young professionals require a recipe solution that is both comprehensive and streamlined, without requiring them to go through multiple steps to find recipes that match their preferences.
Solution
Our team designed CookUp, a mobile app that provides users with an efficient cooking experience through personalized recipe recommendations. CookUp is an all-in-one platform, allowing users to track ingredients, create grocery lists, and share their cooking journey with their friends.
My Contribution
Our team of 5 co-lead the development of CookUp, splitting up portions of both research and design and meeting up twice a week (virtually, of course).
My portion of the design was focused around the app's sign up, onboarding, and profile user flows. However, I took charge of the visual design of CookUp, creating the style guide to ensure consistency across screens. In addition, I lead the prototyping of CookUp, polishing up the prototype and presenting it to our interaction design class of 90 students at the end of the project.
After the group project finished, I further refined the design on my own by implementing the feedback that we received from our project’s final presentation for learning purposes.
My portion of the design was focused around the app's sign up, onboarding, and profile user flows. However, I took charge of the visual design of CookUp, creating the style guide to ensure consistency across screens. In addition, I lead the prototyping of CookUp, polishing up the prototype and presenting it to our interaction design class of 90 students at the end of the project.
After the group project finished, I further refined the design on my own by implementing the feedback that we received from our project’s final presentation for learning purposes.
Process Overview
. . .
Research
Competitive Analysis
Our team first looked into the market to examine whether existing products provided users with a comprehensive and efficient cooking experience.
We found that:
- The ability to search for recipes by ingredient was not something new; however, existing apps that provided this feature often left out key user-to-user interactions, such as rating or sharing recipes.
- Other apps that served as a digital cookbook allow users to search and filter from thousands of recipes; however, there was a lack of social interaction among users.
Identifying the pros and cons of these competitors allowed us to reflect on the different ways we could enhance usability while still providing all the necessary features in our solution. As a result, we hoped to create a tool that improves upon existing products by supporting efficient search, personalization, and social interaction.
User Interviews
To better understand the cooking habits of young professionals and how they utilize recipes, our team conducted 15 interviews on recent college graduates who are currently working in various industries across the United States.
From our interviews, we discovered 3 persistent themes:
From our interviews, we discovered 3 persistent themes:
- Customization: Due to each person’s varying cooking experience and preference in food, everyone had different values and requirements when searching for recipes. As such, aside from in-depth filter options, our app could also implement a recommendation algorithm to provide users with curated recipes.
- Efficiency: The lack of time was the largest barrier to cooking for our user group. As such, the design of our app should be cognizant of users’ limited time by helping them get to the information they want quickly.
- Connectivity: The majority of users used a separate note-keeping app for their grocery lists, requiring users to manually type in recipe ingredients and constantly switch between apps. As such, CookUp should serve as an all-in-one platform for all of a user’s cooking needs. However, the platform should also support exporting options to 3rd party apps to preserve user habits and existing mental models.
Personas
To communicate our user requirements and guide our designs, we developed 3 personas based on the insights gathered from our user interviews.
.png)
.png)
.png)
Scenarios & Storyboards
To better empathize with our users and understand their goals and environment, our team created 2 different scenarios and narrative storyboards. These artifacts allowed us to determine user requirements as they complete their goals and define the CookUp user flow.
Storyboards drawn by my teammates Helen and Sharon
. . .
Design
User Flow
Utilizing our design artifacts, our team was able to list out the necessary features for our app and organize them into a user flow.
The results of our feature brainstorming session, with different colors representing different feature groups.
CookUp user flow, with different colors representing different feature groups.
Paper Prototype
To put out ideas down on paper (literally), our group first created sketches and later transformed these into paper prototypes. These low-fidelity prototypes served as an early test for usability, allowing us to quickly and easily try out different representations of our design.
Due to the physical nature of paper prototypes however, we were unable to create a cohesive prototype of the entire app. As a result, each member of the team created individual prototypes for each feature and tested them with our own roommates and family.
Due to the physical nature of paper prototypes however, we were unable to create a cohesive prototype of the entire app. As a result, each member of the team created individual prototypes for each feature and tested them with our own roommates and family.
My paper prototype of the onboarding and profile screens
Paper Prototype Usability Test
From my usability test of the onboarding and profile features, I found that the design was lacking in the areas of:
- User Freedom: Users raised questions about the ability to access the app without logging in or creating an account. This was a valid concern; as for any recipe app, users should be able to browse recipes and try out the app without fully committing to it by creating an account.
- Lengthy Onboarding Process: Users were frustrated at the length of the sign up process and the inability to skip the onboarding completely. In addition to the implementation of a skip function, the app should not require users to set up their entire social profile during sign up.
- Horizontal Scrolling Sections: The profile screen featured 2 different horizontal scrolling sections; while this solution could be feasible for a short list of items, what would happen if there were a ton of items?
Wireframes
Iterating on our designs with the feedback that we received from initial usability tests, our team created the wireframes of CookUp.
Login, onboarding, and profile wireframes designed by me; others designed by my team
High-Fidelity Prototype - Iteration 1
Our wireframes were then translated into a high-fidelity digital prototype in order to conduct further usability testing.
Evaluation & Iterations
Our team conducted 5 usability tests with the purpose of evaluating the app’s overall usability and validating whether the design supported users in completing their goals.
The user testing process included:
The user testing process included:
- Introducing the project goal and context
- Describing the scenario and letting users use the prototype to complete tasks
- Asking probing questions and reminding users to think aloud
- Thanking them for their participation
The key findings of our usability test included:
- Inconsistent Style
- Lack of User Feedback
- Poor Accessibility
Inconsistent Style
Users commented on the many design inconsistencies throughout the app, which included differing typography styles, margin sizes, and essential components such as buttons. Users also pointed out the overload of saturated colors that created a distracting experience.
Solution: To alleviate the many design inconsistencies, I advocated for the creation of a style guide, clearly defining the color, typography, iconography, and UI components of our product. As an added bonus, I also designed a custom CookUp logo to wrap everything together and further enforce our brand.
Solution: To alleviate the many design inconsistencies, I advocated for the creation of a style guide, clearly defining the color, typography, iconography, and UI components of our product. As an added bonus, I also designed a custom CookUp logo to wrap everything together and further enforce our brand.
Lack of User Feedback
Users were confused whether or not they had successfully completed an assigned task, due to the system failing to provide necessary feedback. Such tasks included bookmarking a recipe or importing a recipe into a grocery list.
Solution: To provide users with proper feedback, we implemented a quick and non-intrusive banner on the top of the screen, capitalizing on users’ existing mental models of mobile notifications.
Solution: To provide users with proper feedback, we implemented a quick and non-intrusive banner on the top of the screen, capitalizing on users’ existing mental models of mobile notifications.
Poor Accessibility
When users were tasked with bookmarking a recipe, some users failed to find the bookmark icon and scrolled right past it. We discovered that issue this was due to the poor contrast and small size of our buttons. Additionally, indicators of the users’ current state were only depicted with a color change, making them difficult to see for those with vision impairments.
Solution: Our buttons were enlarged and redesigned to create a higher contrast with the image background. Additionally, extra indicators were added to our design, such as an underline on the current tab and the navigation bar.
Solution: Our buttons were enlarged and redesigned to create a higher contrast with the image background. Additionally, extra indicators were added to our design, such as an underline on the current tab and the navigation bar.
. . .
Latest Prototype
Sign Up & Onboarding
After creating a new CookUp account, users are presented with the onboarding questionnaire in order to provide them with a more personalized cooking experience. As we learned from our 1st usability test, user freedom is extremely important, and so users are given the option to continue as a guest, skip the entire onboarding process, or skip individual questions.
Home & Search
On the home screen, users are able to easily browse their recommended recipes and access quick filters. Users may also choose to search in greater detail, filtering by meal, difficulty, diets, or by ingredients and users.
Recipe pages are designed to be succinct, allowing users to efficiently process information.
Recipe pages are designed to be succinct, allowing users to efficiently process information.
Social
The social page allows users to stay updated on what their friends' posts and create posts themselves. Users are able to like, comment, and even see the exact recipe that their friend used.
Grocery & Pantry
The grocery list allows users to keep track of what ingredients they need to buy on their next trip to the grocery store. Users are able to manually add ingredients or directly import them from a recipe. Items on the grocery list can be marked as complete, and they will be automatically transferred to the user’s pantry.
The pantry allows users to keep track of their ingredients. Ingredients can be added manually, by scanning a grocery receipt, or automatically through the grocery list.
The pantry allows users to keep track of their ingredients. Ingredients can be added manually, by scanning a grocery receipt, or automatically through the grocery list.
Profile
On the profile, users are able to see a list of their saved recipes and their recipe history. Users can also see their recipe reviews, their followers, and who they are following. Additionally, users can also customize their biography and access their settings.
. . .
Future Steps
Looking Forward
Following our team’s final presentation to our class, we received an overwhelming amount of positive feedback in regards to our app (even winning 3rd-best design out of 18 teams). Nonetheless, many additional areas of opportunity, improvement, and research exist for CookUp.
Expanding the Social Aspect
Many classmates expressed their interest in the unique social aspect of CookUp. As such, the opportunity exists to further expand the social aspect of CookUp and set it apart from its competitors with features such as user stories and cooking live streams.
However, we should also be cautious of entering the realm of social media, as unintended side effects such as the fixation on the number of likes and comments could arise.
However, we should also be cautious of entering the realm of social media, as unintended side effects such as the fixation on the number of likes and comments could arise.
Building Out the Recipe Page
While our user group values efficiency and the ability to quickly pinpoint a recipe’s ingredients and instructions, this doesn’t necessarily mean that additional information is not required. Further research could help us determine whether additional features such as detailed nutrition facts or video walkthroughs would be beneficial to our users.
An All-in-one Platform
Due to the comprehensiveness of CookUp, there are already a ton of features, which may even continue to increase in the future. As a result, research is recommended in order to evaluate whether all of its features are easy to understand and use.
. . .
Reflection
Opportunities for Usability Testing
Challenge: Given our user group of young professionals and the circumstances of Covid-19, we were unable to safely conduct usability tests with our user group.
What I learned: Despite these barriers, we were still able to successfully conduct 2 different rounds of usability testing. I learned that anyone can participate in usability testing, such as those in our personal quarantine bubbles. While their user needs may not be perfectly aligned with our user group, they are still able to provide invaluable insight about a design’s usability.
What I learned: Despite these barriers, we were still able to successfully conduct 2 different rounds of usability testing. I learned that anyone can participate in usability testing, such as those in our personal quarantine bubbles. While their user needs may not be perfectly aligned with our user group, they are still able to provide invaluable insight about a design’s usability.
Refer Back to the User
Challenge: On a team of 5 different UX Designers, it was at times hard to balance everyone’s opinion. Oftentimes there were disagreements among members over which design is better.
What I learned: During times of disagreement, our team learned to refer back to the user with the help of our interviews, personas, and scenarios. Always keeping the user in mind throughout the entire development process will be something that I will remember throughout my career.
What I learned: During times of disagreement, our team learned to refer back to the user with the help of our interviews, personas, and scenarios. Always keeping the user in mind throughout the entire development process will be something that I will remember throughout my career.
Consistency of Designs
Challenge: Throughout our project, the consistency of our designs proved to be a challenge, especially when we were splitting up different screens to be designed.
What I learned: Creating a style guide was extremely helpful for our team as we finalized our latest prototype. Looking back, defining the style guide even earlier, before our first high-fidelity prototype, would have been even better (and of course, it doesn’t need to be perfect). A more consistent prototype would allow users to focus more on issues with usability during user testing, rather than becoming fixated on problems with the design and aesthetic.
What I learned: Creating a style guide was extremely helpful for our team as we finalized our latest prototype. Looking back, defining the style guide even earlier, before our first high-fidelity prototype, would have been even better (and of course, it doesn’t need to be perfect). A more consistent prototype would allow users to focus more on issues with usability during user testing, rather than becoming fixated on problems with the design and aesthetic.
. . .
Thanks for making it this far! Here's a fun fact about myself:
My favorite food comes from the night markets of Taiwan - Stinky tofu
My favorite food comes from the night markets of Taiwan - Stinky tofu