Case study
Designing cross-system transitions for a unified product ecosystem
Creating scalable attribution and interaction patterns across app and company-level experiences
The Cross-Meta Design System (XMDS) was created as a system layer to sit on top of app-specific design systems (e.g., Facebook, Instagram), enabling company-level experiences within apps.
- Initially a lightweight surfaces (bottom sheets)
- Expanded to full-screen and embedded experiences (e.g., Community Notes)
- Used for privacy, ads preferences, account settings, and more
As XMDS scaled, transitions between app and company-level experiences became inconsistent and confusing.
I was initially asked to address inconsistent use of the Meta logo across experiences, but this revealed a deeper issue:
The system didn’t define how users understood where they were or who they were interacting with, leaving teams to solve attribution inconsistently at the UI level.
Goal
Provide clear guidance for teams building transitions from their app into Meta-led experiences.
Challenges
- Tension between Meta brand and product teams about how and where Meta should show up
- Mounting design debt of bespoke and one-off solutions that didn't scale
- Ever evolving complexity in brand positioning and product needs
Solution
Guidelines and decision tree for transition steps, including proper attribution, published as documentation and built into XMDS components.
Impact
- 50% reduction in design system support requests
- Reduced inconsistency across cross-app experiences
- Enabled scalable, reusable patterns for privacy and consent flows
- Lowered cognitive load for product teams and accelerated development
Profile switcher: Evolving attribution requirements to meet user needs
Switching between profiles was meant to be a lightweight experience, allowing users to seamlessly move between identities. The attribution requirements would have added unnecessary visual weight or cognitive load to an experience that was already fairly self-explanatory. We shifted our attribution guidance to allow for “no attribution” in a small number of cases where it was clear that the user didn’t need to understand Meta’s role in order to successfully use a project or feature.
Meta logo usage in constrained spaces
Product teams across Meta had been using the infinity symbol icon in isolation when space was limited — for example, in notification icons to signal a Meta-led experience. Legal flagged this as a copyright risk, requiring teams to either use the full logo lockup or find another solution.
The full lockup didn't work at small sizes, and using only the logo created brand blindness — it gave users no context about what the notification was actually about.
The solution was a content-based icon library (a lock for privacy, and so on). This satisfied brand requirements while giving users meaningful visual cues. I defined the patterns and guidance for teams to implement consistently.
A scalable transition framework that included a clear transition model (entry, container, destination), a flexible attribution system (visual + text), a decision tree with rules for logo usage, edge case handling guidelines and integration into XMDS components.
This work enabled:
- Trustworthy experiences in high-risk domains (privacy, safety)
- Scalable collaboration across multiple design systems
- Clear ownership boundaries between app and company layers
This project reinforced how I think about connecting large systems:
- Systems will break down at boundaries
- Attribution is a UX problem, not just a branding problem
- Scalable frameworks reduce both user confusion and team friction