@Mentions
Problem
The original @mentions experience was built in 2016, before the Facebook Design System existed. For nine years it ran on custom-built legacy infrastructure that was under-maintained—so a feature that had since become a core function of every social and messaging app simply didn't meet industry standards. The accumulated design debt carried real quality and usability problems, and its custom code came at a high engineering and opportunity cost: framework parity gaps, accessibility shortfalls, and no path to system adoption.
Opportunity
In H2 '25, the Facebook Design System saw an opportunity to turn that liability into system adoption, ecosystem quality, and reduced design debt—by building and shipping a new Mentions pattern that scales horizontally across composer and creation surfaces like comments and stories, and beyond. The target was concrete: move teams from 0% to 80% system adoption (accounting for UI elements beyond Mentions itself on product-owned surfaces), anchored on three high-impact surfaces—Comments, Stories composer, and Feed composer. The bet was that a system-native pattern could replace nine years of custom code while raising the usability and integrity bar at the same time.
Iterations and explorations
We grounded the work in two kinds of inputs: usability gaps synthesized from internal audit, testing data, and user research; and system gaps around custom code, framework parity, and accessibility.
Leveraging existing system components, we developed two pattern variants that scale consistently across the app but differ deliberately in how they prioritize information architecture:
Variant 1 — List cells: Optimized for high-volume mentions, where metadata (Friends, Page) and mutuality signals (e.g., "17 mutual friends") aid identity authentication. It's ideal for surfaces where the mentions API is enabled for both connected and unconnected users, and where integrity safeguards like @mention ineligibility for public figures need support.
Variant 2 — Horizontal-scroll: Optimized for a compact, unobtrusive layout that prioritizes the profile image in its IA. It's ideal for content-creation surfaces where interaction happens in parallel between keyboard (input) and interface (editing).
Leaning on industry standards, qualitative user research, and the product logic and systemic behavior already established in the app, we formalized pattern principles governing when to use list-cell versus h-scroll—bringing consistency and ecosystem cohesion to a pattern that previously had neither.
Outcome
We met our project goal, launching Comment and Post Mentions on iOS with SS+ 0.04% increase in VPV and modernizing a decade-old pattern. Post Mentions also successfully launched on Android, elevating both ecosystem quality, reducing tech debt. This work also drove feature transparency with a projected post-launch impact of an 87% reduction in invalid mention attempts. The quality fix also improved tagging transparency and disclosure signals for users with privacy controls enabled—turning a nine-year-old debt into a measurable integrity and usability win, and opening library-expansion and code-adoption opportunities across feed composer, comment, and profile surfaces.
Next steps
The pattern's reach is already extending beyond its original scope. In H2, the same pattern is being tested on with-tag typeahead, with a projected full-launch impact of a 90% reduction in flytrap volume—and FB Creation's Tagging infra team has applied the system solution to the batch people-picker pattern, elevating its transparency and accessibility. As a system-native, variant-based pattern, Mentions is positioned to keep scaling horizontally across creation surfaces, retiring custom implementations and consolidating the ecosystem behind a single, accessible standard.
