breadcrumbs
End to end location based social media app development
Product Design
Frontend Programming
Design Systems
Class Project
Team
Timeline
Roles
Product Designer
Frontend Developer
Context
Building an app in two months, design to launch
For Full Stack Web Programming's semester-long course project, four other programmers and I put our heads other to create breadcrumbs . The timeline was tough - two months to go from a concept to built app. We targeted a Gen Z audience to build out an app that would engage younger users in any way possible.
Ideation and Proof
Everyone else solved for when. Nobody solved for where.
What do Gen Z users want from social media? (Web Research)
Authenticity & spontaneity
Being able to return to it consistently and be rewarded for it
Snapchat | BeReal
Reward showing up at the right moment, with gamified action loops. Content unlocks on a timer, authenticity as core draw.
breadcrumbs (our concept)
Rewards showing up in the right place. Content unlocks on location, exploration is encouraged.
Problem Statement
How might we design a social app that rewards people for physically showing up to a place, not just showing up at the right time?
A moment that could only be unlocked by moving toward it.
The concept that becamebreadcrumbs' core mechanic
User Research
Four user types, one shared instinct: reward people for coming back.
Interviewing 4 Gen Z students, I came up with four personas to center my design around.
Communicates through notes and snapshots, similar to a Snapchat/BeReal user.
The Influencer
Enjoys broadcasting to their local community, drawn to apps like Fizz, Twitter/X.
The Gamer
Treats social media as a points system (eg. Snapchat Streaks, Beli)
The Adventurer
Wants to meet strangers through in travel, well-traveled, exploration-minded.
Design Process
Five user flows, hand-sketched then prototyped in Figma.
As the sole designer on the team, I built out user flows to center our design and build out interactions and menus. In particular, the scavenger hunt feature was difficult to design for due to its varying states and features.
Login User Flow
Leaving Notes User Flow
Create Hunt User Flow
How it works
You need to be at the right location to read a note's contents!
On building the app:
Chose Google Material 3 in React over custom components: velocity was the real constraint with a two-month deadline and a mixed-experience team. I also worked on frontend programming in React and CSS styling to accurately handoff between design and engineering.
Validation
One persona no longer relevant, and changing course to meet our deliverables.
We tested the app with five users before submitting the final product. We saw how they used the app in real time and made the following changes.
Scavenger hunts were too confusing
There were too many steps for the payoff in gamification, and users engaged much more with core flows rather than the game.
Gamer Persona Scrapped
We changed course and focused less on developing the scavenger hunt gamifcation feature, instead focusing on solidifying our core write and read flows.
Results
Winning Best Class Project in the Full Stack course!
Over two months, going from barely any experience in React to a fully functioning app was a great learning experience! Our app was voted by the class as Best Class Project.
User-Generated Breadcrumbs
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!
Reflection
What I'd carry into my next project
Design for engineers, too
Good design is easy to implement — focus on how it actually ships.
Modularity = sustainability
Build with future changes and scalability in mind.
Unique angle = strong hook
Location was our unique selling point, it guided the entire design.
