Scaling SysAid With A
Multi-Brand Design System
To support SysAid’s ESM strategy and 2026 goals, we restructured the entire design system for multi-brand scalability, improving consistency, speed to market, and design governance.
Challenge
When One Brand Becomes Many, Consistency Breaks
SysAid needed a scalable design system that works across multiple brands and platforms. To reduce inconsistent experiences, and support future growth without duplication.
The design challenges were:
- Manage and lead this project, including sales pitches and establish governance and processes.
- Develop a Figma structure that will be as flexible as possible.
- Force consistency across all teams.
The dev challenges were:
- How to apply multi-branding on legacies.
- Force consistency across all teams.
Glow as a Strategic Growth Engine
Inconsistent UI and experience contributed to lost conversions and ARR losses across competitors and regions. A scalable system would reduce inefficiencies and improve trial outcomes.
Increase Maturity
By assessing design system maturity, we translated design capability into a growth roadmap, showing what the business could support today and what it needed to scale tomorrow.
Research
I analyzed Salesforce, Pendo, Userflow CSATs, and Jira data, and interviewed Product, Sales, CX, and PS teams to quantify how design and experience gaps directly impacted acquisitions, conversion, and business scale.
This is a sample from what I found.
Total ARR loss
by Tier-1 Competitors
BMC
55,471.50
Freshservices
41,435.83
ServiceNow
26,827.64
HaloITSM
63,435.83
Total ARR loss by World Region
North America
96,774.14
UK
90,394.68
Total ARR loss
by Segment
SMB
131,697.32
Enterprise
55,471.50
I also curated some quotes from the secondary research and verified them with the relevant salesperson.
"Bad trial experience."
"Lacks all-in-one solution, friendly UI, and data analytics."
"System was too complex for their requirements after trialing."
Auditing
I ran a Lean UX audit to benchmark our design system maturity against tier-1 competitors. Using three business-critical criteria modernization, clarity, and consistency; I evaluated Jira, Freshservice, HaloITSM, ServiceNow, and SysAid.
The results exposed clear experience gaps impacting competitiveness and perception. The audit scores informed a maturity graph, showing where we stand today and the level required to compete and scale.
Structure That Scales Delivery
Defined cross-functional roles for design, tech review, and coordination to ensure consistency and accountability.
The roles
Design lead and owner (me)
Design reviewers (Me + one designer)
Tech lead and owner (FE architecture)
Code reviewers (Specific devs)
Code Coordinators (Specific devs)
Release manager (Specific dev)
Infrastructure
To create a solid infra, I sat with the FE architect to understand how the stylesheet should look like.
A new Theme (brand) layer was created that changed two of the tokens roles, Brand and General.
The Brand color is what identifies each space, and our General role is the solid gray tone (gray9), with 20% from the solid brand (brand9) to give the product an extra shine.
Accessibility & Scaleability by Design
Expanding into ESM meant raising the bar on accessibility. Using Chromatic, I monitored accessibility violations through a dedicated dashboard and turned insights into action by routing clear Jira tickets to developers; making inclusive design measurable, manageable, and scalable.
Color System Built on Human Perception
We adopted OKLCH colors for scientifically accurate accessibility, reflecting how humans perceive light while improving cross-browser consistency. Since Figma doesn’t support OKLCH yet, I synced Figma variables with documented values in token descriptions and Google Sheets to preserve accuracy and scalability.
Typography Built for Scale & Accessibility
Typography was designed with accessibility and scale in mind. We standardized font sizes, line heights, and spacing using relative units (rem), ensuring readability across devices, languages, and user settings. Thus, making text predictable, flexible, and inclusive by default.
Built to Scale Without Breaking Accessibility
Accessibility was designed to scale. We used REM-based tokens to preserve proportions at any zoom level, defined readable line-height ranges, and built responsive page components with baked-in breakpoints. Chromatic accessibility tests and Jira workflows ensured issues were tracked and resolved at scale.
One System, Multiple Voices
To scale efficiently across teams, we extended the design system to support marketing alongside product. By sharing the same color foundations and expanding typography and spacing through adjusted semantics, both teams worked from one system without compromise.
Product and marketing used different naming conventions mapped to the same tokens, ensuring consistency with flexibility. A dynamic font-family toggle enabled instant brand expression changes while preserving structure, accelerating delivery and strengthening cross-team alignment.
It also helped us connect the marketing and the product together towards the brand, creating a better experience.
Lean Tokens, Maximum Scale
We reduced token bloat by merging shared values and isolating differences, keeping the system efficient and easy to manage as brands expand.
Organized for Every Need
Modular collections (desktop, mobile, icons, layout, tokens, typography, accessibility, marketing) support consistent UX, faster delivery, and cross-team reuse.
Real Business Outcomes from System Scale
Momentum That Glows
Six months in, adoption was immediate, morale soared, and launch celebrations turned the system into a culture-building moment.
From all of my initiatives I have led, this one was the most special to me.
The impact it created on the individual and the motivation to keep pushing Glow, was amazing and immediate.
From the stickers and the slogan of "Let it Glow" and "Glow glow glow" to creating a Gem (in Gemini) that creates a consistent image style that shows everyone with a santa hat.
It was fun, and I'm open to more and more ;)
