Bites
Creating an easy way to cook with what you have on hand.
Bites offers an easy way to cook with what you already have on hand and provides hands free step-by-step cooking tutorials. Bites’ primary target users include college students and busy adults who want to advance their cooking skills and reduce food waste.
Conducting interviews, paper and digital wire framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The current experience for meal planning and cooking can be daunting. Finding recipes, purchasing ingredients, and gathering equipment are all time consuming. Navigating cluttered websites with insufficient systems for filtering and searching recipes only adds to user frustrations.
Bites is a responsive website and mobile app designed to allow users to quickly generate recipes based on ingredients already on hand. Users can easily input and update their current ingredients to find recipes or create shopping lists generated from user created meal plans. Bites provides useful filtering for people who prefer browsing for ideas, tutorials for those who want to advance cooking skills, and voice command capabilities for those following along in the kitchen.
I researched and collected data from target users about their experiences using other cooking sites and apps.
Although people cook for different reasons and get various levels of enjoyment from it, common themes still emerged from the research. Notable insights from the interviews and conversations include:
People are busy and often do not plan meals ahead of time. People want to quickly and easily find recipes based on the ingredients they already have.
Recipes are difficult to follow in the kitchen. Recipes can be rambling, full of ads, and are not organized to fit on a single screen. Users also expressed annoyance at frequently having to clean hands to click and scroll while following along in the kitchen.
Cooking sites are frustrating to use. Reasons given include: poor filtering and search functionality, and sites are often unorganized and cluttered.
What someone has on hand is most likely to determine what they make. Their reasons included: convenience, reducing food waste, saving money, and using ingredients they know they like.
From these interviews and conversations, I began developing user personas to facilitate an understanding of the needs, desires, and different contexts of use for those involved. I created archetypes of users by considering variables such as: frequency of cooking at home, motivations for cooking, and skill level.
Users needs, motivations, and skill levels differed, highlighting the need to determine how the site could best serve a range of user needs. The personas and user journey maps I made to summaraize the research were used throughout the project to guide design decisions, determine priorities, and create empathy for the individuals I was designing for.
I spent a lot of time understanding the user before ideation began. It was important that the platform not only served the diverse target audience with their different needs, but make sure the user experience was cohesive across all touch points.
During the competitive audit, I noted the offerings, information architecture and designs of the top cooking sites. Many of the sites shared similar layouts and functionality. I utilized the familiar layouts for my own initial designs to allow time to focus more on the features and functionalities I wanted to include.
To distinguish Bites from other sites, I focused on effective filtering capabilities, recipe searches based on ingredients, “recipe cards” that fit essential information into a single screen, and easy to follow step-by-step cooking guides for those with less experience.
After brainstorming potential solutions and looking at user pain points, I created a detailed site map outlining where each of Bites' features would be developed. I could then begin designing specific step-by-step flows for each of the key features.
Laying out pages for all the key features.
After pinning down page designs through user testing, I built a basic visual design system and guidelines to ensure a cohesive user experience throughout the site.
After a busy 2 months, the final design improves upon existing cooking sites and my original designs by clearing clutter and increasing functionality of the tools. Using tags and more relevant filters, allows users to easily find the recipes they are interested in. More negative space, improved organization, and the use of color added clarity and emphasis to what is important.
A walkthrough of Bites' key features.
Bites allows users to view simple step-by-step guides for all recipes and features voice command capabilities for those following along in the kitchen.
Bites allows users to enter ingredients already in their kitchen to search for recipes that can be made on the spot. The experience shown above is how the user inputs ingredients to generate a list of recipes that can be made right now
As an avid cooker, working not this project was incredibly rewarding. I shared many of the same frustrations as those interviewed, so I was excited to take on the challenge. Overall, some beneficial improvements were made to existing cooking sites, including: (a) recipe filtering, (b) cooking with what you have, (c) recipe cards, and (d) guided hands free cooking.
Due to the tight timeline, certain elements and features did not receive the attention needed. The site would benefit from more cohesive branding and use of color, which I hope to address in the future. Based on user testing, the page format when adding ingredients could also be improved upon and users expressed interest in seeing an expiration date tracker for their ingredients.
One key takeaway, for me personally, is not getting too attached to certain aspects of the design. On previous projects I had not needed to make significant changes to the designs after initial user testing. On this, I followed my research and user feedback and reworked large parts of the design throughout the process. Although I was already on a tight timeline, the site’s usability greatly improved in those areas.