Foodie is an app that makes finding free food on campus easy and convenient.

Timeline

April 2019 (2 weeks)

My Role

Product Designer

Platform

iOS App

Team

Cindy Huang (Design)

Haiying Weng (iOS)

Yuxuan Chen (iOS)

Leo Liang (Backend)

Motivation 🍩

Everyone loves free food, especially college students low on meal swipes. We love giving and receiving free food so much so that the students of Cornell University created a group chat in GroupMe with over 4K members and dozens of messages every day solely to share about free food offerings on campus.

People use this group chat for mainly four reasons:

The Problem πŸ€”

However, there are also problems with this method of communication.

Screenshot of typical message content

Typical message content

Screenshot of confusion in messages

Confusion about location and time

Screenshot of disorganized chat

The chat is cluttered with irrelevant content (people leaving and joining)

Members cannot filter the notifications from a group chat, so most members that I spoke to have the group on mute and rarely check the messages. The chat also includes a lot of irrelevant activity, such as people joining and leaving the group. Ultimately, the group is an overload of information that makes it hard to digest.

From the conversations I had with students, I learned that people won't go out of the way or plan ahead to get free food, but it is a good way to save money or get some light fuel throughout the day.

People want free food that is convenient for them, and student organizations want to attract more people to their events by providing food. But, this is hardΒ because:

It's hard to find offerings nearby or on theΒ way.

The group chat is annoying and cumbersome to keep checking.

So, for the three-week CU AppDev Hack Challenge, my group set out to create a way to:

  1. Easily find and sort through all of the convenient free food events offered
  2. Better organize how information about free food is delivered so people can quickly scan for relevant information
  3. Update event info in real time

Ideation πŸ“

To replace the free food GroupMe, our app had to be organized and simple to understand. We brainstormed different features such as a map or a calendar and evaluated the use cases and problems that each idea had.

At this point, I had questions about students' habits and tendencies surrounding free food events. When and why do they care about free food (if at all)? What helps them decide whether to eat at a free food event or use money? Do they plan to go to these events ahead of time or decide spontaneously? To find out which features would be most valuable to students, I interviewed four college students. Here are the trends and insights I found:

Based on these findings, I evaluated the above features in terms of feasibility and impact on students. I chose to pursue the feed format, and brainstormed more specific features and functionality to fill students' needs.

Feasibility matrix and brainstorming 2.0

A real-time feed of free food postings was the most feasible and valuable for students' needs. It could provide the functionality of searching for events by location and time and also fit with the mental model of spontaneity of the current group chat in a more organized format. The calendar doesn't fit students' tendency to spontaneously decide to look for free food, and the map navigation also wouldn't be as valuable since students already know their way around buildings. Though people care about the distance and time of events, a filter function for the feed could fill that need while fitting within our engineering constraints.

Next, I mapped out the flow and hierarchy of the app and how we'd implement browsing, filtering, and posting in the feed.

Flowchart of user flow

Information architecture

Develop πŸ“²

I read through many messages and food postings in the current group chat and evaluated what content was most clear and informative, and what caused follow up questions and confusion. Once I had an idea of the content that is absolutely essential and extra content that could be optional, but still helpful, I laid out the quick-view for the main feed as well as a detailed view.

Content requirements

Information displayed for each event in a consistent, easily scannable format

Next, I decided how to organize the main feed. To simplify and streamline the app, I knew we wanted a main feed of upcoming event sorted by those happening soonest. Free food is usually a spontaneous decision, rather than a planned out meal. But, since students experience frustration when messages get lost or buried in the current group chat, we also wanted to allow people to save an event to easily find later.

Besides upcoming and saved events, another distinct type of event is those created by the user. A student might want to update or end the event to let people know food has run out. I explored various ways to separate and organize the student's own events so that they can view, edit, or update them.

Explorations for my events feed

"My Events" iterations

I originally proposed option A and split the feed into three tabs. But, the "By Me" tab would often be empty and useless for many users who do not post. It felt too heavy to have an entire tab dedicated to this.

Option D's bottom navigation is similar to A, except I changed the "Events By Me" page into a user profile with added features. In an ideal world, this would provide the most functionality with the option to set a user's notification preferences. However, due to our limited time for this hack challenge, I decided that C would allow for prominent access to the events created by the user without an entirely separate page.

Deliver πŸš€

Here are the final interactions handed off to developers!

Final screens

Main screens

Edit events flow

Full flow of editing user's own events

I also created a UI kit to establish a clear hierarchy and visual identity throughout the app.

UI Kit

UI Kit

We won something! πŸŽ‰

At the end of the semester, our team won Judge's Choice from the Cornell AppDev judges!

Team picture

Our team and mentors: Kevin Chan (mentor), me, Yuxuan Chen, Haiying Weng, Leo Liang, and Conner Swenberg (mentor)

During the Hack Challenge, I treated this project as a 3-day design sprint to give the team most of the time to develop. You can view our github and final submission here, based off of my earlier designs.

Reflection 🧐

This project started as a silly and fun idea thrown out during our first brainstorming session, and turned into a very rewarding project. It was my first time ideating and designing an app from start to finish. Though we were not able to implement every feature desired (such as updating events and notifications), there were many lessons learned!

back to projects

Thanks for visiting! Say hi πŸ‘‹ on LinkedIn, AngelList, Email, or Twitter.

Made with πŸ’– by Cindy Huang