The inspiration behind YEATS are the two ethical issues of food insecurity and public health. The name, YEATS, combines “eats,” and “YEET,” the sound one makes expressing excitement – the excitement of finding lower-cost food.
You yell “YEET” when you find low cost EATS.
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?
1️⃣ Scrapes the web to find low-cost groceries.
2️⃣ Personalization: Takes account of the user’s budget and weight goals to suggest recipes and foods.
YEATS addresses food insecurity and improving nutrition education. It provides people with lower-priced food items and healthy recipes.
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)
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 surveyed other students. We asked 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. 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. Those findings could also include dietary restrictions for further personalization.
📊 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.
We focused on two main functionalities.
1️⃣ Seeking low-cost food.
🗺 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
After the idea was finalized, I moved into Figma.
V1 is chosen because my team and I decided to emphasis on the budget. We also wanted to provide a way for users to search for anything they would like.
V2 was not selected because it has a higher cognitive load and the user’s budget is not considered.
In V3, the app could be confused with a search engine. In V4, it may sidetrack users into buying different items instead of sticking to their original plan. It also increased the cognitive load on the user.
V2 is chosen because it includes a way for the user to check out (shopping cart in the top right corner). It also includes dietary restrictions tags as that was revealed to be high priority through research.
In V1, the price is shown on the top right, which is not aligned with the quantity in the middle right. It causes the user to refer to different rows to find the information they need.
In V3, multiple photos of the item are offered with less emphasis on the nutritional facts. Dietary restriction tags are also not shown.
In V4, the store, quantity, and price are next to the photo. This does not create much breathing room for the user.
🎨 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. They may purchase the items.
The user may check out then select the closest grocery store for pick up. The grocery stores are ranked by commute time. After the user selects a store, they are then shown a map of how to get to the store.
The user can search for any item they want and the results will be that item ranked from lowest to highest price. The nutritional information and price of the item is shown before adding to cart.
🎨 High Fidelity Demo
Interact with the prototype here.
Success of YEATS can be tested using user satisfaction, task completion rate, and retention rate.
User satisfaction would be measured through qualitative interviews.
Task completion rate would be measured through how many users used the bookmarking feature vs didn’t use. Task completion rate would examine the usages of features such as number is users buying individual items vs buying items part of a recipe. It will inform the product team of which feature to spend more resources iterating and improving on.
Retention rate of users would show the usages of the application and can be based on location.
📏 Edge Cases
1️⃣ Dietary restrictions: Having more dietary restrictions and stores would 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.
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 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.