Communal Cooking

DESIGN CHALLENGE

Create a web application to either enhance family, health, or recreation. My team chose to do user research and design for enhancing cooking as a recreational activity.

Role

User Research, Prototyping, UI Design, Front-End Developer (HTML/CSS)

Design Team

 Janet He, Diana Thai

Timeline

October - December 2018 (10 weeks)

Product

Check out our website

Problem

Statement

Cooking can be quick, easy and fun, but can easily turn stressful without the right tools and recipes to aid you. With Communal Cooking, you are able to search for any missing ingredients or tools to quickly borrow from neighbors in your area. In addition, you reach out to your community for any cooking questions.

Research

Methods

Needfinding

OBSERVATIONS

To perform needfinding, we observed people cooking in their natural environment, like in their home kitchen or dorm. Throughout the process, users expressed any concerns or problems they ran into. In addition, we took notes of their actions, the kitchen tools they used, and how often they used digital devices to aid their cooking. After, we asked follow-up questions on their experience and overall feelings about cooking.

USER NEEDS

1. Need a convenient and quick way to access missing ingredients, or a similar substitution.
2. Need convenient and quick access to cooking tools, along with the knowledge on how to use them.
3. Need quick and easy recipes that fit within the user’s time and health constraints.

Based on these user needs, we created a point of view to focus our project around.

POINT OF VIEW

Cooking can be quick, easy and fun, but can easily turn stressful without the right tools and recipes to aid you.

Storyboards + Paper Prototypes

After establishing our point of view, we started creating storyboards and sketching some paper prototypes. Our primary goal of our paper prototypes was to allow for rapid ideation and to quickly get user feedback.

Heuristic Evaluations

After careful consideration, our team decided to move forward with and focus on Prototype 2. We asked a fellow student to test our prototype and evaluate the prototype based on Jakob Nielsen's 10 usability heuristics. The following is a list of potential changes based on the evaluator's feedback.

Interaction Flow

Communal Cooking is a web application that allows people to find nearby users that have a tool or ingredient that they need while cooking! We have 2 main features in our app. Our first main feature is being able to search for a tool or ingredient in any particular city. The results will be a list of users in that city that have the tool or ingredient you need. Users can email each other to borrow tools or ingredients. Our second main feature is a forum where you can post specific questions about a tool, ingredient, or recipe; any cooking cooking related question you might have. A list of similar posts will pop up and you can comment on those posts or create your own post if you don't find your answer. Users can update their profile with tools and ingredients they want to share with the community.

User Testing

The main goal of user testing was to identify usability issues. We had each user perform the following tasks:

1. “For your first task, please sign up to create your own profile.
2. “For your second task, imagine you are cooking dinner and you are missing a tool or ingredient. See if someone in the area has the tool or ingredient you are looking for, such as rice or a whisk.”
   
3. “Please contact that person to see if you can use their tool/ingredient.”
4. “For your next task, try to find an egg free recipe.”
5. “For your final task I am going to give you a scenario. You’re visiting your friend at San Jose State. You’re baking cookies together and you need baking soda. What would you do?” 
   

After debriefing, we found 6 main problem areas.

PROBLEM #1: THE SEARCH BAR

Within both of our user tests, there was confusion in using the search bar. The top search bar, intended for seeing which users nearby had a specific tool, ingredient, or recipe, was seen as a universal search bar for any searching needs by our users. When users should have been using the forum search bar, they went for the top search bar. There was also confusion about entering the location in the search bar.

• Change 1: To fix some of the confusion with the top search bar, we decided to remove “recipes” from the list of what can be searched and recipes from users’ profiles. 
• Change 2: We added a more detailed description on our homepage. Our hope was to make it more clear that the search bar in the navigation is to be used for finding a specific tool or ingredient from a nearby neighbor and that the forum is a feature of our website that can be used for general questions about tools, ingredients, and recipes.
  
• Change 3: Since many searches are conducted in the ‘ingredients and tools’ search bar, we added messaging such as ‘Try searching in our forum page!’ after showing ‘0 (zero) results’ as error prevention.
• Instead of saying “Current location”, we changed the location input area of the search bar to say “City, State”, to specify that users must enter in a city AND its state

PROBLEM #2: MESSAGING OTHER USERS

Within both of our user tests, the users clicked on people’s profile rather than click on the mail button to message them right away. One user's reasoning was that they wanted to look at the profile first before messaging. The other user did not have a reason, but was inclined to click on the profile first. While there is nothing wrong with checking out other users' profiles, we can still try to reduce the number of clicks in the process and increase convenience. 

• Changes: For the search results pages, rather than have a mail button which is ambiguous, we changed the buttons to say “Message Me!” so users can see that they can contact their neighbors right away for whatever they need.

PROBLEM #3: USER PROFILE

For one of the user tests and debriefing sessions, we found that the user did not notice that they could personalize their profile and add different things under the ‘tools, ingredients, and recipes’ boxes, which is an important feature in our website. The text box and ‘add’ button were too small to be noticed as an interactive feature.

• Changes: We increased the text box size and ‘add’ button and added color to bring people’s eyes to this feature to make it more noticeable. We wanted people to see that they can personalize their profile and help their community, so this simple change enhanced the users’ experience while using our website.
• Within the text box, we added placeholder messages such as ‘Add your own tools to share here!’ to encourage users to share their different kitchen tools with their community.

PROBLEM #4: USERNAME 

The first user was confused on whether or not ‘username’ meant a set name or email was needed in order to sign in. Though it’s a small detail, this can discourage users from signing in because they are confused about what’s required. Even more, if they do not know or remember their username, they might not even try to enter their email to sign in instead. 

