Overview

Have you ever returned home from a long day of classes, wanting to prepare your favorite cuisine but ending up with ramen owing to a lack of ingredients in the refrigerator? This happened so many times when I was in college. When students enter college and start living by themselves, they felt frustrated to balance life and study since chores like grocery shopping and cooking can seem very overwhelming at first. This results in unhealthy eating habits such as eating out frequently and skipping meals.

My role: UI/UX Designer Front-end Developer

Tools: Figma Miro Vue.js

Skills: User Research, Ideation, Rapid Prototyping, User Testing, Visual Design

Timeline: 3 months

How might we design a way for college students to cook meals more regularly and consistently?

Solution

Customized meal plan

AR-SCAN Object Recognition

Collect favorite recipes from everywhere

Research

Before the project started, we conducted several brief, unstructured interviews with individuals who we could find immediately around us, in order to figure out their pain points and needs. Thus, for our first round of user research, we conducted 8 user interviews and then came together as a team to discuss the insights.

Interview & Affinity Mapping

To better understand how students cook in their daily life and identify potential problems, I advocated for conducting Semi-structured Interviews first before diving into solutions. I also encouraged our developers to join us for affinity mapping sessions so that we could brainstorm solutions as a group based on our results.

Main pain points faced

🙁 Missing ingredients when trying to cook something
🙁 Cooking takes students too much time and eventually order delivery
🙁 Lack of food knowledge, do not know what to buy at store and what those ingredients can be cooked for. Ends up cooking same dishes.
🙁 Recipes that do not correspond to their prior cooking experience make them feel less confident
🙁 They have no way to collect their favorite recipes, so they have to look for them every time they want to eat.

Personas

We sythesized the research insights and created 1 personas to help the entire team better understanding who we're designing for.

Define

Problem Statement

Student needs a more effective way of managing their food plan and collect favorite recipes in order to save time and money while still exploring new recipes.

Design Goal

Narrow down recipes options quickly
Allow Students to plan their meal ahead and buy all ingredients at once
Provide a wide variety of recipe options and food knowledge

Ideation

We conducted persuasive design as a team to determine the primary potential barriers that prevent individuals from engaged in our target activity. Then, we started brainstorming different ideas that can bring positive behavioral change by either increasing position motivators and simplicity or eliminating factors of demotivation.

In this situation, we want to make it easier for users to plan their meals by reducing the time it takes to find quick and inexpensive affordable recipes and allow them to prepare with less effort. Then, we brainstormed ideas individually and categorized similar ones into groups.

After coming up with 37 ideas in total, we decided to use the Impact & Effort matrix template to prioritize them in order of importance and assess their feasibility. Then we narrow down top 3 ideas from our 12 different concept sketches:

Meal plan + shopping list
Scan ingredient to get recipes recommendation
Upload recipe

Paper Sketch & Wireframe

After I finished the information architecture, I started looking into the paper wireframe that allows me to visualize how each component and visual element should be positioned on the page. It also gave me a chance to think about information hierarchy that I can present the content and function in a more structured way. I had a bunch of discussions with the team and I iterated the wireframes to make it more concise and align with everybody's expectation.

User flow

Now that we had an idea from our minimum viable prototype, we sketched out some ideas and thought about what our app and user interface might look like.

We decided to call out 3 main features:

Meal plan + shopping list : where students could easily plan their weekly meals, get a shopping list with them in market, and let the app picks recipes from your saved lists.
Scan ingredient to get recipes recommendation : where students can learn new ingredient and get recommended recipes to cook it.
Upload personal recipe: where students can upload their personal recipes by inputting steps and link, or share link to family and friends to get their secret recipes.

Evaluation & Iteration

User Testing

To evaluate the usability of our app, our team conducted 5 user tests with some of our wireframes and initial designs with participants. We summarized our main findings below.

Problem 1: 5/5 users had a hard time finding the "upload recipe" button. While we were conducting user testing, almost all of our participants mentioned they would like to see this button in an evident place that can attract their attention.

Problem 2: No clear feedbacks on actions. 5/5 users mentioned that they were not sure if the recipe was added to the meal plan/favorite list successfully. Occasionally we observed that users would switch to certain pages to confirm recipes were successfully added.

Problem 3: Users prefer to browse the recipes first and add it to meal plan. We found that our users meal planned one week ahead max.

Iteration

In order to address the issues uncovered above, we revised our final sketches as such

Iteration 1

I changed "Find a recipe" to "Add recipes" because generally people are more familiar with the word “add” and it’s more consistent with user flow that they actually choose recipes from their saved list.
Even though the scrollable calendar on the top enabled users to pick between day of the week and date, we thought that 7 tabs on the top navigation would be crowded on smaller devices. We've also noticed that most users only remember the day of the week rather than the precise date. As a result, we replaced it with a weekday tab on the left with a larger clickable area and a short statement to inform users of the month's week.
we also change the meal plan to second tab since user said they want to explore different recipe when they landing on app rather than seeing empty meal plan.

Iteration 2

In order to address the lack of feedback，we propose to give confirmation messages in the form of pop-up windows to inform users that activities have been completed successfully,. The message "You've successfully uploaded a recipe" will appear in the popup window.

Iteration 3

Users takes more than 1 mins in average, in finding how to create their own recipe and invite their friends to edit together and they mentioned that the pop-up buttons are so confused that they barely understand the meaning. Therefore, we integrate the upload image and friend invitation to one page, users would be able to create their recipe in simple steps.

Final design

scenario 1: Make meal plan

scenario 2: Seach ingredient

scenario 3: Upload personal recipe

Learning&Reflection

What I learned

Team efficiency & Communication

We employed agile methodology to complete this project from user research, UX design, to create interactive prototype with vue.js at final stage. Even though the team was splitter into designers and developers, it is important to help the entire team better understanding who we're designing for and product vision.

Feedback

Feedback is a key indicator of user experience design. It can provide users comfort, confidence, and a sense of security, which allows them to trust the product and gain more motivation while using with it.

Where to improve

Improve meal plan

I wish to conduct more user testings and iterate on the final design including the label and graphics.

Recruitment

Recruit members who are familiar with front-end development, back-end development to refine this application to usable phase.

Recipebook