YEATS Case Study: Application Designed and Developed at a Hackathon (First Place)

The inspiration behind YEATS are the two ethical issues of food insecurity and public health. The name, YEATS, is also inspired by the word “eats,” relating to food and “YEET,” the sound one makes expressing excitement – the excitement of finding lower-cost food.

You yell “YEET” when you find low cost EATS.

🏆 YEATS was designed and built in a 24-hour hackathon, Hack for Humanity, and won first place out of 221 participants. This is our DevPost submission and our presentation at the event.

My team: Grace Ling, Uma Bahl, Recce Carolan, Carson Hom, Jacob Luke, and Carly Kellner. My role is design – UI/UX, graphic, visual, and interaction design.

👀 What does YEATS do?

YEATS scrapes the web to find low-cost groceries. It also offers a feature of personalization, taking account of the user’s budget and weight goals to suggest recipes and foods to buy.

YEATS addresses food insecurity and improving nutrition education through providing places with lower priced food items and healthy recipes.

Prototyping Tool: Figma

Implementation Technologies: Webscraping (Python scripts, Selenium), Cloud Infrastructure (Amazon Web Services, DynamoDB Database, REST APIs to communicate the data with the mobile app, Lambda Functions to execute the queries), Front-End (XCode + Swift, Figma for prototyping)

🍎 Problem

In 2020, 11% of California residents are food insecure due to high food prices (Feeding America). 25.8% of California residents are obese (World Population Review). YEATS aims to link users to low-cost healthy food sources.

👤 User Research

Due to the short duration of the hackathon, we asked other students about how they would think the best way for low-income households to receive groceries – shipping or pick-up. We agreed with pick-up because shipping includes additional costs, and all households in the Bay Area have access to public transport.

If given more time, we would also ask questions to identify pain points in finding low-cost food and accessing those foods. We would also survey users who would use YEATS and get their feedback on shipping vs. feedback, as well as different dietary restrictions and ethnic food preferences to determine which categories the foods would need.

📊 Market Research

Yelp enables its users to find local businesses. It allows sorting based on price range, but the price categorizations aren’t specific to the item.

Groupon compiles coupons from different businesses in food, travel, entertainment and more. It is not specific to groceries and grocery items.

📝Content Requirements

We focused on two main functionalities.

1️⃣ Seeking low-cost food by scraping the web for the lowest prices for grocery items at local grocery stores

2️⃣ Personalization in enabling users to enter weekly budget to generate a weekly shopping list with custom recipes (and ways to purchase everything).

🗺 User Journey Map

I designed a user flow as I talked about the research and product functionalities with my teammates.

📝Low Fidelity Explorations

I started with visualizing how our design would look like with low fidelity sketches. We later changed our ideas a few times before coming up with our final high fidelity prototype.

🖥 Medium Fidelity Explorations

I moved forward with V1 because my team and I decided to emphasis on the budget but also provide a way for users to search for anything they would like.

V2 was not selected because it has higher cognitive load and the user’s budget is not taken into account of. V3 was not selected because the functionalities of the app could be confused with a search engine with the minimum display of functions (only the search). V4 was not selected because it may be distracting for the user and may side track them into buying different items instead of sticking to their original plan coming in. It also increased the cognitive load on the user.

I moved forward with V2 because it includes a way for the user to check out (shopping cart is docked in the top right corner).

In V1, the price is shown on the top right, which is not aligned with the quantity in the middle right (the price is directly related to the quantity of the item purchased), causing the user to refer to different rows to find the information they need, so it wasn’t chosen. In V3, multiple photos of the item are offered with less emphasis on the nutritional facts. The dietary restriction tags (vegan, gluten free) are also not shown. Through my user survey, I was made aware of the importance of including different dietary restrictions for app accessibility, so thus, I did not move forward with V3. In V4, the store, quantity, and price are next to the photo. This does not create much breathing room for the user as the information is placed within close proximity.

🎨 High Fidelity User Journey Flows

The user enters their budget to search recipes under their budget. The recipes are ranked from lowest to highest price. The user then selects a recipe to view the ingredients and nutritional content of the recipe and may purchase the items.

The user may check out then select the closest grocery store to pick up. The grocery stores are ranked in terms of commute time. After the user selects a store, they are then shown a map of how to get to the store.

The user is allowed to search for any item they want, and the results will be that item ranked from lowest to highest price. After the user selects on which item to view, the user would also be able to see the nutritional information as well as the dietary restrictions tag before adding the item to their cart.

🎨High Fidelity Demo

📏 Edge Cases

1️⃣ Dietary restrictions: We plan to have a more robust categorizations of different categories to increase accessibility. The addition of more grocery stores would also increase accessibility.

2️⃣ No car/public transport: Due to the cost of shipping compared to the cost of driving/public transport, local pick up is the most cost-effective. A group bulk shipping method may be implemented to save the cost of shipping. However, that feature must take into account everyone’s dietary restrictions.

🌅 Conclusion

YEATS was a great teamwork experience. I joined the team only knowing one other member and got to know and work with 4 other engineers. As a designer, I was able to communicate and work effectively as a team to complete the project under 24 hours and win the Hackathon. Uma and I stayed overnight to work on it and set records in our capabilities in endurance.

📰 Research Works Cited