Designing and scaling a cross-product design system for 4 billion users.

Designing and scaling a cross-product design system for 4 billion users.

✽

TL;DR

✽

Enter Password

✽

My Impact

✽

Design

✽

Kind words

✽

Next

TL;DR

At Meta's global cross-product design system (XMDS) team, I drove design improvements to increase consistency & efficiency for 100+ Meta-owned apps, used by 4 billion users.

At Meta's global cross-product design system (XMDS) team, I drove 25+ design updates to improve visual & interaction patterns, increase consistency & efficiency for Meta-owned apps.

At Meta's global cross-product design system (XMDS) team, I drove design improvements for visual identity & interaction patterns, increasing consistency & efficiency for 100+ Meta-owned apps.

Timeline

10 weeks
June - Sept. 2025

10 weeks
Summer 2025

Approved, in experiment

In experiment

Skills

Visual design
System thinking
Interaction design
Eng handoff

Team

3 Designers
2 PM
3 Engineers
1 Data scientist
5+ Partner teams

Managers

Bethany Fong
Stephen Barros

100+

Meta-owned apps

4B+

daily active users

25+

design updates

10+

core flows

100+

Meta-owned apps

4B+

users daily

25+

design updates

10+

core flows

This case study is password protected.

Curious? Feel free to email me!

enter password

My Impact At A Glance

Design and scalable updates in collaboration with XFN and partner teams, my work focused on 4 aspects:

Design Across Scale

Proposing and scalling key design updates across 50+system components, to be used across 100+ apps. Balancing functinality and expression.

Improving Product Performance

Collaborating with partner teams, I helped improving product metrics for 5 core flows from a design system perspective, impacting 25+ partner teams.

Bridging Gaps Between Design & Eng.

Publishing extensive component specs and guidelines across Meta's internal system, bridging gaps between XFN, improve efficiency in collaboration and implementation.

Validating with Data/Experiment

I led the first experiment planing across design, engineering and DS team. Preparing a thorough plan with 5 design varients, to valdiate design impact on high-traffic flows.

Scaling and improving core components across mobile & desktop and light & dark themes.

Capturing more than 20+ engineering and design gaps with extensive spec & guidelines, published internally at Meta.

Why design?

In 2024, the Facebook company was rebranded to Meta.

In 2024, the Facebook company was rebranded to Meta.

however...

however

its design system fails to consistently represent of the new identity, lacks hierarchy & flexibility, creating frictions for key flows.

its design system fails to consistently represent of the new identity, lacks hierarchy & flexibility, creating frictions for key flows.

Swipe to see pain points from different flows and partner teams.

Design Solution

Proposing a global new focus state with "Meta Blue", from core components such as Input to 50+ related system-wide components.

Starting from Input components, I proposed and scaled a global focus state that aligns closely with Meta's brand identity with a better call-to-action and accessibility.

Stress testing across all use cases, refine edge cases to ensure system harmony.

Stress testing design in 30+ use cases to ensure components function harmoniously in a system, with edge cases captured and refined.

Product Impact

Improving completion rate for all Meta app's New User Registration (~40M MAU) with new focus state.

~5%

~5%

anticipated increase in conversion rate

anticipated increase in conversion rate

~10%

expected increase in completion steps

expected increase in completion steps

~8%

~8%

expected increase in user registration

expected increase in user registration

Kind Words

Meta taught me to design, to think, and to scale the smallest pixel with the greatest care. The people I met there continue to inspire me everyday, and here's what they said about me!

"

There is so much that we can learn from you as much as I hope you have learned while being here! Thanks for being a prototyping and design system superhero. It was so inspiring to witness.

David Hong

Senior Product Designer

Thanks for leading a thorough preparation and dedication that passed both the data and design reviews with ease! Sincere thank you for your outstanding work!

"

Qiao Lin

Data Scientist

"

You've contributed such high-quality design work in such a brief time! It's inspiring how quickly you ramped up to the team and the passion you had for systems thinking!

Eric Morgran

Product Manager

Jen, talking and brainstorming about components with you made me feel so alive and exited. You brought so much energy into this team and I'm forever thankful for it.

"

Manveer Chaihal

Product Manager

Learnings

Balancing expression and functionality.

Every component must carry the brand's visual language while remaining functionally reliable for multiple product needs, it's a constant balance between consistency or brand distinctiveness.

Design, think and research across scale.

Working on a design system means thinking at every level simultaneously - from the smallest icon pixel to cross-product ecosystems. This taught me to zoom in and out constantly, stress-testing choices at both extremes.

Ambiguity = Opportunities

My internship began without a clearly defined project scope - and I came to see that ambiguity as a gift. Rather than waiting for direction, I took ownership: conducting research, identifying gaps, and proposing a path forward.