F-ate

Connecting people through local shared dining experiences.

ROLE
UX Designer
UX Researcher
TIMELINE
48 Hours (Hackathon)
TEAM
3 UX Designers
PROJECT TYPE
Mobile App

Project Overview

F-ate is a mobile app that highlights social dining events from people and local businesses. Whether you want to create an event, join a group at a restaurant, or find new friends in your community, F-ate supports you at each step of the way. By focusing on food-related events, F-ate distinguishes itself from standard meetup apps.

My Role

I was the lead UX designer on this project, creating all the sketches, wireframes, and most of the high-fidelity final screens. I also contributed to UX research by analyzing survey results and conducting the secondary research. 

Supporting New Connections

We were tasked with creating a design that addressed the theme of “connection”. Given the broad scope, we identified a challenge that is commonly shared among students on our campus: many people move to the Bay Area to attend school or start a new job, but struggle to initiate conversations with strangers or find new friends.

So, we asked:

How might we help people build meaningful connections first online, and then in-person?

F-ate: Core Experiences

Home Page
F-ate offers two home page views: one that shows existing social dining events near the user's area, and one map view that shows restaurant deals and specials in a list view.
1/ Create a Dining Experience
For people who enjoy trying new restaurants and want to meet new people while they do it, F-ate supports users in creating an invite to their dining events and customizing the settings.
2/ Join a Dining Experience
For people who may not know what restaurants they want to try, but enjoy socializing and hanging out with new groups, F-ate also allows registered users to join others’ dining events.
3/ Find a F-ate (New Friend)
For people who are looking for friends that enjoy the same cuisines, F-ate offers a “buddy” option where users can connect with others on the app. F-ate is a safe space for users to find non-romantic connections.
Design Process

How is tech used to build connections?

Social media is a helpful tool for staying connected with friends and family members over long distances, but research has shown that it isn’t a substitute for in-person social interaction. We want to create an app that allows for friendly introductions before committing to an in-person meeting.

01/ Discover – Primary
Who are we designing for, and what do they need?
02/ Discover – Secondary
Desk research on social dining experiences
03/ Define
Finalizing our HMW Statement
04/ Design
Refining ideas from sketches to high-fidelity
1 / Discover

Who are we designing for, and what do they need?

Our first goal was to narrow down a target audience and understand key barriers to forming and maintaining social connections. Given our limited time frame, we decided to use convenience sampling by sharing a survey on our social media pages to gather responses quickly. We asked respondents to share about how they have met new people, and whether social media has played a role in their experiences.

We received 35 responses from people aged 18-34 years. 68.5% of respondents have lived in their current city from 0-5 years. From this survey, we learned that photo-based social media (e.g., Instagram, Facebook) and community-centered applications (e.g., Discord, Facebook, LinkedIn) were popular ways of meeting new people.

Discovered Core Themes
2 / Discover

How relevant are these findings?

After we found these core themes, I wanted to triangulate our research and support our findings by citing existing academic work that involves food and building social connections with others. I conducted a quick literature search on communal eating and discovered that social dining has benefits we can leverage to address loneliness. If you'd like to see the research document, please click on this link (will open a Google Document).

3 / Define

Finalizing Our HMW Statement

We decided to focus on a social food app can help people who move to new cities try new foods and also meet new people at the same time, helping them form friendships. With this new scope, we asked:

How might we help people build meaningful connections first online, and then in-person?

4 / Design

Our idea's evolution from sketch to high-fidelity

To accommodate for different levels of user involvement, we decided to develop three main user flows: one for people to create their own event, one for people to join an existing event and one for people to connect with other community members on the app.

Starting from Sketches

With our user flows defined, I sketched out our main screens, then created mid-fidelity wireframes for each screen in Figma.

Final Product

Introducing:
F-ate

We used orange and blue as our core colors in our high-fidelity prototype. Orange is associated with social and cheerful emotions, while blue represents stability and reliability. When used together, these colors can help the app feel balanced.

We also decided on our product name, “F-ate”. Coming from the words “friends” and “ate”, we hope to support fateful food-centered friendships on our app, and in person.

Project Limitations

One major limitation was time: we didn’t have sufficient time to conduct user interviews or concept test our idea along the way. We also relied on convenience sampling to save time; with more time, we could conduct research with a random sample to gather more feedback on the validity of this app idea.

Integration with existing food rating platforms like Yelp would be ideal. In a fully-developed app, we would want to add integration so that we don’t have to manually update business information.

Finally, the judges mentioned privacy concerns – who can message whom, and how do we prevent harassment? Users should be able to set their privacy levels and limit who they want to contact them (setting preferences for people of a specific age, gender, location, etc.).

Reflections

This was my first time creating an interactive prototype from scratch, and I learned a lot about choosing colors with high contrasts, creating frames for interactions, and using auto layout to quickly organize different design elements. Working on this hackathon project helped me grow as a UX and visual designer, and I’m excited to carry these skills forward to future projects!

Other Projects