Design Systems
Cross-Platform Designs
Figma MCP x Claude Code
Proximity created urgency; data showed it accelerated churn.
The original ask was straightforward: notify users when a match is within 0.5km. But proximity features saw a steep drop-off in retention over time. Speed to match didn’t solve the core issue; it just surfaced low-quality matches faster.
So I reframed the problem:
How might Bumble use behavioral signals to surface compatibility in a way that feels automated, private, and outcome-changing?
Compatibility works when differences fit, not when people match exactly.
Most systems optimize for similarity to the same habits and preferences. In reality, relationships succeed on tolerance. Differences only break down when expectations are misaligned.
These differences inspired me to shift the system from matching identity to measuring compatibility across differences, shaping the questionnaire, scoring logic, and how results are communicated on the app.
The LMS doesn’t say “you’re the same.” It shows how well your differences work together.
Input appears when it’s useful, not all at once upfront.
Traditional onboarding interrupts momentum. I designed a progressive, mid-swipe questionnaire where users answer in context and immediately see their compatibility score update.
Value appears before the match, not after a long onboarding form.
One score across four platforms and four intersecting flows
This system supports four intersecting experiences: initiator vs. receiver, and free vs. premium. Since both users swipe and view profiles, the LMS had to remain consistent regardless of entry point.
Premium gating is placed at the moment of highest curiosity: immediately after a match.
Free: score + compatibility preview
Premium: full breakdown across six dimensions, with radar visualization
The logic stays the same, while the depth of insight changes.
The states that define whether the system actually works
I designed three critical states early in the ideation process:
New users with insufficient data
Low-compatibility matches
Premium gating at the match moment
Each state clarifies uncertainty, frames weaker matches constructively, and introduces a premium feature without breaking the user flow.
The same system is expressed differently across surfaces.
Cross-platform design is deciding what signal survives at each resolution.
Apple Watch: The LMS score becomes the entire experience. The flow reduces to notification → score → confirm → match. Everything else is intentionally removed.
Responsive Web: A larger space allows explicit connections between compatibility tags and the LMS meter. The radar chart becomes the centerpiece.
iOS + Android: The system adapts to Apple Human Interface Guidelines and Material 3 Design patterns, preserving logic while making interactions feel native to each platform.
