2025 · HighScope · Industry Project · B2B · EdTech
Improved Overall Design Speed by ~30% with a Scalable Design System
Fragmented UI foundations across products made scaling slow, inconsistent, and costly to maintain. Teams were rebuilding similar patterns, adapting components manually, and struggling to support multiple brands and evolving requirements.
I designed a scalable design system that acts as shared product infrastructure — enabling brand flexibility, accessibility by default, and resilient components that adapt to real-world complexity while improving delivery speed over time.
My Role
Design Systems Lead
Stakeholders
Product
Engineering
Marketing
Leadership
Key Outcomes
Faster Delivery
Consistent User Experience
Adaptable Designs
Deliverables
Design System Foundations
Component Libraries
Usage Guidelines
Key Problem
Inconsistent interfaces made products harder to use, build, and scale.
Mismatched UI patterns, inconsistent product behaviours, and duplicated components result in:
Users
Harder to Learn & Trust
When familiar actions behaved differently across products, users struggled to form habits and complete tasks confidently.
Product and Engineering
Slower, Redundant Build Cycles
Inconsistent components across apps prevented reuse, forcing teams to rebuild the same patterns repeatedly.
Business
Hampered Scaling & Growth
Repeated rework and inconsistent experiences increased costs, and slowed launches, weakening brand confidence.
"This wasn't a UI problem - it was a system problem."
Screen-level fixes weren’t enough. The system itself needed structure.
Solution (Design Goals)
Create a design system that drives consistency while accelerating delivery.
The system needed to solve today’s inconsistencies while enabling future scale.
Product, Engineering, and User
Consistency by Default
Shared components behave the same everywhere, creating predictable user experiences & fewer decisions for teams.
Product and Engineering
Speed through Reuse
Reusable, reliable components reduce rebuilds, rework, and delivery time across products.
Business
Scale Without Rework
Shared foundations and flexible themes enable new products and brands without starting over.
System Foundations
Unified core foundations to establish product consistency at the system level.
Typography for Clarity & Hierarchy
A consistent type system improved readability and scanning, reducing interpretation time across products.
Functional Colour System
A shared colour system defined functional roles - actions, states, and neutrals - ensuring consistent meaning across apps.
Standadrdised Layout Spacing
A standard spacing scale created visual rhythm and predictable layouts, making interfaces faster to scan and build.
Reusable core components - built once, used everywhere
A core component set ensured consistent behaviour across products, reducing duplication and improving system reliability.
Impact
By aligning foundations, we reduced design drift and development guesswork - saving effort while delivering predictable interfaces for users.
Accessibility
Inclusive design embedded by default, not an afterthought.
Accessibility was treated as a system constraint, ensuring inclusive experiences without relying on manual fixes later.
Color contrast, hierarchy, and interaction states were defined at the foundation level.
Components shipped with accessible states built in (focus, hover, disabled).
Teams inherited accessibility automatically by using the system.
Impact
Reduced accessibility debt while enabling teams to ship faster, confidently, and consistently.
Accessible states remain distinguishable across vision conditions.
System Tokenization
Enabled brand flexibility across products, without duplicating components.
Brand flexibility was achieved without fragmenting the system by separating visual styling from component structure.
Components referenced system tokens instead of fixed visual values.
Brand updates could be applied globally without redesigning UI.
Core components stayed consistent across all products.
Impact
Faster product rollouts without sacrificing consistency, stability, or reuse.
"However, visual flexibility alone wasn’t enough."
Challenging Complexities in Scale
As products evolved, larger components like accordions were used in increasingly different contexts.
Text-only Accordions
Rich-text and Media Accordions
Interactive Forms in Accordions
System Risk
When components aren’t designed for varied content and behaviors, teams are forced to duplicate them — breaking reuse, increasing maintenance, and slowing scale.
System Resilience to Evolving Needs
Redesigned component architecture to support diverse use cases without duplication.
The real issue behind this challenge was structural:
Components were designed around the assumption that content types would be fixed.
I restructured complex components using:
Slot-based content to support varied layouts and content types.
Flexible boundaries instead of rigid hierarchies.
System Impact
One adaptable component replaced multiple variants — improving reuse, clarity, and implementation speed across products.
Observed Impact
Early trends after 6 months of design system adoption.
After six months of adoption, the system began showing measurable efficiency gains, with clearer signals emerging as reuse increased.
~ 30% Faster Product Build Cycles
Initial products required higher setup investment.
Subsequent products reused foundations, components, and tokens.
Net build effort reduced as reuse compounded.
Product Teams
Reduced rebuilds and clearer patterns improved delivery confidence.
Users
More consistent interfaces began reducing friction across products.
Business
Early signs of lower delivery effort support long-term scalability.