Skills

Process

1. Receive challenge statement
2. Create product concept 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

Product Concept

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 their existing ingredients via grocery receipt scanning functionalities. 

Competitive Analysis

To understand the space, the team began by looking at existing recipes apps and analogous competitors. The four sources we looked at were SuperCook, Tasty, conventional cooking books, and LinkedIn. 

In particular, we noted how competitors displayed content and filtered out information. Based on our research, we found there was an opportunity to create a social community within our app. By giving the community the ability to rate and share recipes, we could improve overall user-to-user interaction. 

User Interviews

Our next step was to understand the food and cooking habits of young professionals. We interviewed 10 recent college graduates of varying professions. The main user goals from our interviews were:

• A requirement for customization to accommodate various cooking backgrounds and different time restraints
• A need for clear and specific cooking instructions
• A desire to experiment with and discover new recipes

Personas

Based on our interviews, we compiled the main themes and recurring needs or behaviors into 3 personas.

Storyboarding & Scenarios

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.

Paper Prototype

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 a usability testing of my paper prototype, I discovered 3 key problems with my design:

1. Since there aren’t any universal standards for icons, it can be a challenge to interpret more obscure iconography (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. Uniformly using ‘1 unit’ for all types of food was confusing, since that could mean anything from 1 can to 1 package to 1 gram to 1 liter

Wireframes

After conducting our individual usability tests, the team reconvened and discussed key findings to implement into a wireframe.

High-Fidelity Prototype

With our wireframe completed, the team began developing the first pass of our product. We then tested our high fidelity prototype with 5 users, whose tasks were to:

1. Create a CookUp account
2. Set up their CookUp Account
3. Search for the recipe ‘Chicken Broccoli Alfredo’
4. Save the recipe for ‘Chicken Broccoli Alfredo’
5. Look for their saved recipes
6. Create a grocery list
7. Add the saved recipe for ‘Chicken Broccoli Alfredo’ to their grocery list
8. Mark their grocery list as completed
9. View their pantry in the app
10. Add an ‘Egg’ ingredient into their pantry
11. Scan a receipt to add ingredients into their pantry
12. Go into user settings

As a result of our user tests, we discovered:

1. While color palette and typography had been decided by the team beforehand, having each person individually design their own feature resulted in several UI inconsistencies relating to margins, font sizes, drop shadows, and gradient styles
2. After choosing the number of recipe servings to add to a grocery list, there was no indication whether the action had been saved
3. Because all grocery list components looked the same, there was confusion regarding which list had been most recently created
4. Visual accessibility for iconography and graphics was low, since the bookmark icon and plus button were particularly difficult for our user testers to find

Final Prototype

For our next iteration of CookUp, we addressed our user problems by:

1. Developing a style guide to clearly outline the colors, icons, font sizes, components, and margins that we would be using throughout the app
2. Adding a drop-down notification banner so that users would be notified when a task was successfully completed  
3. Using higher contrast elements
4. Enlarging component sizes
5. Adding an underline to navbar icons so that users knew 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!

Style guide for CookUp.

Challenges

Due to the pandemic, the team had to work fully remote across three different time zones. We conducted user interviews and user tests separately, and designed our screens asynchronously. This remote workflow led to several of the issues users experienced in our testing phases. 

However, we combated these time zone differences through open and consistent communication. We also maximized efficiency on our Zoom calls to get as much work done together as possible. 

Takeaways

Good design is informed by good research. Whenever the team was unsure on what steps to take next 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 to create better user experiences.