• Change: We specified that both a username or email can be entered into the sign-in text field in order to reduce any confusion.

PROBLEM #5: SEARCHING FLEXIBILITY

User 1 searched ‘egg free’ while user 2 searched ‘egg-free’ (with a hyphen) showing the variability of users' spelling in their searches. In order to ensure that all possible search results will show up, we needed to ensure that the database had as many variations of spellings as possible.

• Changes: We added different spelling variations into our database to ensure that all possible search results will show up. 

PROBLEM #6: THE MAP

In both user tests, the map did not show the area that was entered into the map. This was a code issue and needed to be fixed to prevent and any confusion about the users’ searches. 

• Changes: We planned to fix the code of the map page to display the correct location entered from the search bar. However, we ultimately ended up removing the map.

Iteration

We found that the main breakdown from user testing was the confusion between our ‘ingredients and tools’ search bar and our ‘forum’ search bar. Therefore, we sketched multiple designs of our homepage to quickly display to users that there are two search functions that they could use to aid in their cooking needs.

In our new design, we kept our navigation bar at the top and the ‘ingredients and tools’ search bar in the center of the page. The changes that we made included adding a description above the search bar and including a ‘forum’ section at the bottom of the page. The description for the center search bar is meant to emphasize its use for looking up ingredients and tools that users may potentially borrow from neighbors. The bottom section for the forum is meant to inform users that there is a second feature in our website. With a prominent button to redirect them to the forum page and top questions featured, we hope users will be able to categorize their questions and identify where they should search for the best results. We also hope this convenient button on the landing page will encourage users to explore the second feature whether or not they may have questions. Also, there’s only two clickable buttons (search button and forum button) on the first page (aside from the navigation bar), so users will not be overwhelmed by too many options.

Comparative Evaluation +
Final Iteration

We performed comparative evaluation to see whether our original or redesigned homepage was more effective for users. For our comparative evaluation, we used the same tasks as our first round of user testing. By using the same user testing plan, the only factor that changed was the forum information received from the homepage. If users began by using the forum search bar, it would show that adding information about the forum on the home page was effective. However, if user test results were similar to the first set of user tests, it would show that the redesign was not effective. 

ANALYSIS OF COMPARATIVE EVALUATIONS

After conducting the comparative evaluations on 9 participants, we organized the qualitative results into a spreadsheet by categorizing between Tests A and B, feedback, and errors/breakdowns that we observed. By breaking them down into these categories, we were able to compare the feedback given between participants experiencing our original website and our newly designed homepage (with the forum information at the bottom half of the page).

THE SEARCH BAR

Part of our testing revolved around the functionality of the search bar, where many users' mental model was that the “Ingredients, tools…” search bar was universal for all queries. Only 3/9 of our users correctly used the forum to search for a recipe, with most using the search bar in the navigation bar. Our data revealed that most misinterpreted the wording with the ellipses (“tools…”) to mean that other categorical queries could be searched. Also, some participants considered ‘recipes’ to be a tool, so they thought it made sense to use the navigation search bar to look up recipes rather than to go to the forum page.

• Change: We changed the placeholder text to “Ingredients and Tools” for the navigation search bar (rather than have “Ingredients, tools…”). By clearly stating that only “Ingredients and Tools” can be searched, we hope to clear the previous mental model and push people to use the forum feature instead.

LOCATION INPUT

A breakdown regarding the ‘location’ input for the search bar was that users did not enter both the city and state or they would put a zip code instead, which outputs zero results.

• Change: We went with our redesigned search bar, which change the location input area of the search bar to say “City, State”, to specify that users must enter in a city AND its state. In addition, we removed the Google map on the results page. For safety and privacy reasons, we decided not to display exact locations of neighbors, so the map no longer served a purpose.

THE FORUM

In relation, we found that users were not aware of the forum feature. Overall, only 2/9 users scanned the entire homepage and knew about the forum function before they were given the task that required the use of the forum, while 7 users didn’t see the bottom half of the homepage at all and only found the forum after unsuccesfful searches. We found that most users rarely read the descriptive text provided on the homepage (about the search bar and forum feature), but would notice the FAQ section on the right side once they reached the forum search results page.

• Change: We added forum FAQs on our maps result page. Based on the pattern that the FAQ section tended to be noticed, more users would be aware of the forum feature if they used the “Ingredients, tools...” search bar first.

MESSAGING USERS

Some participants felt the email button looked too ambiguous and flat, and they couldn’t tell if it was clickable. Instead, they looked at their neighbors profiles since the name looked like a clickable hyperlink.

• Change: We changed the email icon to a button saying “Message (neighbor’s name)!” to make it clear that it’s a clickable button for users to quickly message their neighbors.

The Final Product

Learnings & Insights

1. LEARNING THE CODE

One of the hardest parts of this project was overcoming the learning curve. This was the first time my teammates and I had ever coded in HTML and CSS, so there was a lot of trial and error in trying to create our website. We only 4-5 weeks to actually code our website, so learning how to code within that short time frame was difficult.

2. SIMULATING A BACKEND

Instead of using a server backend, we simulated a backend by creating a fake databse using JSON and using localStorage. There were many limitations and problems we faced, especially since the design of our website focuses heavily on having a server.

3. NEXT STEPS

Given that we only had 10 weeks to complete this whole project, there are still many flaws in our website. Given more time and resources, we would create an actual server backend and fix some of the aesthetic flaws.