From a design language to shared infrastructure

The idea of creating a design language tailored for Shanghai Disney Resort existed before I joined. But at the time, most of the conversations centered around visual and brand identity. We knew we needed something of our own; we didn't yet know what that system should become.

Looking back, Mulan evolved through three distinct stages—from a set of design principles into an operationalized, production-ready system shared by design and engineering.

Stage 1 — Establishing our design language

We started by defining what Shanghai Disney Resort should feel like digitally.

I led the team through moodboarding, competitive analysis, and exploration of the foundations of our design language: brand ethos, tone of voice, visual metaphors, typography, color, iconography, and motion.

At the time, our primary design tool was Sketch. Mulan existed as a set of guidelines and source files, but individual designers still worked independently. Consistency depended largely on each designer knowing the system and applying it correctly.

From the beginning, though, we didn't want Mulan to live only within the design team.

We regularly shared our progress with engineering partners and leadership—not only showing what we were designing, but continually reinforcing why we were building it: to create a more cohesive experience for our guests while making the product development process more efficient.

That alignment gave us the leadership support to keep investing in Mulan and take it beyond a visual language.

Stage 2 — Making the system reusable

Our transition from Sketch to Figma became the next turning point.

It wasn't simply a change of tools. Figma changed how our designers could work together.

As we moved new projects into Figma, we simultaneously turned Mulan into a shared component library. Instead of recreating common patterns or relying on individual designers to interpret the guidelines, designers could now build experiences using the same components.

For the first time, Mulan wasn't something designers had to remember to follow. It was embedded into how they worked.

Design became faster and more consistent.

But that exposed our next bottleneck.

While designers were reusing components, engineering teams were still implementing each project independently. Two buttons might look identical in Figma, yet developers could still be coding them separately for different products.

That meant duplicated engineering effort—and duplicated work for design. My team still had to review the same UI patterns repeatedly to make sure each implementation matched the intended experience.

We had created reuse on the design side, but not yet across the product development lifecycle.

Stage 3 — Building one system for design and engineering

Once we aligned with engineering on the opportunity, we deliberately started small.

Rather than trying to implement Mulan across every platform at once, we chose the website as our first testing ground. We were already in the middle of a major website revamp, with more web projects on the roadmap, making it the right place to prove the value of a shared system.

We formed a small working group—one designer and three developers—and met every two weeks while continuing to build the system alongside active product work.

This changed the relationship between design and engineering.

Instead of designers defining a system and handing it over for developers to implement, we built it together. Design might come to the table with a definition such as Primary Blue — #0072CE or Black 500, while engineering would challenge whether the naming and structure would make sense in code and scale over time.

Those conversations mattered.

The bi-weekly working sessions became a place where design intent met engineering reality. We weren't simply translating Figma values into code; we were creating a shared language that both sides understood and could maintain.

And because Mulan was being built alongside a real product, every new component or decision could immediately be tested against an actual use case.

Mulan was no longer something engineering implemented from design.

It was something design and engineering built together.