WP Statistics-Design System

Overview

As part of my role at Veronalabs, I led the design system initiative for WP Statistics, a popular WordPress plugin with over 600,000 million downloads. The plugin required a cohesive and scalable design system to improve usability and maintain a consistent user experience across multiple features and touchpoints. I built a design system, including developing components, patterns, and documentation. I worked closely with the product manager, engineers, and users to ensure the design system met the diverse needs of the platform.

The design system development followed a structured framework. I began by thoroughly researching current practices and conducting one-on-one interviews with product teams to identify the core issues. After gaining a clear understanding, I mapped out a detailed execution plan, including timelines for each component stage. Components—starting from foundational, then atomic and molecular—were introduced gradually, while the team encouraged continuous feedback to allow for quick adjustments and enhancements.

Discover

In the discovery phase, my goal was to identify the specific challenges the design team faced with WP Statistics, as well as their needs and pain points with the current practices. To achieve this, I conducted interviews with the team, gathering valuable insights from designers, the Product Manager, and front-end developers.

The design system is messy and has outdated components, making it hard to find what I need.

Product Designer

One challenge we face is ensuring that updates to the design system don’t disrupt the product roadmap or delay feature releases, particularly when integrating new features.

Product Manager

I often recreate components because the system doesn’t address all the needs for data visualizations.

Product Designer

We need more flexibility in the design system to support new analytics features, but the process of updating and accommodating these changes is often slow and cumbersome.

Product Manager

There’s a lack of guidance for making analytics dashboards responsive, increasing development time.

Front-end Developer

Component states and interactions aren’t always clearly defined, leading to inconsistent behavior across the app.

Front-end Developer

There’s not enough guidance on styling charts and graphs consistently.

Product Designer

Our Challenges

At the same time, by conducting in-depth research of the current brand guidelines and design documents, I developed a clearer understanding of the challenges the team was facing.

Overlapping Libraries: The presence of multiple design libraries caused uncertainty for designers, making it hard to determine which components were appropriate for use.
Disorganized Structure: The design system lacked proper organization, making it difficult for designers to quickly locate specific components.
Unclear Interaction Guidelines: Design and development struggled to stay aligned due to insufficient documentation outlining how components should behave across different states and interactions.

Past design elements and assets

Brand style guide

Problems to Address

Presenting the findings in the form of HMW questions to guide our problem-solving process.

Streamline the design library

to simplify navigation and help designers quickly identify the correct components.

Add dynamic interactions

to provide a more accurate simulation of product behavior during early testing phases.

Build responsive framework

that ensures seamless component performance across all device types and screen sizes.

Streamline handoff processes

to eliminate any ambiguity and ensure smooth implementation by developers.

Component Customization

In Figma, designers can now make adjustments to components with ease and clarity.
The variant panel allows swift access to multiple options, making it simple to adjust text and boolean properties. This central feature enhances the management of component variations in one organized, intuitive space.

Responsive Design

With a well-structured auto-layout system in place, the components in this design system adapt smoothly to different screen sizes. Whether it's mobile (375px), tablet (768px), and desktop (1440px), designers can easily implement these components to build user interfaces for any device or resolution.

Interactive Components

Creating interactive elements within the design system is crucial for showcasing realistic functionality to stakeholders. By integrating detailed micro-interactions, prototypes become more dynamic, helping stakeholders better understand the design and its flow.

A key highlight of my design system is that all components include fully interactive states, seamlessly embedded within the prototype. This setup ensures that when designers use these components, the interactions are automatically applied, making the prototypes more lifelike and visually engaging.

Accessibility

Accessibility is central to our development process. We design components to comply with WCAG 2 (Web Content Accessibility Guidelines), ensuring they are fully accessible before launch. We conduct thorough assessments of color contrast, screen reader compatibility, keyboard navigation, focus visibility, and readability to support accessibility effectively.

Readability & Color Contarst

I tested the color contrast and readability of all typography and UI elements, using the Stark plugin in Figma. This ensured that all components in the design system met WCAG 2.1 standards, providing an accessible experience for all users.

Keyboard Accessible and Focus Visible

All interactive elements, including buttons, are fully keyboard accessible, allowing users to navigate the interface without a mouse. I also designed visual indicators for the focus state to make it easy for users to identify where they are on the page.

Distinguishable Input States

All text boxes have visually distinct states (default, focus, error, etc.) and included clear supporting text for guidance. This helps users easily identify the current state of the field and understand input requirements.

Our methodology

We used Atomic Design methodology which allowed a more critical approach to the UX design process and let us look at each component on its own and as a part of a larger whole. This methodology is made of five stages including Atoms, Molecules, Organisms, Templates, Pages that work together to create interface design systems in a more hierarchical manner.
Some of the activities at this stage involved:

‍Researching other design systems and interfaces for components common practices and inspiration.
‍Analyzing the instances and use cases captured during the audit and ideating on the solutions that serve our goals best.
Unifying: we merged different variations of components to leave only the essentials.

Design Token

To create a scalable and consistent visual system for our design system, I collaborated with the product team to introduce design tokens
‍When naming tokens, it's essential to prioritize their purpose over their specific value. Our tokens are classified into three categories: Name Space, Object, and Modifier. Each of these sections is further subdivided to provide detailed token names.In the 'Name Space' category, we encompass system, concept, and property. The 'Object' category includes component, group, and element. Lastly, 'modifier' covers variant, value, and state. This structured framework enables us to reliably and efficiently name tokens across our entire product ecosystem.

Token Naming

Once we began the journey of naming tokens, we focused on their functional roles rather than assigning them specific values. For instance, rather than using "wp-color-bg-button-white-default" for a button's background color, we chose a more adaptable structure: "wp-color-bg-button-primary-default." This approach ensures consistency across various themes.

To enhance clarity and organization, we categorized our tokens into three distinct types: Global, Alias, and Component-specific.

Global Tokens

We began by creating global tokens to define all fundamental values, including colors, typography, and spacing. These tokens form the essential building blocks of our token system.
To enhance clarity and organization, we categorized our tokens into three distinct types: Global, Alias, and Component-specific.

Alias Tokens

Alias tokens are employed to denote specific contexts, such as default, hover, or focus states. They are invaluable for clarifying and communicating the intended purpose of a token in various scenarios.

Component Tokens

The final type of token is the component token, which represents the values associated with a particular component. For instance, they might specify the background color of a button or the elevation level of a modal. By being extremely precise, these tokens allow for independent adjustments; if the same color is used across two components, one can be modified without affecting the other.