People who are new to cooking often don’t know what they can do with their ingredients, resulting in large amounts of food waste. Oftentimes, these users have to go to several different sources to research appropriate recipes. Going through this searching, planning, and tracking process can be an overall overwhelming and inefficient process.
September 2020 - December 2020
UX Researcher, UI/UX Designer
Figma, Miro, Zoom, Google Suite
Sharon Lin, Kevin Chen, Alice Shih, Elena Fang, Helen Song
Collaboration, Competitive Auditing, Persona Design, Storyboarding, Interviewing, User Testing, Wireframing, Information Architecture, Paper Prototyping, High-Fidelity Prototyping, Branding
1. Receive challenge statement.
2. Create hypothetical product to answer challenge statement.
3. Conduct competitive analysis.
4. Develop personas and storyboard scenarios.
5. Create a paper prototype.
6. Make wireframes.
7. Design first pass of the high-fidelity prototype.
8. User test first pass.
9. Design final pass of the high-fidelity prototype based off feedback.
10. Present findings and finalized design to class.
CookUp is a mobile application aimed at young professionals that helps its users quickly browse and search for recipes based on their current ingredients, cuisine preferences, and cooking ability. Users are able to plan grocery lists based on pre-selected recipes and track existing ingredients via grocery scanning functionalities.
To understand the space, the team began by looking at existing recipe apps, as well as analogous competitors. The four sources we looked at were SuperCook, Tasty, conventional cooking books, and Linkedin.
In particular, we took note of how competitors displayed content and filtered out information. Based on our findings, we found there was an opportunity for creating a social community within our app, and improving user-to-user interaction with the ability to rate and share recipes.
Our next step was to understand the food and cooking habits of recent graduates and young professionals. We interviewed 10 recent college graduates of varying professions. The main findings from our interviews were:
1. A need for customization to accommodate various cooking backgrounds and different time restraints.
2. A need for clear and specific cooking instructions.
3. A desire to experiment with and discover new recipes.
We compiled the main themes and recurring needs or behaviors of our interviewees into 3 personas.
To better understand the context in which our target audience might be using our app, we came up with two scenarios of our most common use cases.
The team split up the app’s features so that each member had a specific section to test out using a paper prototype. Here, I worked on the grocery feature.
Based on my usability testing, I discovered 3 key problems with my design:
1. Iconography was difficult to understand. When there is no universally accepted icon design for a feature, it can be a challenge to interpret more obscure icons (such as for recipes).
2. Some buttons were invisible, hard to find, or inconveniently placed — like having the “Cancel” button right above the “Home” icon, which could lead to user error in accidentally entering the “Home” page instead of the grocery list again.
3. The units system was confusing. What is 1 unit of food? A can? A package? A gram? A liter? There needed to be a more refined measurement system.
After conducting our individual usability tests, the team reconvened and discussed key findings to implement into a wireframe.
With our wireframe completed, the team began developing the first iteration of our product.
We then tested our high-fidelity prototype with 5 users, where their tasks were to:
1. Create and set up a CookUp account.
2. Search for the recipe Chicken Broccoli Alfredo and save it.
3. Look for your saved recipes.
4. Create a grocery list and add your saved recipe of Chicken Broccoli Alfredo to it.
5. Mark your grocery list as completed and view what’s in your pantry.
6. Add an eggs ingredient into your pantry.
7. Scan a receipt to add ingredients into pantry.
8. Go into user settings.
As a result of our user tests, we discovered that:
1. There were several UI inconsistencies with this iteration. While color palette and typography had been decided beforehand, having each person design their own feature resulted in inconsistent margins, font sizes, drop shadows, and gradient styles.
2. Some of the visual feedback after completing a task was unclear. After choosing the number of recipe servings to add to a grocery list, there was no indication whether these actions had been saved. Because all grocery list components looked the same, there was also confusion regarding which list had been newly created.
3. Visual accessibility for iconography and graphics was low. The bookmark icon and plus button were particularly difficult to find for our user testers.
For our second iteration of CookUp, we addressed our user problems by:
1. Developing a style guide. This clearly outlined the colors, icons, font sizes, components, and margins that we would be using throughout the app.
2. Adding a notification banner. Users would be notified by a drop-down banner on the screen that their task was successfully completed.
3. Using higher contrast and enlarging component sizes. In addition, we added an underline to navbar icons, so that users were visually informed which page they were currently on.
Overall, this prototype was well received. In a class of 90 people and 17 projects, CookUp was voted third best app!
Due to the pandemic, the team had to work fully remotely across three different time zones on Zoom. We conducted user interviews and user tests separately, and even designed our screens asynchronously. This led to several of the issues users experienced in our testing phases.
However, we combated these time zone differences through open and consistent communication, and by efficiently using our Zoom calls to get as much done together as possible.
Good design is informed by good research. Whenever the team was unsure what next steps to take in our iterative process, we would refer back to the user research we did. We would then discuss major themes and how to address them.