Blizzard relies on a variety of internal tools to ensure smooth daily operations. While some of these tools were designed years ago, new ones are still being developed.
Building new tools from scratch can be time-consuming. To address this challenge, our design team created a foundational atomic system, which we named "Mosaic."
Scope: Competitive Analyses, System Audits, UI Designs, Component Design
Time: Ongoing project
Brainstorm/planning: Miro, Jira, Google Sheets
Design: Figma
Testing/insights: Maze, Dovetail
Collaboration: Zoom, Slack
I collaborated with a UX designer, a visual designer, and a team of developers to build and deliver a base design system from scratch.
My responsibilities included designing components in various states, auditing existing systems, conducting competitive analyses, and providing detailed documentation for components. Additionally, I worked closely with developers to ensure a consistent and accurate handoff from Figma to Storybook.
We developed "Mosaic," a foundational atomic system of styles and components powering the creation of numerous internal tools.
Mosaic accelerates tool creation with reusable components, streamlining design with quick prototyping and theming.
Components are refined through designer-developer collaboration, contributing to quality checks and high standards.
Initially used by designers and developers in my department, but interest grew across teams, leading to a public Slack channel to share its benefits.
Many internal tools were designed years ago, while new ones are developed to support growing teams and streamline workflows.
For instance, this year saw numerous updates to sites managing employee rewards and the main support site, along with the creation of new tools like the employee crediting tool.
With numerous internal tools featuring different themes, managing multiple design systems became a challenge. These systems varied widely in layout, states, and structure.
Audits revealed significant inconsistencies in structure, variety, and implementation. Some platforms lacked a design system entirely, making it difficult and time-consuming to design new features.
Our goal is to create a scalable base design system that serves as a foundation for future applications while supporting different themes, eliminating the need to manage multiple design systems.
Design systems are just as crucial for developers as they are for designers. It's important to understand developers' needs as well.
I worked closely with our development team to learn how components are implemented, what details are required, and whether there are existing structures, like Tailwind CSS, that we can leverage.
Our Mosaic design system follows an atomic structure, starting with atoms as the smallest unit and building hierarchically.
The atomic structure progresses through molecules, organisms, templates, and pages as the largest components.
Atomic Design System diagram pulled from Atomic Design by Brad Frost
Example of atomic structure in Mosaic
Our team identified that styles should precede atoms. We defined colors, typography, grid layout, border radius, and drop shadows to be applied across the rest of the components.
Atoms include input and interaction elements like buttons, tags, and toggles, as well as UI enhancements like progress indicators and more.
For all components, we conducted thorough audits of current usage in Blizzard tools and competitive analyses of other systems to ensure we covered all necessary states and use cases.
The atomic design system allows us to create larger components by utilizing smaller components within.
What's the point of having an extensive design system if we don't know how to use it? For each component, I provided detailed documentation on typical usage guidelines, customizable properties, and various states.
The goal of Mosaic is not to enforce a consistent look and feel across all applications, but to provide base customizable properties that can be styled according to each platform's design. By using Figma variables, we can easily switch themes.
See how we customized the same component for multiple platforms with different branding.
We're never truly done with the design system. As designers, we continuously identify new components to add as we encounter more use cases. We also iterate on existing components as we discover new use cases or opportunities for improvement.
For example, while working on the Blizzard Crediting Dashboard, I identified that the timeline component could be added to the design system!
With a base design system, designers and developers can quickly build and maintain tools using preexisting components. Mosaic was used to create Blizzard's crediting tool, where we rapidly assembled low-fidelity frames and added new theming with ease. Tools no longer have to be built from scratch!
Each component is refined through detailed discussions between developers and designers. As designers expand the system, developers contribute as well. Quality checks maintain the standard of each component, and involving engineers in design discussions enhances the final product.
Mosaic's primary users were designers and developers in my department. Interest grew across additional teams, leading to the creation of a public Slack channel to share what Mosaic has to offer.