Fueling local communities, one plate at a time

CSE 440 Staff
8 min readMar 13, 2021

Team Members: Jimmy Nguyen, Richard Jiang, Sabrina Pearson, Yuji Lai

Problem

COVID has wreaked havoc on small businesses in the US as more and more small businesses are closing permanently at an alarming rate. Our team chose to focus on specifically remedying the disparities that small restaurants face during COVID. Small restaurants in particular have struggled with creating and maintaining a large customer base during this pandemic due to the steep competition they face from larger restaurant brands, which may have more resources available to survive this economic downturn than these smaller restaurants. They have also struggled with issues concerning food waste as unexpected closures due to COVID have led to perishable food items never being able to reach their intended dining tables.

Proposed Solution

To help with these issues, we have designed Locallyours, a subscription service that would provide local chefs from small restaurants within a given community the platform to showcase their food and history in a unique and personable manner that also helps cut down on food waste and benefits the community at large. Locallyours takes the form of a tablet application that is portable and easy to use so that restaurant staff can seamlessly connect with their subscribers (“community members”) through our built-in instant messaging and message boards, log and track the progress of their preparation of orders, and donate any leftover food items to local organizations so their food can nourish the community even outside of the app. Local restaurants would sign up for week-long slots when they would offer a small selection of their full menu to community members. Community members would be able to sample and learn more about the local flavors offered near their homes and would continue to support these local restaurants beyond these week-long slots on the app. Ultimately, Locallyours strives to fuel communities by allowing local restaurants to provide food that is locally ours, belonging to and being a vital part of the community, and locally yours, something that is especially for the community they serve.

Paper Prototype and Prototype Testing

We hand-drew a set of low fidelity paper UIs to realize our design into a paper prototype that users can physically interact with (i.e. clicking on the paper with their fingers). We conducted usability tests in which the users are presented with the paper prototypes, and one teammate who is physically present with the user will move the papers around and guide the user to complete a set of tasks, while another teammate will be present online and take down notes during the interview. We conducted the usability tests mainly in users’ residential spaces because we are in a pandemic and we only recruited users who are in our teammates’ quarantine bubbles. Once we completed the usability testing, we revised our prototype such that it is in the form shown below (Fig. 1).

One interesting result we received from performing usability testing is that our initial arrangement of the icons used to sort and filter items that need to be prepared for each day’s orders was not immediately intuitive to the users we tested our prototype on. The ability to toggle between seeing all items that need to be prepared and seeing items grouped together by user is integral to the workflow of our users — users want to make sure that they have prepared all of the items they need to prepare for the day’s orders and they need to ensure that all individual orders have been prepared before delivering their meal boxes to the customers. This is to accomplish our main task of reducing food waste as this platform should allow our users to plan out how much food to prepare on any given day, reducing excess meals that end up getting undelivered and trashed. Thus, we moved the grouping icons to be closer together and to be in a more strategic and intuitive location so users understand that they can toggle between two different views to visualize their progress in meal preparation. That made our design more intuitive for the users and our solution more useful.

Fig. 1: An overview of the final version of all frames we created for our paper prototype

Digital Mockup

Overview

We created our digital mockup on Figma and used the design ideas conveyed in our paper prototype as the basis for this mockup. We focused mostly on the design of our dashboard as this is the prime component of our design. This dashboard is meant to be the one-stop shop for all of the user’s needed interactions with the app and we liked our L-shaped design that allows for our users to seamlessly toggle between different functionalities of the app in an intuitive manner. Figure 2 below shows an overview of the final version of the frames for our digital mockup.

Fig. 2: An overview of the final version of our digital mockup

We wanted our users to be able to accomplish two main tasks: (1) reduce food waste and (2) connect with customers (i.e., community members). We describe below how a user would be able to use our interface to accomplish these two tasks.

Task Walkthrough

Task 1: Reduce Food Waste

Our first subtask in this section is to determine how many of each item you need to prepare for Wednesday. To start the users clicks sign in and fills out the password and username

Next the user is navigated to the dashboard

The users can select the group by item button to switch the view from order to item. We chose to use a switch button as this interface is intend for tablet use.

Here the User will be able to see the number of each item needed to prepare for wednesday. The next task is to notify the customer the order is ready. From the orders page the User can switch back to the view by order view.

After that the user can click the notify button to complete the task.

The final sub task is to find a local charity to donate leftover food to. First the User will click the Donate/Leftovers button.

The user will be brought to this page in the dashboard. Each charity is labeled with the type of food they accept. Here they can use the scroll bar to find the organization they would like to donate too and click contact finishing this task.

Task 2: Connect with Customers

Owners can fill in their community profile by clicking on the “Profile” tab. The large text box can be used to fill in their restaurant’s story and background. The menu can also be edited from this page.

Owners can respond to direct messages or questions from customers on the “Messages” tab. The message function supports attachments and emojis. Owners can also message customers in a group if necessary.

Owners can post text or photo announcements to their community board through the “Community” tab. Owners have a community profile where they have “interest tags” that community members can use to more easily search for the restaurants that offer the food they are most interested in (e.g. “Cajun”, “Spicy”, “American”, “Seafood”). Owners can then either communicate their announcements or multimedia posts to the Locallyours community at large or to a subset of the community that is subscribed to certain “interest tags” so that they can target specific demographics.

Updates to Digital Mockup from Preliminary Design

We kept the majority of our design unchanged from the preliminary version of the digital mockup as we received positive feedback on the layout, colors, and functionalities of the original design. The two main updates to the preliminary design that we have made include the following changes. Firstly, for our Community tab, we received feedback that the message board feature could benefit from having subgroups within the larger Locallyours community as restaurants may want to reach only certain customers and certain subsets of the community would be more interested in the kinds of foods that a particular restaurant offers than other subsets. Thus, we introduced “interest tags” where community members can subscribe to their favorite “interest tags” to be a part of subgroups of the community and restaurants can also identify with “interest tags” so that they can be more easily searched up by community members. Our user can then post in the Community tab and either make an announcement to all Locallyours community members or to certain subgroups of the community who are subscribed to specific “interest tags”. Secondly, we made searching for organizations to donate leftover food to easier by adding in a search bar as well as a filter option so users can filter the list of local organizations by the types of food they are accepting and can search by the name of the organization.

Link to digital mockup: https://www.figma.com/proto/TKZHraDf7gYxXI6vOKQYx3/Digital-Mockup?node-id=97%3A0&scaling=min-zoom

Summary

Through our user research we validated many needs of restaurant owners that were due to Covid, such as diversifying cash flow, staffing, and maintaining customer relations, but many others that were unexpected needs like reducing food waste. Our solution aimed to tackle many of these issues in a long lasting way so that in any future economic downturn, restaurants don’t face most of the burden. Locallyours as a community focused, subscription based, meal delivery service is that continuing solution. The future we are envisioning is one where restaurants on Locallyours have another source of cash flow, the ability to donate leftovers and reduce food waste, and build a vibrant local community all on our simple tablet app.

--

--

CSE 440 Staff

University of Washington Computer Science, Intro to Human Computer Interaction