@Mentions is a card-based system pattern used to scale mentions and tagging features across the app.
Project
@Mentions
Timeline
H1 '25
Team
Facebook Design System
Context
The original @mentions experience was built in 2016 prior to the existence of Facebook Design System. With a custom-built legacy infrastructure that was under maintained for 9 years, this feature — which has become a core function for social media and messaging apps — simply did not meet industry standards. The design debt, quality and usability issues came at a high engineering and opportunity cost.
In H2 ‘25, Facebook Design System saw and opportunity to drive system adoption, ecosystem quality, and curb design debt, by building and shipping a new pattern that scales horizontally across composer, creation surfaces like comments, stories and beyond.
Strategy
Our strategy was to enable teams to go from 0% system adoption to 80% (factoring in UI elements beyond the scope of Mentions on product-owned surfaces. We anchored our solution on 3 high-impact surfaces Comments, Stories composer and Feed composer, and gathered inputs from usability gaps (synthesized from internal audit, testing data, user research) and system gaps (custom code, framework parity, accessibility).
Leveraging system components, we developed 2 pattern variants that both scale consistently across the app, however, with clear distinctions in how the information architecture is prioritized.
Variant 1: List cells — Optimizes for high volume mentions — where “meta-data” (ie. Friends, Page) and “mutuality signals” (ie. 17 mutual friends) are helpful for identity authentication. It is also ideal for surfaces where mentions API is enabled for both connected, and unconnected users) and where integrity safeguards like @mention ineligibility needs to be supported for public figures.
Variant 2: Horizontal-scroll — optimizes for compact and unobtrusive horizontal layout, and prioritizes profile image in it’s IA. This is ideal for content creation surfaces where parallel interaction occurs between keyboard (input) and user interface (editing).
Leaning on industry standards, qualitative user research, and by integrating product logic, systemic behavior established in the app today, we were able to formalize pattern principles that supports the usage of list cell and h-scroll format consistently, bringing ecosystem cohesion.
Outcome
We met our projected goal in validating and shipping Mentions pattern in elevating ecosystem quality and code adoption and launched Comment and Post Mentions. This pattern enabled library expansion and code adoption opportunity across feed composer, comment and profile surfaces. The quality fix significantly improved tagging transparency and disclosure signals for users with privacy controls enabled. In H2, this system solution was applied to the batch people picker pattern by FB Creation’s Tagging infra team to elevate transparency and accessibility.
@Mentions is a card-based system pattern used to scale mentions and tagging features across the app.
Project
@Mentions
Timeline
H1 '25
Team
Facebook Design System
Context
The original @mentions experience was built in 2016 prior to the existence of Facebook Design System. With a custom-built legacy infrastructure that was under maintained for 9 years, this feature — which has become a core function for social media and messaging apps — simply did not meet industry standards. The design debt, quality and usability issues came at a high engineering and opportunity cost.
In H2 ‘25, Facebook Design System saw and opportunity to drive system adoption, ecosystem quality, and curb design debt, by building and shipping a new pattern that scales horizontally across composer, creation surfaces like comments, stories and beyond.
Strategy
Our strategy was to enable teams to go from 0% system adoption to 80% (factoring in UI elements beyond the scope of Mentions on product-owned surfaces. We anchored our solution on 3 high-impact surfaces Comments, Stories composer and Feed composer, and gathered inputs from usability gaps (synthesized from internal audit, testing data, user research) and system gaps (custom code, framework parity, accessibility).
Leveraging system components, we developed 2 pattern variants that both scale consistently across the app, however, with clear distinctions in how the information architecture is prioritized.
Variant 1: List cells — Optimizes for high volume mentions — where “meta-data” (ie. Friends, Page) and “mutuality signals” (ie. 17 mutual friends) are helpful for identity authentication. It is also ideal for surfaces where mentions API is enabled for both connected, and unconnected users) and where integrity safeguards like @mention ineligibility needs to be supported for public figures.
Variant 2: Horizontal-scroll — optimizes for compact and unobtrusive horizontal layout, and prioritizes profile image in it’s IA. This is ideal for content creation surfaces where parallel interaction occurs between keyboard (input) and user interface (editing).
Leaning on industry standards, qualitative user research, and by integrating product logic, systemic behavior established in the app today, we were able to formalize pattern principles that supports the usage of list cell and h-scroll format consistently, bringing ecosystem cohesion.
Outcome
We met our projected goal in validating and shipping Mentions pattern in elevating ecosystem quality and code adoption and launched Comment and Post Mentions. This pattern enabled library expansion and code adoption opportunity across feed composer, comment and profile surfaces. The quality fix significantly improved tagging transparency and disclosure signals for users with privacy controls enabled. In H2, this system solution was applied to the batch people picker pattern by FB Creation’s Tagging infra team to elevate transparency and accessibility.