Architecting a comprehensive Design System rebuild, focusing on scalability and accessibility foundations.
Role: Product Designer (Design Systems) · Scope: Foundations + Core Components · Tools: Figma · Storybook
Context
Payoneer’s design system had grown over time and passed through many hands. Components were built inconsistently, with missing states, duplicated patterns, and no token based foundation making it hard to scale and maintain.
Key challenges
Inconsistent component structures → duplication and slow iteration
Missing states and accessibility gaps across core patterns
No tokens or variables → manual, fragile updates
No clear workflow for requests, review, and release
Approach
Audit & structure
Reviewed the existing library, mapped duplicates, and defined a consistent component architecture.
Rebuild the foundations
Introduced tokens and variables for color, typography, spacing, and states, built with accessibility in mind.
Scale through process
Established a clear workflow for requests, review, documentation, publishing, and developer handoff across design teams.
What we built
A refreshed system of foundations, components, and workflows, designed for scale, consistency, and accessibility.
Foundations
Tokens-first foundations for color, type, spacing, and states.
Core components
A rebuilt component library with consistent structure and full state coverage.
Design-to-code alignment
Aligned Figma and Storybook through gap mapping, edge cases, and a clear release workflow.
Key decisions
Tokens-first foundation. Built the system on tokens and variables to enable scalable, consistent updates.
One structure for every component. Standardized component architecture, naming, and states to reduce duplication and speed up iteration.
A workflow that scales with teams. Introduced a clear request → build → review → publish process to keep design and development aligned through documentation and Storybook
Impact
Consistency. Reduced duplicated and mismatched components across the library.
Speed. Enabled faster iteration through reusable, documented patterns.
Sustainability. Established a workflow that kept Figma and Storybook aligned over time.
This created a stable foundation for product teams to ship faster with fewer UI regressions.
More projects
