Industry
Fintech
Company
Get Orbital
Role
Product Designer (Sole Designer)
Product Designer (Sole Designer)
Status
Shipped
Design System Governance
Design System Governance
Design System Governance
Reducing cross-team implementation friction through Design System governance.
Project Overview
Project Overview
Introduced a governance framework to standardise a fragmented design system and reduce implementation inconsistency
Introduced a governance framework to standardise a fragmented design system and reduce implementation inconsistency
Problem
Problem
The design system lacked shared implementation standards, creating inconsistency across products and increasing reliance on design teams for implementation decisions.
The design system lacked shared implementation standards, creating inconsistency across products and increasing reliance on design teams for implementation decisions.
The design system lacked shared implementation standards, creating inconsistency across products and increasing reliance on design teams
for implementation decisions.
System Structure & Governance
System Structure & Governance
Created shared foundations, reusable components, and clear implementation standards to reduce cross-team inconsistency.
• Foundations — tokens, grids, base styles
Components — reusable UI patterns
Governance — usage rules and standards
Created shared foundations, reusable components, and clear implementation standards to reduce cross-team inconsistency.
Foundations — tokens, grids, base styles
Components — reusable UI patterns
Governance — usage rules and standards
Created shared foundations, reusable components, and clear implementation standards to reduce cross-team inconsistency.
• Foundations — tokens, grids, base styles
Components — reusable UI patterns
Governance — usage rules and standards
Component Governance Model
Component Governance Model
Introducing systematic governance across our Client Portal platform.
Introducing systematic governance across our Client Portal platform.
From Component Library to Governance Framework
From Component Library to Governance Framework
Before
A visual design library without documented usage standards.
After
A structured governance system defining semantic intent, accessibility compliance, and implementation logic.
Before
A visual design library without documented usage standards.
After
A structured governance system defining semantic intent, accessibility compliance, and implementation logic.
Before
A visual design library without documented usage standards.
After
A structured governance system defining semantic intent, accessibility compliance, and implementation logic.
Establishing Governance Foundations
Establishing Governance Foundations
Semantic Colour Governance
Semantic Colour Governance
Semantic colour was redefined based on intent (Primary, Success, Warning, Error) and validated to WCAG AA, replacing decorative usage with enforced meaning.
Semantic colour was redefined based on intent (Primary, Success, Warning, Error) and validated to WCAG AA, replacing decorative usage with enforced meaning.
Semantic colour was redefined based on intent (Primary, Success, Warning, Error) and validated to WCAG AA, replacing decorative usage with enforced meaning.
Colour governance introduced semantic intent and accessibility validation beyond the original palette structure.
Component Governance — Banner System
Component Governance — Banner System
Banner variants existed but lacked defined semantic rules.
I defined severity, interaction behaviour, and placement to ensure consistent signalling across features.
Banner variants existed but lacked defined semantic rules. I defined severity, interaction behaviour, and placement to ensure consistent signalling across features.
Banners do not have hover or focus states. Only action elements within the banner respond to interaction.
Banners do not have hover or focus states. Only action elements within the banner respond to interaction.
Component Governance — Banner System
Component Governance — Banner System
Banner variants existed but lacked defined semantic rules.
I defined severity, interaction behaviour, and placement to ensure consistent signalling across features.
Banners do not have hover or focus states. Only action elements within the banner respond to interaction.
Impact
Transformed the system into an enforceable internal standard, reducing UI inconsitencies and enabling faster, more concistent implementation.
Adopted as a shared reference across product, engineering and operations teams, enabling more consistent decision-making without ongoing design input.
Transformed the system into an enforceable internal standard, reducing UI inconsitencies and enabling faster, more concistent implementation.
Adopted as a shared reference across product, engineering and operations teams, enabling more consistent decision-making without ongoing design input.