Global Design SystemComputershare | Mahesh Malekar

EnterpriseComputershare

Semantic tokens, pattern library, and structured developer handoff — design at global scale.

Client

Computershare

Role

Sr. UI/UX Lead

Period

Apr 2024 – Aug 2024

Overview

Computershare operates financial services products across 20+ markets. I was brought in to build a scalable global design system — establishing semantic design tokens, a documented component library, and a structured developer handoff process that could serve multiple product teams simultaneously.

The challenge

Product teams across different markets were building inconsistently — duplicated components, conflicting colour values, and no shared documentation. The result was visual fragmentation, slow development cycles, and expensive rework.

My role

Led the design system build from token architecture through to Zeroheight documentation. Conducted colour audits across existing products, defined the semantic token structure, and established the developer handoff process.

Process

1

Audit

Audited 5 existing product UIs. Catalogued 200+ unique colour values, 40+ type styles, and 80+ component variants — identifying consolidation opportunities.

2

Token Architecture

Defined a 3-tier semantic token system: global → alias → component. Mapped all colour, typography, spacing, and elevation values.

3

Component Library

Built 60+ components in Figma with full variant coverage. Each component documented with usage guidelines, do/don't examples, and accessibility notes.

4

Documentation

Published the full design system on Zeroheight. Structured for both designers (usage guidance) and developers (token values, code snippets).

5

Handoff

Ran handoff workshops with 3 engineering teams. Established a contribution model so teams could propose new components through a governed review process.

Outcomes & impact

60+

Components documented and shipped

200+

Colour values consolidated into a semantic token system

Faster UI development reported by engineering teams

Deliverables

Design Token ArchitectureComponent Library (60+ components)Zeroheight DocumentationColour Audit ReportDeveloper Handoff WorkshopsContribution Model

Tools

FigmaZeroheightFigJamMiro

Next case study

Patient Platform — Elevance Health