Cooking Central
Many young people find cooking to be a chore due to factors such as limited time, resources, lack of cooking skills, and the isolation brought about by conditions like the COVID-19 pandemic.
This project was completed as part of the upper-level undergraduate class Introduction to User-Centered Design at University of Washington in 2020. The projects were centered around a theme of “Wellness" and my team and I sought to improve the lives of individuals by encouraging them to cook more frequently and to engage with others while doing so.
Introduction
Research
User Interviews
Our research process involved a combination of user interviews, persona creation, and user journey mapping to gain a deep understanding of the challenges faced by college students and young adults when it comes to cooking. We recognized that cooking is not just about preparing food; it's a multi-faceted activity that involves time, resources, skills, and social aspects. To address these complexities, we embarked on a comprehensive research journey. We planned to conduct in-depth interviews with college students and young adults to uncover their pain points, motivations, and behaviors when it comes to cooking.
After conducting user interviews, we had many notes, quotes, and observations that captured users' thoughts, pain points, and desires related to cooking. For example, participants mentioned problems with finding recipes, dealing with limited ingredients, and feeling isolated while cooking. Affinity mapping offered us a way to make sense of this qualitative data and derive meaningful conclusions.
We grouped data into thematic clusters, looking for recurring topics and sentiments. As we continued grouping insights, we saw common pain points helping us pinpoint the most significant challenges faced by our users and providing a clear structure for our design direction.
Affinity map from interviews
Personas
After affinity mapping, we began creating personas by distilling our themes into distinct characteristics, behaviors, and pain points. This allowed us to construct two provisional personas that encapsulated the needs and aspirations of our target audience: inexperienced cooks and novices seeking to improve their cooking skills.
These personas were relatable and guided our design decisions. We named them, gave them ages, backgrounds, and included relatable photos to help us visualize.
By building personas, we could imagine their frustrations when faced with complicated recipes or their sense of accomplishment when creating a successful dish. These personas became the lens through which we made design choices, ensuring they were aligned with the real needs of our users.
Two personas we developed
User Journey Maps
After constructing our personas, we recognized the need for a comprehensive understanding of the user experience. To achieve this, we turned to the creation of user journey maps. These maps provided a visual narrative of the user's entire cooking journey, enabling us to identify pain points and opportunities.
By basing our map on our persona's experiences, we were able to highlight key moments that significantly impacted their cooking journey. These were moments where emotions ran high, decisions were critical, and opportunities for intervention existed.
We uncovered pain points that were impactful for our persona. These included the struggle of deciding what to cook based on time constraints, dealing with ingredient limitations, and the challenge of improvising when key ingredients were missing. Our map also revealed positive touchpoints, such as the joy of finding exciting recipes, engaging with multimedia content during cooking, and sharing their culinary achievements with friends and family.
Armed with insights from the user journey map, we could prioritize design features that directly address the identified pain points. For instance, we knew that simplifying recipe discovery and offering improvisation suggestions were pivotal to enhancing the cooking experience for a persona.
User journey map of Joe, a persona we developed of an inexperienced cook
Design Requirements
We formulated design requirements for the project to establish clear objectives that would direct our design efforts effectively. These requirements served as a roadmap, ensuring that our design solutions were aligned with the project's overarching goals.
-
Provide data on time commitment for recipes.
-
Compile recipes that fit with available ingredients if the user doesn’t know what they can make.
-
Suggest recipes based on the user’s preferences and skill level.
-
Keep the user engaged during the cooking process (ex: with videos or social communication).
-
Provide clear instructions and tutorials (with visuals like pictures and videos) with recipes.
-
Provide explanations of cooking terms when the user doesn't understand them.
-
Communicate with other users to receive help and involve them in the user’s cooking and learning process.
-
Communicate with other users to share photos and recipes to make cooking a more social experience.
To immerse ourselves in our users' experience, our team crafted storyboards that depicted user scenarios. These storyboards functioned as tools, enabling us to view the context in which our users would engage with our app. Through this visual narrative, we not only explored the user's journey but also ignited a creative exploration of features, envisioning their possible impact on our users.
Two storyboard iterations, with each being of different scenarios
Design
Information Architecture
Our information architecture visualized the flow of our app and navigation between screens. By organizing task flows and major features, color-coded for clarity, we could streamline user pathways, minimizing unnecessary screens.
Information architecture
Low-Fidelity Prototype
Our focus then shifted to crafting low-fidelity interactive prototypes using Figma. This phase enabled the collaborative creation of rudimentary screens, facilitating teamwork and rapid iteration. Leveraging Figma's functionalities, we incorporated basic screen interactions for future user testing and evaluation. These prototypes were meticulously informed by our design requirements, information architecture, and storyboards, intertwining essential elements to showcase the user journey and interaction dynamics.
Low-fidelity prototype screens
Interactive version of our first prototype
Annotated Wireframes
Following the creation of our low-fidelity prototypes, we began annotating wireframes. Our objective was to construct minimalist app screens that accentuated functional aspects. These annotations were populated with comments, delineating the purpose and significance of each screen element within our app ecosystem. Leveraging Figma, we crafted annotated wireframes. These wireframes, maintained in grayscale to prioritize performance over visual allure, served as the foundation for our subsequent high-fidelity prototype.
Annotated wireframe of a screen
Test
Results
We began to evaluate our design with a usability test with tasks that gauged user perception of features and the strengths and weaknesses of our interface. Seeing our project ideas from the users’ perspectives helped us discover new insights, potential additions, and contextual pain points to redesign features to better fit our user demographic’s contexts, goals, and desires.
From the usability tests conducted for the low-fidelity prototype, several key insights emerged that contributed to shaping the final design.
-
Calendar Feature Potential Uses: While users recognized the calendar's usefulness, users indicated that the option to input specific times for planned meals could be optional due to their varied schedules. Responding to this, we intended to revamp the calendar design by focusing on date-based planning and offering a simplified recipe input procedure on a single screen. Additionally, we would consider a weekly view option for better organization, and plan to integrate a shopping list feature that generates based on the selected recipes.
-
Search Feature Clarity and Priorities: Participants expressed confusion over the dual search icons on the home page, prompting us to prioritize clarifying this element. Additionally, a user highlighted the need for an enriched search experience. This involves the integration of various filters, encompassing meal types, appliance preferences, and a more expansive list of dietary restrictions.
-
Social Features are Complicated for Users: One user was confused over the interface's cleanliness and static transitions, while another had a preference for passive engagement rather than active social interaction. We were encouraged to cater to varying user modes, ensuring effortless content exploration. Furthermore, we planned to revamp the social feature's design to prioritize asynchronous content.
Evaluation
High-Fidelity Prototype
After acquiring insights from our evaluation involving potential users, we embarked on the refinement of high-fidelity prototypes. This subsequent iteration marked a significant improvement over our preceding low-fidelity prototypes, meticulously informed by user test feedback. Notably, our focus on improving the social screen led us to explore innovative means of seamlessly integrating visual and textual posts, alongside the introduction of a community feature. Drawing inspiration from the successful implementation on platforms such as Reddit, we embraced design conventions akin to those that have demonstrated effectiveness in similar contexts.
Interactive version of our final prototype
What I Learned
As I reflect on the project, I would like to share what not only formed my toolkit but also paved the way for continued growth in my design career.
-
Understanding and Navigating Constraints: One of the significant challenges we encountered was aligning our project with constraints such as time, resources, and requirements. Our initial research unveiled the multifaceted nature of positive cooking experiences, which led us down diverse design paths. This experience taught me the art of contextualizing design efforts to achieve a harmonious balance between creative vision and practical limitations.
-
Adaptation During Pandemic: The project's completion during the pandemic presented its own set of logistical challenges. Collaborative online tools like Google Drive, Miro, Figma, and Wix became essential for shared progress, while meticulously organized virtual meetings and deliverable timelines ensured coordinated asynchronous work. Overcoming these hurdles showcased my adaptability in navigating unforeseen circumstances.
-
Collaboration and Skill Expansion: The project exposed us to collaborative dynamics in design, requiring us to harness platforms like Figma for collaborative prototyping. Learning about design conventions and features within Figma expanded our skill set. Through this teamwork-driven project, we encountered tools and processes that weren't covered in classes, such as user journey maps and information architectures.