Atomic Design Systems for Blizzard

Developing new tools or adding upgrades can be time-consuming without streamlined systems in place. A scalable design system helps save time and reduces effort by providing reusable components for fast ideation and polished final designs.

The Mosaic Design System is a central resource for designing corporate applications. It serves as a template that custom development apps can use, enabling developers and designers to easily create and modify components across different products. This design system is comprehensive, ensuring that it can support both current and future corporate application platforms.

Why this project stands out to me:

This project holds significance because it was my initiative to implement the atomic design system and employ the double diamond design approach, which the team had never used before. I closely collaborated with managers and leadership to develop a strategic approach for the project. I not only served as a designer but also took on the role of design system owner. I led the project from its inception to the final implementation of components and the launch of a new product. Additionally, I utilized components to enhance existing features in some current products.

Project Goal

The goal is not to make all internal tools identical in appearance and functionality. Instead, the aim is to develop a scalable design system that provides a solid foundation for future applications, supports various themes, and eliminates the need to maintain multiple design systems.

Project duration:

It took six months to move from the initial idea to the implementation of the Storybook. And it took another 6 months to launch the new product using the components from the system.

My Role

Visual designer, the design library owner

My responsibility includes:

As a design library owner, I was responsible for a wide range of tasks that helped to ensure the success of our project. These included creating a roadmap to guide our efforts, auditing existing libraries to identify areas for improvement, conducting competitive analysis to stay up-to-date with industry trends, and prioritizing components based on their importance to the project.

I also worked closely with my team, assigning Jira tickets to two associate designers and leading regular Design System Office Hours to discuss progress and identify any issues.

In addition, I played a key role in reviewing and approving components to ensure that they met our high standards, and I collaborated with developers to ensure that components were implemented correctly. Overall, my responsibilities were diverse and required strong organizational skills, attention to detail, and the ability to juggle multiple priorities at once.

The Process:

• Discovery and audit

I assessed the current state of the project and identified areas that needed improvement. I also held meetings with the product design team and developers to discuss the roadmap and abstract workflow.

• Documenting Structure and Workflow

I developed and documented the design language, which included style guides, pattern libraries, typography, colors, iconography, grids, spacing, components, and templates.

• Build

I structured the atomic components into smart libraries in Figma. Organized project structure in Figma, including naming convention, thumbnail templates, and others. I also determined where different internal products could use the same styles.

• Implement

I implemented the new system across the design teams, development environments, and PMs teams.

1. Discovery

I explored the current design workflow, audited design libraries, and evaluated the component structure. I identified pain points, gaps, and inconsistencies within the design team.

Based on the information gathered, I created a roadmap, collaboration workflow, Jira ticket structure, and component tracking sheet. I also established bi-weekly Design System office hours for ongoing communication and support.

Roadmap

Workflow, Jira Ticket Structure, and Component creation Design Process

Component Tracking and prioritization

2. Build

Since the overall project structure was disorganized, I wanted to tidy it up before moving on to the libraries within the system. Here are the improvements I made:

• Consistent project thumbnails
• Added projects description
• Projects structured by numbers
• Grouping ABK artwork by Franchise
• Applied naming convention
• Applied atomic design structure methodology in Figma

3. Documenting Structure and Workflow

• Collaborated with brand and product teams to ensure a unified identity across all platforms.
• Documented and shared identity guidelines.
• Conducted instructional sessions on correctly implementing the new structure, adhering to naming conventions, updating components, and following workflow procedures.

How atomic design methodology works

The atomic design includes five distinct stages. Working through the method is not a linear process, but it’s helpful to understand each individual component and how they can work together. (Read more)

Atomic Design System Methodology

Mosaic Design System Using Atomic Methodology

Atomically built components were structured into smart libraries in Figma.
The same structure is used for Storybook implementation.

Figma and Storybook Atomic Design System Structure

4. Implementation

During the implementation stage, two associate designers were tasked with crafting components in line with the new structure and guidelines. They ensured that all components were implemented for both dark and light modes. The atomic structure was made accessible to all designers, allowing for easy switching between libraries.

Double Diamond Design Process

The implementation process followed a structured approach, tracking component creation in a Double Diamond structure, consisting of discover, define, develop, and deliver stages. Each step was organized to align with two-week sprints.

The creation of new components began with research and auditing, followed by weekly design critiques. Collaboration with developers during office hours ensured their awareness and ability to implement the components. Any necessary changes were made, and tickets were reassigned to the developers’ department.

Throughout development, there were instances where developers returned components to designers for adjustments or additional features, as needed.

The Mosaic Design System and its implementation created a foundation and workflow ready for unification across the entire product design team:

1. The project established a unified foundation and workflow for the entire product design team.
2. It introduced an effective method for communicating the design language across all team members.
3. This resulted in increased efficiency and reduced onboarding time for new designers.
4. A unique structure was created for designers and developers to collaborate using a common language.
5. Biweekly office hours were implemented to keep everyone updated and track component progress.
6. The team stays synced with the latest pattern libraries in Figma.
7. The new component library provides a solid foundation for current and future products, brand consistency, and team growth.

Key takeaways (advice for myself and my future design systems)

1. A Design System comprises a style guide, a library of design elements, and documentation.
2. Begin by listing all elements needed for the design system.
3. Prioritize elements based on usage and assign them to the first sprint.
4. Start with the visual language: colors, typography, and grid.
5. Ensure graphics and documentation are accessible to all team members.
6. Designate a single person as the master library file updater (design library owner).
7. Other team members can contribute but must coordinate with the library owner.
8. Team members should communicate needs and issues regarding the components library to the library owner.
9. Store the master library file on Google Drive and link it to Figma.
10. Make backups and track file versions.
11. Use a sheet, Jira, or other tracking software to monitor progress.
12. Hold daily meetings to update each other on progress, tasks, and potential blockers.
13. Establish a structure for documentation.
14. Maintain a changelog for the master library.
15. Keep stakeholders informed and engaged throughout the project.
16. Create a Slack note with essential information and links for easy reference.

The need for a design system becomes clear as the team grows and starts working on different aspects of the product. A design system is critical for companies with multiple teams and departments working on various initiatives. I am pleased that I was able to enhance my leadership skills by creating a new design system from scratch and managing two other designers throughout the project.

THANK YOU!