Overview
What2Eat is a web application designed to streamline group dining decisions by allowing users to create events, invite others, discover restaurants, and vote on options in real-time.
Duration
July 2024 - Aug 2024
My Role: UX Engineer
This application was a personal project that I designed and implemented, from UI/UX design, Data & API integration, to front-end development.
Technology & Tools
UI/UX: Figma, FigJam
Dev: React.js, Bootstrap, Google Authentication & Firestore, Yelp API, VS Code
Deployment: Netlify
👉 Live Website
Checkout the project at whut2eat.netlify.app
Defining the Project
Background
This project idea stemmed from personal experience with the common pain point of making decisions on what or where to eat in a group setting, where individual preferences and transparency are often lacking or time-consuming to discuss.
Exploration
Based on this broad problem space, I identified 4 major areas of focus that a technology solution could address, along with their respective design requirements.
1
😣 GROUP CONSENSUS
Dining decisions can be time-consuming and cause friction when consensus isn't reached
2
😣 COMING UP WITH OPTIONS
Some people seek dining variety, while others struggle to suggest options to a group
3
😣 DIETARY PREFERENCES
Staying mindful of others' dietary restrictions is challenging, as some may hesitate to share due to privacy or fear of complicating group decision
4
😣 DIFFERING DINING BUDGET
Dining expenses are a key factor in decision-making, with varying budgets that can be difficult to share upfront
✅ AID DECISION MAKING
Facilitate efficient decision-making processes for choosing where to eat with a group
✅ SUPPORT DISCOVERABILITY
Enable discovery of diverse dining options tailored to user preferences
✅ MAINTAIN AWARENESS OF DIETARY NEEDS
Accommodate dietary restrictions and preferences transparently while preserving privacy
✅ FACILITATE BUDGET MANAGEMENT
The solution should set clear expectations and ensure alignment on dining budgets within a group
💡Solution
With these requirements in mind, the web app I created empowers users to collaboratively make dining decisions by serving as a transparent platform to set preferences, discover restaurants, and cast votes in real-time, ensuring all voices of a group are heard and considered in the final choice.
Ideation
Generating Ideas
I brainstormed a few design ideas based on the established requirements. This process led to a more concrete realization of the solution’s potential features.
✅ AID DECISION MAKING
Facilitate efficient decision-making processes for choosing where to eat with a group
Have choice to submit something or just participate in vote
Some way to indicate the selected restaurant, and facilitate decision making
Establish voting rules: how many votes do they get?
Potentially integrate with reservation systems
Mutli-step voting process
1. submit ideas
2. vote
3. confirm
✅ SUPPORT DISCOVERABILITY
Enable discovery of diverse dining options tailored to user preferences
Help search process:
What is nearby,
Yelp integration
Surface suggestions based on individual and group preferences
Organize restaurant suggestions into diverse categories (e.g., budget-friendly, dietary-specific, trending spots)
Integrate a map view that highlights diverse dining options around the event’s location
✅ MAINTAIN AWARENESS OF DIETARY NEEDS
Accommodate dietary restrictions and preferences transparently while preserving privacy
Enter in dietary restrictions into a profile
Summary of the group’s dietary needs in the event details, showing the number of people with specific restrictions
Options for anonymous submission of dietary needs
Icons or labels of cuisine categories and dietary accommodations
Automatically filter and highlight restaurants that meet all dietary needs
✅ FACILITATE BUDGET MANAGEMENT
The solution should set clear expectations and ensure alignment on dining budgets within a group
Notify when budget is exceeded
Filter restaurant options by price range when adding to the event’s voting list
Provide cost per person estimate
Menu pricing transparency
Budget tracker during the voting process, updating as restaurants are added or removed
User Flows
With a clearer idea of the solution’s features, I created user flows to detail user interactions and experiences. These points of views helped shape the initial designs and information architecture.
Design
Concept Sketches
I started the design phase with several rough sketches based on the established user flows and design ideas. This stage helped me determine the initial site navigation and some specific features.
Wireframes & Low-Fidelity Designs
These designs laid the foundation for the app's user interface and interaction flow.
Key Design Considerations
❔
When it comes to information architecture, how should navigation be organized and what features might exist together on the same page to maintain the best user experience?
Important Features
Event Details: date/time of the event, invite link, participants. Holds sign up/login functionality
Voting List: list of suggested restaurants that participants have submitted. Holds the voting functionality
Restaurant Discovery: browse restaurant options to add to the voting list
User Preferences: participants can add/edit budget and diet preferences
V1
Event Details + User Preferences
(on single page)
Support contextual relevance as event details and user preferences are both related to organizing and planning, while maintaining simplicity by reducing the number of navigation steps
V2
Event Details + User Preferences +
Voting List (on single page)
Provide a comprehensive view where users can manage event details, update preferences, and view/vote on suggested restaurants all in one centralized hub.
V3
Event Details + User Preferences
&
Voting List + Restaurant Discovery
Present a clear separation of functions where users can focus on event planning and preferences separately from restaurant selection, reducing cognitive load and improving usability
🏆 Decision: V3 Event Details + User Preferences, Voting List + Restaurant Discovery
V3 offered the best approach, balancing contextual relevance, simplicity, and usability. Users can focus on the event details and setting preferences in a dedicated session, while managing restaurant selection and voting in another. It provides clear delineation of tasks without overwhelming users.
Event Details
User Preferences
Voting List
Restaurant Discovery
❔
What is the best way to surface individual budget and diet preferences with the goal of helping the group remain conscious of individual needs to inform decision-making?
V1
Filtering Voting List
Apply compiled group preferences as filters to the voting list (options added by users)
V2
Filtering Search Results
When users browse restaurants to suggest to the voting list, automatically filter the results
👉
👉
🏆 Decision: V2 Filtering Search Results
This strategy proactively reinforces awareness of group preferences prior to decision-making. Through conscious decision-making users are reminded of group preferences upfront, promoting consideration of everyone's needs. With an efficient search, users can see relevant options immediately, reducing the need to sift through irrelevant choices.
Additional Considerations
-
Provide Transparency: Include clear indicators or tooltips explaining why certain restaurants are included/excluded based on group preferences.
-
Maintain Flexibility: Ensure users can easily adjust filters to explore broader options if desired
Mid-Fidelity Designs & Feedback
I improved upon the low-fi iteration with the goal of soliciting external feedback of the designs. A UX expert reviewed this mid-fidelity version which helped shape the final iteration of designs.
Key Design Recommendations
CALL TO ACTION
Emphasize guiding users seamlessly through the app by clearly directing them to next steps and additional features.
STATE CHANGE
Enhance user interaction by making state changes more intuitive and accessible, such as implementing hover effects.
DESIGN LAYOUT
To improve usability, refine language and optime layout for better comprehension and visual appeal appeal.
🚨 New Feature: "Top Voted Restaurants" Page
Goal: Aid Final Restaurant Selection
A consensus can be determined based on the group’s top voted restaurants, displayed on a dedicated page.
Users can bookmark the page to come back to it, or share the link directly with others.
Design System & Brand
Color Palette
Logo
Component Design
I used React-Bootstrap, to streamline the design process and ensure consistent, responsive components. This allowed me to focus on refining the user experience while leveraging a well-tested framework.
Development Process
Technology Stack
Feature Implementation
Event Creation
-
Upon form submission, a new event object is created
-
The event has a unique id generated using the current timestamp, converted to an alphanumeric string
-
Each event is added as a new document or record to the events collection in Google Firestore
Ex. Newly Created Event
User Sign Up / Login
-
Serves as a dual sign up and login page for new and returning users
-
Users input a username and password, authentication is handled by Google Firebase (Authenticate)
-
User inputs username and password
-
Google Auth uses email as part of the credentials, but to simplify sign up/login and tie users to a specific event, the sign in form takes only a username string rather than email
-
After validation and formatting, new users are linked to an event by generating a unique email:
-
{username}@{eventId}.com
-
-
-
The new user is added to event.participants with their generated email as the key
Ex. Newly Created User
💡
With this method, a user can belong to multiple events and take actions such as add/remove restaurants, vote, and set preferences related to a specific event without affecting other events they belong to. Essentially, they are treated as a new user for each event they join with their username / generated email being the attribute that relates their Google Auth credentials with an event they belong to.
User Preferences
-
Logged in users can add or edit their preferences for an event
-
Currently supported preferences are:
-
budget: single select from [$, $$, $$$, $$$$] saved as an integer 1, 2, 3, or 4 respectively
-
diet: multiple select from ['Vegetarian', 'Vegan', 'Halal', 'Kosher', 'Gluten-free'] saved as an array of strings
-
Ex. User Preferences Object
Restaurant Discovery
-
Users can discover restaurants to add or remove to their group’s voting list
-
Data is sourced from the Yelp Fusion API
-
Location: if location permissions are granted, a Yelp search can be made with longitude and latitude coordinates, otherwise a user can input a zip code, city, address, etc.
-
Filters: initial filters are applied to the Yelp search based on aggregate data of all participant preferences in the event. To expand the search, users can modify the filters accordingly
-
Restaurants are added to event.restaurants
Ex. Newly Added Restaurant
Voting System
-
Users can vote on restaurants added to the event voting list
-
Each user has a maximum number of votes based on event.votesPer established on event creation
-
For each vote cast, total_votes for the restaurant increases, while the user's votes_left decreases
-
When all a user’s votes are cast, they can remove a vote from a restaurant to allocate it to another
-
When a restaurant is removed from the voting list, votes must be given back to the users who cast them for the deleted restaurant
-
Restaurants in the voting list are sorted in descending order (highest to lowest) by total_votes
Top Voted Restaurants
-
A summarized status of the group’s votes, updated in real-time to inform the group’s final decision
-
The restaurants included on this page are determined as followed:
-
The values of the top 3 total vote counts are identified
-
Restaurants with only one vote are excluded to ensure the results reflect a true group consensus rather than individual preferences
-
Any restaurants with the top 3 total votes is added to the page (restaurants with tied number of votes are also included)
-
Technical Challenges
VOTING SYSTEM
It was difficult to manage dynamic vote reallocation when users shifted votes between restaurants or when a restaurant was removed. Ensuring accurate real-time updates to required careful handling of state and database synchronization to avoid inconsistencies.
DATA REPRESENTATION
The data architecture integrates participants and restaurants within the event object to maintain contextual relevance, streamline data retrieval, and simplify management of relationships.
MULTIPLE OPEN EVENTS
Handling multiple open events presented a significant challenge, as users would have authentication conflicts. To address this, the app detects changes in the logged-in user and verifies their status for the event.
Wrapping Up
What comes next?
EVALUATION
Testing with users would give insight into how to improve the user experience through analyzing metrics like task success rate
FEATURE EXPANSION
I have several new features in mind that would further embellish the site, such as voting deadlines or an interactive map
ANIMATIONS & TRANSITIONS
A simple way to enhance interaction is to add transitions after actions are performed such as loaders upon navigation
SCALING
This project was a personal thought exercise and a chance to create something fun and useful. I would love to eventually support high user traffic and data demands