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
Establishing a scalable design system to improve consistency, collaboration, and delivery across product and marketing teams.
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.
The design system lacked clear usage standards, leading to inconsistent implementation across teams.
This project focused on introducing governance to ensure design decisions translated consistently into product behaviour at scale.
Problem
Problem
The design system lacked defined usage rules, leading to inconsistent UI and reliance on design for implementation decisions.
The design system lacked defined usage rules, leading to inconsistent UI and reliance on design for implementation decisions.
System Structure & Governance
System Structure & Governance
Introduced a 3-layer system to enforce consistency:
• Foundations — tokens, grids, and base definitions
• Reusable UI — components and patterns
• Usage governance — rules, guidelines, and constraints
Introduced a 3-layer system to enforce consistency:
• Foundations — tokens, grids, and base definitions
• Reusable UI — components and patterns
• Usage governance — rules, guidelines, and constraints
Introduced a 3-layer system to enforce consistency:
• Foundations — tokens, grids, and base definitions
• Reusable UI — components and patterns
• Usage governance — rules, guidelines, and constraints
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.