Building a scalable Design System

Role: Senior Product Design Manager, MessageGears

Timeline: January 2023 - July 2023

Focus areas: Design systems, content design, team growth

Background

In December 2022, Swrve was acquired by MessageGears, a warehouse-native segmentation and customer engagement platform, serving enterprise clients like Expedia, The Home Depot, and GoDaddy. Following the acquisition, our design team faced new challenges: we became responsible for supporting two platforms, three additional product managers, and four engineering teams. MessageGears aimed to integrate Swrve's mobile capabilities to position itself as a true cross-channel marketing platform, able to compete with industry leaders.

The Problem

To meet the demands of supporting an expanded platform, our design team needed to adapt. While we added one designer to bring our team to four (one UX designer, two senior product designers, and one content designer), the following challenges required immediate attention:

UI modernization: MessageGears' platform required a modernized interface to stay competitive. Leadership planned to use Swrve's styles and React component library as the foundation for a full UI refresh.
Usability issues: The platform's complexity created challenges for less technical users, necessitating short-term usability improvements.
Legacy design system limitations: Swrve’s Figma library lacked consistency, making it difficult for designers to use without frequent customization.
Accessibility standards: Several components failed to meet WCAG Level AA accessibility standards, which we needed to address.

To tackle these challenges, it was clear we needed a scalable, efficient design system that enabled our team to produce consistent, accessible designs while meeting tight deadlines.

Goals of the project

To guide our efforts, we outlined the following goals:

Audit the existing Figma component library to identify inconsistencies and gaps.
Define core components required to support both simple and advanced designs.
Research best-in-class design systems to incorporate proven patterns and guidelines.
Identify "quick win" usability improvements for the MessageGears platform.
Create a consistent component template, including usage and content guidelines, to streamline development and adoption.

By achieving these goals, we aimed to establish a robust design system that would improve our team’s efficiency, ensure consistency, and enhance platform usability.

Getting started

To balance this initiative with ongoing commitments, I broke the project into manageable tasks:

Documentation and planning: I worked with our content designer to document the project plan and research exemplary design systems, pulling patterns and guidelines into a shared Miro board.
Audit and core components: Our product designers conducted an audit of the existing design system, identifying essential components and their variations.
Collaboration: Together, we prioritized a list of components and began outlining how to streamline their design and functionality.

Building the design system

I facilitated a team workshop to develop a reusable component template. Using the button component as our pilot, we:

Identified variations and use cases for buttons.
Tested and refined colour options to meet accessibility standards.
Documented usage guidelines, interaction states, and content principles.
Created detailed component breakdowns to streamline handoff to engineers.

Once the template was finalized, the team divided tasks: designers built components while the content designer and I completed usage guidelines and created universal content principles to ensure consistency. Over six months, we completed the core component library and documented about 50% of the system.

The image displays numerous examples of different button and icon styles that we were using in the Swrve platform.

The audit of our button component compared with the updated streamlined button component, complete with usage guidelines

Applying the design system to improve UX

To demonstrate the impact of our design system, we focused on three usability pain points in the MessageGears platform:

Navigation: We proposed improvements to simplify access to key features.
Campaign workflow: We redesigned the marketing campaign flow for clarity and ease of use.
List pages: Designers quickly delivered designs for 10 list pages as part of the React migration project.

The React migration project was an opportunity to test and refine our new components. The consistent patterns and accessibility improvements enabled us to modernize the UI efficiently and deliver within tight deadlines.

The old JSP version of MessageGears' marketing campaign workflow

The React redesign of MessageGears' marketing campaign workflow, using our new design system components and guidelines

Outcomes

Efficiency gains: The new design system enabled faster delivery of designs, supporting additional product and engineering teams without overburdening designers.
Improved usability: Usability recommendations and updated designs led to significant improvements in the platform’s user experience.
Accessibility compliance: All components met WCAG Level AA standards, broadening platform accessibility.
Streamlined collaboration: The design system reduced friction between design and engineering teams, ensuring smoother handoffs.
Modernized UI: The refreshed look and feel aligned MessageGears with competitors, contributing to a stronger market position.

Reflections

This project highlighted the transformative power of design systems in driving efficiency, consistency, and accessibility. By including content design guidelines in each component, we empowered designers to create UX copy independently, reducing the burden on our content designer. It was rewarding to see the impact of our efforts not just on the design team but across the organization, and I’m proud of what we accomplished during this pivotal time of change

Building a scalable Design System

Background

The Problem

Goals of the project

Getting started

To balance this initiative with ongoing commitments, I broke the project into manageable tasks:

Documentation and planning: I worked with our content designer to document the project plan and research exemplary design systems, pulling patterns and guidelines into a shared Miro board.

Audit and core components: Our product designers conducted an audit of the existing design system, identifying essential components and their variations.

Collaboration: Together, we prioritized a list of components and began outlining how to streamline their design and functionality.

Building the design system

I facilitated a team workshop to develop a reusable component template. Using the button component as our pilot, we:

Identified variations and use cases for buttons.

Tested and refined colour options to meet accessibility standards.

Documented usage guidelines, interaction states, and content principles.

Created detailed component breakdowns to streamline handoff to engineers.

Applying the design system to improve UX

To demonstrate the impact of our design system, we focused on three usability pain points in the MessageGears platform:

Navigation: We proposed improvements to simplify access to key features.

Campaign workflow: We redesigned the marketing campaign flow for clarity and ease of use.

List pages: Designers quickly delivered designs for 10 list pages as part of the React migration project.

The React migration project was an opportunity to test and refine our new components. The consistent patterns and accessibility improvements enabled us to modernize the UI efficiently and deliver within tight deadlines.

Outcomes

Efficiency gains: The new design system enabled faster delivery of designs, supporting additional product and engineering teams without overburdening designers.

Improved usability: Usability recommendations and updated designs led to significant improvements in the platform’s user experience.

Accessibility compliance: All components met WCAG Level AA standards, broadening platform accessibility.

Streamlined collaboration: The design system reduced friction between design and engineering teams, ensuring smoother handoffs.

Modernized UI: The refreshed look and feel aligned MessageGears with competitors, contributing to a stronger market position.

Reflections