Quantcast Design System
Design System, Rebrand, Accessibility, Data Visualization
Built a new design system, incorporating new branding and elevating design maturity. This flexible foundation supported faster iterations and a more consistent UX across the platform.
My Role
Design System
Project Management
Team
1 Product Designer (me)
1 Marketing Designer
6 Engineers
Duration
3 months
Problem
Incorporating the new branding and elevating design system's maturity
In 2024, Quantcast rebranded its visual identity. As a result, the product needed a fresh design system to match. I also used this opportunity to make improvements to the design system, addressing existing pain points and laying a strong foundation for the future.
Research
Exploration and initial alignment
Without focusing too much on consistency, I quickly applied the new branding to the product and created several rough concepts. I presented these concepts to the PMs and marketing designer for initial alignment. This helped us identified design elements that looked shiny on the marketing site, but didn’t translate well to the product.
Pain points of the existing system
I conducted an audit of the existing design system and interviewed engineers to understand the pain points.
Benchmarking research
I then researched several open-source design systems, focusing on products with complex interfaces. This helped me uncover the gaps between mature design systems and our own.
Opportunity
Style guide
Based on these insights, I drafted a more thorough style guide for the new design system. This new style guide included areas that were completely missing in the past, such as accessibility and data formats, while also adding improvements to existing styles, for example, adding more guidance on font and color usage.
Design
Semantic typography
I started with the most fundamental element of a design system: fonts. A pain point in the old typography was its naming conventions. Fonts were labeled by size, such as ‘12px,’ ‘14px,’ and ‘16px,’ which had no context around their intended usage. In the new design system, I adopted a semantic approach, naming typography based on its role rather than its size.
Tabular numbers
After diving into the new font, I realized that it didn't have tabular numbers, which were crucial for our data tables. However, switching the font wasn’t an option. After research, I used an OpenType CSS property to convert numbers to tabular.
Color tokens
Next, I shifted focus to updating the color palette. Drawing inspiration from my research, I decided to experiment with using variables. I first created a primitive collection—a set of hex codes for all colors. These variables served as the foundation but would not be used directly in components or pages. I then created a semantic collection, which mapped colors to their specific roles—such as text, surface, icon, and border. The same color used in different roles would be stored as different semantic variables.
Data visualization
Next, I focused on data visualization. While our product had many charts, the old design system didn't provide any guideline, which led to inconsistent use of colors, shapes, and styles. I created guidelines and redesign all the charts with a cohesive style.
I documented guidelines for the sizes, shapes, legends, and other visual details to ensure consistency and clarity. I also created three color palettes: single-color palette, categorical palette, and the sequential and diverging palette. These guidelines provide a solid foundation, and helped me redesigned all the charts to make them more consistent and polished.
Components
With most of the style guides in place, I began redesigning the components. In creating these components, I focused on maintaining visual consistency across not just the default state, but also interactive states
Outcome
400+
components and variants redesigned
10x
faster execution of system-wide design changes
30%
leaner component library