Chef It Up!

By: Sheilla Kangwagye, Ha Do, and Ifraah Dhegadub

Figma Link: Chef It Up! Prototype (including previous iterations)

Group mates brainstorming ideas!

Overview

Colleges are not necessarily known for their dining hall food, but nevertheless the student body endures. What can you do? However, cooking tends to be more common as students go off campus to live in apartments with their own kitchens. But what if you wanted to cook as an underclassman in the dorms? And maybe make new friends along the way? Our team decided to create a design that would motivate students to cook on campus while also getting to know new people.

This project falls under a design sprint for our Human-Computer Interaction course at Macalester. We mapped out the entire design process our group would undergo in this sprint.

Design Process

Before we got ahead of ourselves, we needed to do some primary research. This research would focus on students in dorms and their attitudes regarding cooking on campus with new people.

Primary Research

We spoke to a handful of students about their thoughts and some shared similar sentiments of wanting to cook more often, but preferred an external system to meet new people. One mentioned RA-hosted and dorm-specific events as examples of gatherings they enjoyed.

One student spoke about their hesitation regarding social cooking.

“I’ve been interested in baking and cooking since the pandemic and wanted to continue in college, but there’s no motivation. I would love to make food with other people on my floor, but it’s hard to be the one to reach out. That’s the hardest part, organizing everything.”

— Student

After hearing what students had to say, we realized that we had our user group. We would be focusing on underclassmen who were various levels of cooks. In addition to students who want to avoid eating out in general and those just looking to socialize through cooking in the dorms.

However, we were missing a piece of the puzzle. How do we know students would use an app to meet and cook with other students? What was already out there in terms of applications?

Secondary Research

Logos of existing apps

To learn more about what has already been done in this topic, we needed to do some secondary research through competitive analysis. This would help us figure out what existing apps do well and what can be improved. The three apps we explored were Mealime, Supercook, and Cookpad. We cross-referenced their existing features and interacted with their user-interface.

Features that other food apps have

Some of the insights we learned were that:

• Most of the apps were individual-centered and did not highlight community and social oriented cooking.
• The interfaces could be a bit clunky
• The apps were not geared towards a younger audience like college students

This helped us brainstorm some features that would help people meet through our design especially since we are leaning more towards a communal atmosphere. The next step was to make a pen & paper sketch of the app flow and pages. This would allow us to take something abstract in our heads and put it into reality.

Pen & Paper Sketch

Pen & Paper Sketches

Since we needed help narrowing down what the app would look like, we all drew different pen and paper sketches to see what we have in common. Those features would end up being core functionalities. We noticed that all of us envisioned food groups that students would be able to join in the app. We were also clear on having two flows: one for the student joining the group and one for the student creating (hosting) the event.

Having our sketches in mind, we came up with some features:

• Ability to search for food groups and read about the event, location, time, and prepping window for cooking
• Ability to join groups and decide what ingredients you can bring
• Set time you will be able to help cook
• View upcoming food events you joined
• Create your own event, fill out necessary information (like setting up occupancy and ingredient list)

The sketches helped us gain a shared understanding on how the design should look and flow, but we needed to include people early for usability tests at this stage. Without feedback, we could end up designing something that does not work towards our goal.

First Stage Usability Testing

Testing our sketches with users.

We tested our sketches on two people and observed how they interacted with the designs. We also noted which pages stumped them. Then we asked them what they liked and disliked about the design, in addition to their first impressions on what this app was used for. We saw that the ingredients page confused testers and they quickly forgot what the event was for in other pages because the description stopped displaying after. Overall, they enjoyed the experience and saw the use in the design, but wanted more support throughout the app and an easier flow (breaking up steps into their own respective pages)

Testers wished that:

• They were able to know who the host is for an event
• We used checkboxes instead of circles for ingredients (ability to strikethrough)
• We showed event detail in all pages (including ingredients and time page) so that they could remember
• They had a profile page on the app

This feedback led to us incorporating a profile page in our design where you could see the events you hosted in the past and events that you have joined. In addition, we took note of the rest of the critiques since they were small changes that made a big difference in the experience of the app.

Mid-fidelity Prototype

Mid-fidelity prototype

Mid-fidelity prototype

We used Figma to make a mid-fidelity prototype that had a bottom navigation menu that included the home page, upcoming events, create a food group, and the profile page. This design lacked the use of a color palette and app introduction page since we were focusing on a low stakes mock-up to later test with. This prototype also broke up the steps for joining a group that includes reading the description of the session, picking ingredients to bring, setting the time you will arrive to help cook, and the joining confirmation. We also mapped out the experience for hosting groups which included filling out a quick form, setting the ingredients list, setting the prep window, and hosting confirmation. Now we needed to do more usability testing!

Second Stage Usability Testing

We structured the second usability testing on the Figma design pretty similar to the earlier time we did testing. We asked four students to test the prototype and verbally voice their thoughts interacting with it out loud. They shared some similar sentiments and also opposing opinions on various pages and features. To organize the information we gathered, we created a FigJam to sort the feedback based on the category of problem they raised.

Figjam with the feedback from users

Figjam with the feedback from users

Figjam with the feedback from users

The main sections we sorted based off of were feedback related on what to show on the events, questions about app’s purpose, other frustrations, extra features suggested, and possible solutions testers gave.

The feedback ranged from very specific changes like including a section in the description for dietary restrictions to more ambiguous problems like how to onboard a first time user of the app. We discussed as a group which of the feedback we would implement like features that were attainable and which of the ones we wouldn’t. For example, we decided to not include chatting since we wanted to focus on more unique aspects of the app. Overall, this in-depth feedback helped us redesign for our high-fidelity prototype and we were able to make it more user-friendly.

High-Fidelity Prototype (final version!)

Final design of the app

We focused on implementing the feedback from earlier during this stage. We also created a logo and color scheme that would be cohesive across the app. In addition, we added all the interactions necessary for a user to navigate through Chef It Up! The full prototype is linked in the beginning of this article.

Reflection

During this project, we learned a lot about how to define a problem and build something concrete that addresses the pain points of our user group. We also had the option of curating our own design process which required a lot more careful planning.

Overall, we liked the final design of Chef It Up and what we were able to accomplish in three weeks. However, there are some features that we would add or improve upon in the future if we had more time.

Some of these include:

1. Adding a chat feature for after you’ve joined an event. This would allow you to communicate with participants and the host during or prior to the event. This was mentioned by some testers and was in our initial design in case something comes up (and chatting through the app limits off-app interactions).
2. Some testers mentioned wanting to know the participants of an event before joining (like on the events page) and others wanted it to stay anonymous. A solution could be giving users the choice on whether to display their name/avatar if they’ve joined an event.
3. Re-evaluating the hosting an event flow to make sure it’s smooth and fast for first-timer users. Eventually, we want active attendees of other events to gain the confidence to host their own!

Thanks for reading! ❤

Logo for Chef It Up!