breadcrumbs
End to end location based social media app development
Project Overview
Timeline
Feb. 2025 -
May 2025
Team
Jennifer Chen
Jerry Huang
Nick Lee
Rose Zhao
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. The web app was completed design to app and delivered in 2 months.
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.
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.
At its core, breadcrumbs is about turning the world around you into a map of memories, messages, and moments.
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, the team studied apps popular with our target audience:
Snapchat & Fizz – focused on real-time, authentic expression
BeReal – unfiltered, daily snapshots
Pokémon GO – location-based gaming that encouraged exploration
Key insights we adopted:
Gamification — score-building and exploration build a sense of progress and discovery
Maps as Homebase — similar to how Snap Map and Pokémon GO use a map-centered UI
Casual UI — bubbly, non-intimidating interface for social exploration
Exploration as Interaction — users are encouraged to physically move to new locations
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?
Location-centric interaction
Socializing through location and spaces
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. For example, creating a new scavenger hunt involved three checks with possibility for error and deadends that were key to inform the user about.
Create Hunt User Flow
Wireframing and Prototyping
I created a high-fidelity Figma prototype after drawing wireframes by hand to guide the team's development and programming. I focused on modularity and repeatable design components. I aimed to signify possible interactions with design patterns and quicken development time.
I implemented consistent design patterns across multiple screens, including reusable components like tab groups to ensure a cohesive user experience.
I organized related interactions—such as those involving friends—into delineated sections, and using the tabs to separate different tasks within that group.
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
Visual Design
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
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 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 continously 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.
Positives
Friendly UI and colors
Creative features and engaging feedback loop
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 and automatic switching of stages in the scavenger hunt.
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
