Industry
Finance
Company
Orbital
Role
Product Designer (Sole Designer)
Product Designer (Sole Designer)
Status
Shipped
Design System Governance
Design System Governance
Design System Governance
Creating consistent digital experiences across products and teams.
Creating consistent digital experiences across products and teams
Project Overview
Project Overview
Introduced a Design System framework to standardise a fragmented design system and reduce implementation inconsistency
Introduced a Design System framework to standardise a fragmented design system and reduce implementation inconsistency
System Structure
Established a structured design system framework consisting of shared foundations, reusable components and documented governance.
• Foundations — Design tokens, grids, base styles
• Components — Reusable UI patterns
• Governance — Usage standards and implementation guidance
Established a structured design system framework consisting of shared foundations, reusable components and documented governance.
• Foundations — Design tokens, grids, base styles
• Components — Reusable UI patterns
• Governance — Usage standards and implementation guidance
System Structure
Established a structured design system framework consisting of shared foundations, reusable components and documented governance.
• Foundations — Design tokens, grids, base styles
• Components — Reusable UI patterns
• Governance — Usage standards and implementation guidance
System Structure
Established a structured design system framework consisting of shared foundations, reusable components and documented governance.
• Foundations — Design tokens, grids, base styles
• Components — Reusable UI patterns
• Governance — Usage standards and implementation guidance
Components Model Diagram
Components Model Diagram
Introduced a governance model that extended an existing component library with foundations, guidelines, design tokens and implementation standards.
Introduced a governance model that extended an existing component library with foundations, guidelines, design tokens and implementation standards.
From Component Library to Design System Framework
From Component Library to Design System Framework
Before
Component library with reusable UI elements but limited implementation guidance.
After
Governance framework introducing shared foundations, semantic rules and documented implementation standards.
Before
Component library with reusable UI elements but limited implementation guidance.
After
Governance framework introducing shared foundations, semantic rules and documented implementation standards.
Before
Component library with reusable UI elements but limited implementation guidance.
After
Governance framework introducing shared foundations, semantic rules and documented implementation standards.
Establishing Foundations
Establishing Foundations
Semantic Colour
Semantic Colour
Defined semantic colour roles to improve consistency and support clearer implementation across the design system.
Defined semantic colour roles to improve consistency and support clearer implementation across the design system.
Defined semantic colour roles to improve consistency and support clearer implementation across the design system.
Colour governance introduced semantic intent and accessibility validation beyond the original palette structure.
Component Governance — Banner System
Component Governance — Banner System
Components — Banner System
Defined banner variants, severity levels and usage guidance to improve consistency across product experiences.
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
Components — Banner System
Defined banner variants, severity levels and usage guidance to improve consistency across product experiences.
Banners do not have hover or focus states. Only action elements within the banner respond to interaction.
Impact
Introduced a governance framework that provided shared implementation standards across foundations and components, supporting more consistent implementation across product teams.