Content standards

Highlights: Content patterns, content standards, mental models, style guide, collaboration, tone framework, identifying UX issues, taking initiative

TL;dr: I noticed that designers were using components in different ways that might not match user mental models. I brought people together to create and publish a well-rounded content standard for use across Facebook app.

People problem

People are used to following a standard mobile messaging UI, with messages you sent on the right, messages someone else sent on the left, with messages from the system typically in the middle. (Just look at iMessage, WhatsApp, or other popular messaging services.)

In my work on a new product feature at Facebook, I noticed designers were breaking the mental model of the messaging patterns by using the most eye-catching component to send a system message in the user’s messaging place. If we launched this, it could be incredibly confusing for users, who might wonder if they had sent someone else a message by accident, or if the other person in the conversation had sent them this message—all the potential for a game of telephone gone wrong.

The strategy

To follow established UI patterns, reinforce user mental models, and make conversations clear on our messaging app, I set out to standardize the way we designed and used content for these messaging components.

What I did

Audited to understand the spectrum of uses

Since I was working with another content designer on the product feature, we worked together to scale this component, putting a call out to content designers across Meta to see how they’d used the components for similar interactions. We used a form to capture relevant information about each use cases, like location and goals of component usage, content strategy principles, and insights from user research or data science. Once we understood all the different ways products used the components, we could test different iterations of the standard to make sure we scaled them across use cases.

Built a skeleton content standard and collected feedback

I flagged this inconsistency to my design team, and created a template indicating what each component and element should be used form what it should accomplish, and who can trigger it—the MVP of this standard. I sent the template around to other content designers for feedback, and incorporated that feedback into my work. This allowed use to confirm there was an opportunity to standardize these components.

Wrote, published, and shared the content standard

We worked with product designers and engineers to make sure our content standard aligned to their design standards and engineering capabilities and patterns. We worked with the Central design team to make sure our content standard aligned with the others.

In developing and iterating the standard, we incorporated learnings from the use cases we audited, common UI patterns, our universal content standards, our tone framework, cross-functional standards and capabilities, user research and data science learnings, and common product goals.

Results

These messaging components now follow common patterns and user mental models, with consistent use across different surfaces and organizations. This helps create a user experience that’s easier to understand, and builds trust across the Facebook app and Meta’s many products.

When we published, another content designer called this “hands-down the best launch of the year!” The content standard is now live in Meta’s wiki, and lives on today.