TableUp
An app that connects food enthusiasts to explore diverse cuisines through engaging games and authentic conversations.
ROLE
UX Designer
UXR
TIMELINE
August - October 2023
TOOLS
Figma
FigJam
Adobe Illustrator
SKILLS
User Research
Interaction Design
Prototyping
TEAM
Stella Lee
PROJECT OVERVIEW
During my summer in NYC, my "must-try spots" list grew rapidly, but my limited social connections made me hesitant to visit them. Realizing many others shared this discomfort with dining alone and faced challenges in making new connections, I designed an app to connect food enthusiasts eager to explore diverse cuisines with like-minded friends.
The Problem
I wasn't alone in feeling hesitant about dining solo. Everyone I spoke to shared the discomfort of eating out alone and struggled to make new connections and find dining companions.
I asked myself: How can I offer companionship during meals to enhance enjoyment and reduce the fear of judgment? Can I effectively bring people together through food?
The Solution
An app driven by people that fosters real connections over shared dining experiences. Users can skip awkward discussions about budget and allergies by sharing essential details like location, availability, dietary preferences, and more, allowing them to savor the food and companionship without distractions.
01: Research
GOAL
I wanted to understand the specific needs and challenges users face when it came to dining alone and finding companions, and the barriers or concerns that contributed to their hesitation.
To do this, I used the following strategies.
Top Research Insights
User Persona
FEATURE ROADMAP
Based on user research and competitor analysis, I needed to include features in the app that provide quality information about the restaurant, effective filtering of budget & availability, and ways to connect users based on likes, dislikes, and shared hobbies.
This table organizes all of the features of an MVP.
02: User-Flow
The 2 primary actions that guests can take in the app are:
1) Find a table in the “cafeteria” (aka the feed), based on their earlier set filters
2) Create a table to be published in the feed, where other users can join
This is reflected in the user flow that I created in Whimsical.
03: Low-Fidelity Wireframes
Next, I wire-framed the three main sections of the navigation bar:
Cafeteria: The core interaction area where users can join or host tables, view their tables, and see recommended tables based on their preferences. Hosts can find restaurants with reviews and information using an interface inspired by popular food apps.
Profile: With 71% of survey respondents valuing hobbies, preferences, and culinary tastes, the profile page allows users to specify preferred cuisines, dietary restrictions, and share a personal bio with their interests.
Notifications: This section provides organized, real-time alerts for activities like table join requests, messages, and meet start alerts, with direct links to relevant pages.
From the feedback, two predominant questions emerged:
Based on the questions, I implemented two primary changes:
METHODOLOGY
+ Competitor analysis
+ Survey
+ Consumer Interviews
07: Prototype
I began creating low-fidelity wireframes by referencing the user flow map.
First, I drafted onboarding screens where users input location, dietary restrictions, availability, and budget, aiming for a clean, minimal design for a streamlined process.
04: User Testing & Implementation
05: UI & Visual Identity
Lastly, I developed a standout feature: a unique bonding activity inspired by the card game "We're Not Really Strangers."
This virtual game serves as a fun icebreaker, fostering an engaging atmosphere where users can connect over their shared love of food. The game begins with the host dealing a card and answering its question, then passes to the next dealer. This cycle continues until all cards are used or players feel satisfied.
I conducted a user test with six participants. I guided two in person, observing their interactions, while the other four used a link to the prototype and a form to complete the tasks. After each task, I asked for their suggestions and questions about their experience.
06: High-Fidelity Wireframes
Following the final revisions to my prototype, I created a comprehensive brand guide.
Logo: The design features two hands high-fiving, symbolizing the joy of coming together. Utensils replace traditional lines to depict the clapping motion, representing unity through an appreciation of food.
Colors: I chose yellow and orange for their warm, vibrant qualities, which stimulate appetite, exude positivity, and enhance emotional connections with users. Their high visibility ensures the app stands out, aligning with the platform's focus on food, joy, and social connection.
Typography: I selected two modern, simple fonts. "Inter" provides a clean, unobtrusive look for the UI, while "Maple" adds subtle, playful curves to prevent monotony.
Visual Elements: I incorporated playful illustrations into the onboarding pages. Clean, minimalistic, yet fun and unique, detailed line-art graphics effectively complement the typography.
← NEXT PROJECT: OLLIE