breadcrumbs
End to end location based social media app development
At its core, breadcrumbs is about turning the world around you into a map of memories, messages, and moments.
Project Overview
Timeline
Feb. 2025 -
May 2025
Team
1 Database Engineer
2 Backend Developers
1 Full-Stack Developer
Roles
UI/UX Designer
Frontend Developer
Tools
Figma
React
Next.js
Google Material 3
Framer Motion
Skills
UX Design
Prototyping
Frontend Programming
Product Design
Summary
breadcrumbs is a browser-first social media web app created as the final project for Yale’s Full Stack Web Programming course with a five-person development team.
It enables users to leave geo-tagged notes—“breadcrumbs”—for friends and other users. These notes can only be accessed when someone is physically near the drop point, adding an element of mystery, exploration, and locality to the social experience.
As a designer and developer, I designed product features, created an interactive Figma prototype, assisted with frontend programming in React, and conducted testing for refinement.
The web app was completed design to app and delivered in 2 months and was voted Best Project in the class.
Read crumbs
If you're within the radius, pick up strangers or friends' notes that they left in specific locations
Leave crumbs
Leave notes anywhere! Pick a location and. write something down - a thought, a message, a piece of news. Notes expire after 24 hours.
Add friends
Add friends by email and see what notes they've left - compare how many notes you've left and read with them and rise in the ranks!
Follow trails in the scavenger hunt
Create trails of notes across the globe with the scavenger hunt - complete them in order to win points! See what sorts of creative scavenger hunts others have left.
Problem Statement
Challenge: Design and deliver a web application within two months that innovates upon existing apps for a college student audience.
Many apps focus on temporal authenticity (e.g. Snapchat, BeReal)
Few apps explore spatial authenticity—experiences tied to where, not just when.
We asked: What if moments were unlocked through movement and discovery?
Inspirations and Research
Goals and Research
To inform our direction in focusing on college students, the team studied apps popular with the target audience.
Researched Apps
Snapchat
Fizz
BeReal
Pokémon GO
Key Insights
Gamification
Maps as Homebase
Casual UI
Exploration as Interaction
Design Process
Ideation
We began by asking:
What do users want from social media?
Authenticity & spontaneity
Being able to return to it consistently and be rewarded for it
What doesn't current social media have?
User Personas
Interviewing students and discussing with the team, I built a few different types of user personas based on possible use patterns for the app.
These personas guided our ideation surrounding features, such as:
Privacy Filters: allowing users to choose whether their geo-tagged notes are public to all or just private to friends.
Temporary Notes: notes disappear after 24 hours.
Scorekeeping: each user's number of notes left and picked up are shown in the profile.
Gamification: introducing a scavenger hunt game where users are encouraged to keep hunting down new locations and breadcrumbs.
They communicate through notes and snapshots
Enjoyers of Snapchat and BeReal
The Influencer
They enjoy broadcasting to their local community
Fans of "local" apps (eg. Fizz)
The Gamer
Treating the notes and hunting them as a game
Engaged by points and other rewards
The Adventurer
They want to meet strangers through notes
Well-traveled and exploration-minded
User Flow
Login User Flow
Leaving Notes User Flow
I designed 5 user flows for each possible set of interactions the user can have with various features.
Login
Map (reading notes)
Leave Note (writing your own note)
Profile
Scavenger Hunt
In particular, the scavenger hunt was difficult to design. The scavenger hunt game involved complex interactions between four different stages (active/create/available/completed) and many checks for whether the user could proceed.
Create Hunt User Flow
Wireframing and Prototyping
I created a high-fidelity Figma prototype with five major flows after drawing wireframes by hand to guide the team's development and programming.
I implemented consistent design patterns across multiple screens, including reusable components like tab groups to ensure a cohesive user experience.
For the gamified scavenger hunt, I reused the layout from the “leave a note” screens to reinforce familiar interaction patterns and reduce the learning curve for users.
I prioritized core functionalities such as the interactive map, while offering accessible alternatives like a search bar and confirmation prompts to support different user preferences.
Figma Prototype
Design Library Customization
Used Google’s Material 3 Design System:
Provided consistency and clarity with proven design system
Allowed for fast development with React
Easy for non-designers to implement with modular components
Frontend Development and Constraints
Technical Constraints
2-month timeline
Team of varying technical backgrounds
Must be browser-first
Must be fully functional by deadline
Some sacrifices had to be made on design due to the time constraints of the project. Thus, as both a designer and a developer, I focused on:
Modular, scalable design with React components to speed up dev time and iteration
Building consistent use of React components and CSS classes
Documentation for other devs on the team
Through building the frontend with the team in React, I continuously updated the design based on new deadends and UX concerns (such as displaying distance to a note) as technical constraints and discoveries were made.
Validation
Iterations and Refinements
Based on testing conducted at each of the three stages of development (MVP, alpha, beta), the team received feedback on the app from other students through surveys and testing as they tried features at each stage.
Positives
Friendly UI and colors
Creative features and fills a unique niche
Negatives
Inconsistent use of buttons
Confusing scavenger hunt flows
With each stage, further improvements were made to both the Figma prototype and the web app, such as a revamp of all buttons from Bootstrap to the Google Material 3 component library.
Insight
When testing, we noticed that the scavenger hunt was not being used too much. Some may attempt it, but upon asking their reasons, it seemed that the hunt had too many tabs and steps to go through to create and follow through with a hunt.
Users seemed to be engaged by the core feedback loop of location-based notes without needing more gamification beyond keeping track of scores. Thus, "The Gamer" persona was not as relevant as the others.
Given our 2 month time constraint, we focused on strengthening and debugging the note system. If we had more time, I would want to return to the gamification and polish its interfaces, rules, and information display for clarity and ease of use.
Examples of Breadcrumbs created by Users
Class?
Full stack is the best class!
new haven tour
a quick new haven tour scavenger hunt
This is good coffee
I need more caffeine!
Results
Github Release
The full Github release of the project is available! Some functionality is missing due to inactive databases, so please contact me or another member of the team if needed.
Lessons Learned
Design for engineers, too — Good design is easy to implement - focus on how to deliver the product
Modularity = Sustainability — Build with future changes and scalability in mind
Unique angle = strong hook — Location was our unique selling point and guided the entire design
Impact
Voted Best Project in class - highlighted for creative approach to location-based interaction
Upon reflecting as a team, I thought that we had successfully accomplished our goal of creating an innovative app that targets people of our age group. Despite the tight timeline and looming deadlines, we maintained our original vision for the project and made sure to keep the core of the interaction while cutting some fluff and less relevant ideas. If given more time, I would want to return to the scavenger hunt game and strengthen the enjoyment and clarity of that system.
