A Paired Approach to Tackling Food Insecurity at UW
Our Team: JITZ
Jerry Huang- sketching, user research, digital and paper prototyping for app
Istefat Sawda- sketching, user research, digital and paper prototyping for vending machine
Theo Favour — sketching, user research, digital and paper prototyping for app
Zainab Shehzad- sketching, user research, digital and paper prototyping for vending machine
Problem Statement:
Food insecurity is a problem that affects all of the United States, and it’s very prevalent on college campuses where students are often both busy and unemployed. Through our research we identified key problems contributing to food insecurity on campus, such as distant and limited food options, lack of transparency for welfare programs, and limited knowledge of UW Food Pantry’s policies, inventory, and its existence.
Solution Design:
Our proposed design to help combat these issues is a smart vending machine along with an accessible phone application. After conducting research, we found that many UW students skip meals often to cope with food insecurity or save time. They may also have resources available to help them but not know how to utilize them. For these reasons, we thought that the best design would be a mix of a physical and technological solution, allowing the students to get more involved with more modes of access. Focusing on convenience and ease of access, our proposed solution is a vending machine with an associated app. The vending machine can offer students quick and convenient hot/cold meals on the go and has an inbuilt map to help students locate nearby grocery stores, vending machines, and other food options. The vending machine also supports EBT and has an assortment of fresh foods and ingredients along with recipes to help students get proper nutrients. The app allows students to explore nearby food options, check which places accept EBT, look at recipes and share their own recipes with other students and order fresh groceries to cook at home. The vending machine/app will also be able to detail UW food pantry policies, as several students found the lack of clarity in the policies to be an obstacle to obtaining food from there.
Design Iterating: Paper Prototyping and Testing:
After creating paper prototypes for both our vending machine and our companion app UI, we conducted three usability tests to gain user feedback, with participants ranging from freshman to junior UW students to parents, and we gained valuable insight into how a real user might use our design. We conducted the tests with various members being in facilitator, computer, and note taker roles, and just allowing the user to experiment through our prototype without giving excessive direction unless help was requested. Feedback included that the UW pantry policies page was not sufficiently advertised in the app, the out of stock and request pages were convoluted in the vending machine, and that the interactive map in our app could include more information.
Along with this, we also logged critical usability incidents and learned to improve the contrast on some UI elements, reorganize some pages, and add an error prevention screen. With this in mind we implemented changes in our digital prototype, created using Figma.
Design Iterating: Digital Mockup: Vending Machine UI
The user is prompted to tap the “Tap to begin”. There is a request stock button at the end of most pages along with an error button to report any issues and a button that directs the user to the UW food pantry info page.
While navigating the vending machine UI, the user can both obtain meals on or nearby campus and navigate UW food pantry policies at the same time.
The user can choose to select hot and cold meals, or diy packs including recipes. The out of stock page leads to two different pages (has two options):
- The request option to request food out of stock.
- Viewing nearby Husky Munchies Vending machine and the UW Food Pantry
Once the user decides to request the items which gets restocked in 3 hours, they are prompted to confirm.
Then the user can either add or remove items while deciding (and scroll down for more) what to request.
Instead, the user could check out other nearby vending machines and UW food pantry. There is a handy map with all nearby foodbanks and UW food pantry. If the user would like to visit the UW food pantry, they can click on the inventory button to view available items at the UW food pantry.
After looking at all the available inventory in the UW Food Pantry, they can navigate to the policy page.
The policy page includes cost, explains the point system and has a map showing the pantry’s location.
The user can then navigate to the next which would return back to the start page if they had decided to explore the UW food pantry & nearby VMs or go to the payment page if they had chosen items to vend.
Paper prototype VS Final digital mockup
On the payment page, we decided to implement a more horizontal layout (grid based) to ensure that the order summary is on the top of the page and catches the viewers’ eye first.
We also added a husky card button that was not on the paper prototype along with icons to make the payment options more visible.
We decided on a table-like layout to display the food pantry info to both make it visually aesthetic and easy to look through (instead of skipping over the details). We alternated with different colors, thereby utilizing proximity.
Design Iterating: Digital Mockup: Phone App UI
After conducting usability tests, we brought our paper prototypes to life in the form of a digital mockup. Our new design ended up being similar in many ways to its paper predecessor, with a few key differences. First of all, it was much easier in a digital format than a paper one to add buttons, text, and other assets that stood out, due to color contrasting. We also added some options that would integrate with a user’s default phone functions, such as “Directions” buttons, or opening recipe links in a default browser. One important change that we made between digital mockup versions was implementation of the top logo bar to every page, increasing visual consistency.
Interested in viewing our phone app’s design online? Here is a link to view our finalized digital mockup.
The finalized design is both easy to navigate and more aesthetically pleasing than the original designs and the paper prototypes. With it, the user is easily able to take advantage of any of our specific features to satisfy their needs, whether that be finding local and affordable food options, learning about and interacting with the UW Food Pantry, or sharing and finding new recipes.
Summary
As stated before, our research clearly indicated the need for more affordable, healthy and convenient food options readily available for students in UW. Our initial interviews and surveys highlighted the importance of spreading awareness about the UW food pantry and its policies. Our solution thus focuses on convenience and accessibility with a physical and digital design (vending machine and app). The vending machine allows students to buy hot/cold meals, DIY packs and recipes, learn about the UW food pantry while the app has an interactive map for other options and also emphasizes the UW food pantry policies. This dual approach not only facilitates easy access to healthier food choices but also educates users about the UW food pantry through engaging content on the app and interactive features such as an inclusive map highlighting alternative options. By seamlessly integrating convenience and education, our design aims to empower students to make informed choices about their nutrition, promoting overall well-being and encouraging the utilization of available resources when needed.
