Belle Lee - Product Designer

base ui: Building a multi-brand design system

I led the creation of a cohesive design system serving Battle.net and other Blizzard brands, bringing together fragmented guidelines, enhancing components, and driving alignment across six teams

Project

I led the team responsible for developing a multi-brand design system for Battle.net and other Blizzard brands. This work involved unifying multiple digital brand guidelines into a cohesive design system, developing tokens system, conducting comprehensive product audits, refining component designs, and establishing design and communication workflow across 6 different teams.

process

From the inception of the team, I partnered closely with engineering and product leads to build the design system and drive its adoption across teams. I worked with design leads from other groups to spot opportunities for new components and refinements, enhancing the system’s adaptability for various needs. I also supported the rollout of new themes to enable the launch of Blizzard’s latest game websites.

Role

Design lead, Design Systems

Date

2024 - 25

Deliverables

Tokens taxonomy
Design system documentation in:
- StoryBook
- Documentation site
- Figma library with theme switcher

Design Tokens

Base Tokens

The core focus of this project was to create a unified token structure that enabled seamless theme switching across multiple brands. We developed a token taxonomy system and integrated it into all existing components within the legacy library.

What are design tokens

Tokens taxonomy

Component Library

Component library in Figma

We updated all components with token schemes to ensure they reflect every brand style. This was done using Figma Variables and the Tokens Studio plugin.

Theme switcher in Figma & Code

We enabled theme switching in both Storybook and Figma, allowing teams to visualize all components in their brand’s style.

Flexible components

Instead of maintaining numerous similar components designed for specific purposes, we decoupled purpose from layout and introduced a flexible container that remains unopinionated about the component’s use case.

Learn more about component design

Documentation

We utilized Supernova to build a comprehensive documentation, providing detailed information on each component, including anatomy, options, behavior, responsiveness, tokens, and best practices.

Read more about documentation best practices

Implementation

Shared strategy for cohesive design

One of the biggest outcomes of this project was bridging the gaps between teams, enabling discussions around lingering style discrepancies. Each week, a committee of designers from different teams identified inconsistencies and aligned on visual guidelines, while our team facilitated the federated governance model to maintain component design quality.

Read about challenges of a design systems team

Tracking design in JIRA

Trakcing projects became a larger focus when designers are designing for Base UI since it involved multiple people from different teams to coordinate. I developed a workflow and templates to make it easier for designers to track and size their design workflow.

Read about tracking design projects

Next Steps

Now that Base UI is fully built and teams are aligned on its adoption, the focus shifts to onboarding, ongoing education, and measuring success. These steps will help fully integrate the system into workflows, ensure continuous improvement, and track its impact.

Support onboarding for all teams to start using Base UI Figma components
While some designers have started using Base UI, full adoption requires a structured onboarding process to help all teams transition smoothly. Beyond guidelines, tutorials, and live training sessions, we discussed running user studies and usability testing to identify pain points in using the Base UI library.
Continuous education of the intricacies of Base UI
Adoption goes beyond onboarding—it’s about helping teams understand Base UI’s principles, constraints, and best practices. Without this knowledge, designers may modify components incorrectly, and developers may build inconsistent implementations. A key focus will be educating designers on tokens, enabling them to self-serve with existing tokens and create new ones when needed.
Implement ways to measure success & impact
To justify continued investment in Base UI and ensure it’s actually solving problems, it’s essential to track adoption, efficiency gains, and design consistency. Without measurable impact, it’s difficult to know where to improve or advocate for further design system resources. We have planned to work on implementing simple tools to measure the impact on workflow, component usage in code, and design consistency.

Key Takeaways

It was incredibly rewarding to have the opportunity to build a design system for a multi-brand team. This role allowed me to influence a larger organization and position the design system as a key factor in the maturity of the design organization.

Design system is more than a UI kit; it's a behavioral shift.
Designing with a design system fundamentally changes how teams work, collaborate, and think about design and development. Instead of designing UI on an ad hoc basis, tailored only to specific use cases, designers had to shift to a systematic approach—using reusable components and patterns rather than reinventing the wheel.
This shift required teams to embrace constraints as a tool to speed up design and development, rather than seeing them as limitations. While this added complexity, it also encouraged designers to think about components from a holistic perspective. However, this transformation didn’t happen overnight—it took time and many conversations to turn the wheel and drive meaningful change.
Winning hearts before discussing projects
Getting teams to adopt a design system and securing stakeholder buy-in were among the biggest challenges. Many teams were initially reluctant, seeing the system as too restrictive or a disruption to their established workflows.
As a design systems team, it was crucial to approach collaboration with an open mind and curiosity, rather than enforcing the system outright. Simply offering office hours or monthly demos wasn’t enough to drive engagement. Instead, we had to think of adoption as a user experience problem—and treat the design system itself as a product that needed to be designed for its users: the teams.
Prioritizing long-term scalability over quick fixes
With so many tasks and improvements to consider, it was important to focus on strategic fixes that supported long-term scalability. Architecting and implementing design tokens was one example of this approach.
As the design system expanded, scalability had to remain a top priority—ensuring that components and guidelines could evolve without breaking existing implementations. Rather than chasing short-term fixes, we prioritized solutions that would sustain the system as it grew and adapted to future needs.

Unique challenges of organizing a large volume of content
This project provided an excellent opportunity to view content consumption as a user experience challenge and to identify different ways to improve both reading and authoring workflows. Design is just as important as content, which is why it's important to make your blog as user-friendly as possible.
Working better with engineers through rigorous documentation
At the start of the project, the goal was to document the existing blog styling in preparation for the authoring tool migration. This provided me with a solid understanding of both the existing design and the new components we needed to create, down to the smallest details. By creating comprehensive design specifications, I was able to effectively communicate with the engineers and address any questions they had throughout the implementation process. This experience enabled me to create my own techniques for documenting design that improved communication with engineers.

Unique challenges of organizing a large volume of content
This project provided an excellent opportunity to view content consumption as a user experience challenge and to identify different ways to improve both reading and authoring workflows. Design is just as important as content, which is why it's important to make your blog as user-friendly as possible.
Working better with engineers through rigorous documentation
At the start of the project, the goal was to document the existing blog styling in preparation for the authoring tool migration. This provided me with a solid understanding of both the existing design and the new components we needed to create, down to the smallest details. By creating comprehensive design specifications, I was able to effectively communicate with the engineers and address any questions they had throughout the implementation process. This experience enabled me to create my own techniques for documenting design that improved communication with engineers.