Crafting a Scalable Design System
Crafting a Scalable Design System
Built a scalable design system from scratch, adopted across 12 product lines — standardizing components, accelerating engineering handoff, and raising the accessibility baseline across the entire product suite.
Problem
The organization lacked a unified set of UI standards, resulting in inconsistent visual and interactive experiences, prolonged development cycles, maintenance challenges, and difficulty maintaining accessibility and client branding consistency across white-label products.
Problem
Despite 1,000+ monthly visitors, the website converted only 1.1% of users into consultation requests.
Through extensive research, I found the following key issues:
75% mobile traffic with significant UX friction
Poor course discoverability despite high intent Dead-end pages (FAQ and Academy had 0% direct conversion)
Weak trust signals in a credibility-sensitive market
No clear structure for job seekers vs. job center agents
Limited analytics and funnel tracking
Constraint: No capacity for a full rebuild — improvements had to be high-impact and low-effort for developers.
Problem
The organization lacked a unified set of UI standards, resulting in inconsistent visual and interactive experiences, prolonged development cycles, maintenance challenges, and difficulty maintaining accessibility and client branding consistency across white-label products.
Goal
Establish a robust, scalable design system that standardizes UI components and styles, accelerates development and client customizations, improves consistency, and ensures accessibility across all products.
Goal
Establish a robust, scalable design system that standardizes UI components and styles, accelerates development and client customizations, improves consistency, and ensures accessibility across all products.
Goal
Establish a robust, scalable design system that standardizes UI components and styles, accelerates development and client customizations, improves consistency, and ensures accessibility across all products.
My Role and Approach
As the lead designer, I analyzed existing UI patterns, collaborated closely with Customer Success and engineering teams, and applied atomic design principles to define a structured system of tokens, components, and styles. I optimized color systems for light/dark themes and reduced typography styles to enhance coherence and usability.
My Role and Approach
ContentFreelance UX Consultant leading research, strategy, and redesign proposal.
Discovery & Research:
Analyzed 90 days of GA data (12,770 users)
Reviewed Hotjar user session recordings
Identified conversion drop-offs and navigation friction
Defined 4 primary personas and created journey maps for each
Conducted competitive benchmarking (IBB, WBS, IU, neue fische)
Focused on identifying high-leverage improvements that aligned with existing technical constraints.
My Role and Approach
As the lead designer, I analyzed existing UI patterns, collaborated closely with Customer Success and engineering teams, and applied atomic design principles to define a structured system of tokens, components, and styles. I optimized color systems for light/dark themes and reduced typography styles to enhance coherence and usability.
Key Solutions
Created a structured color system with paired dark/light variants and clear derivation rules to simplify client branding integrations.
Rationalized typography from 15 to 9 text styles for clarity and responsiveness.
Defined reusable components and layout patterns using atomic design, aligned with the Angular Material framework, and documented interactive states and breakpoints.
Key Solutions
Clear Conversion Hierarchy
Prioritized one primary CTA (consultation request) and reduced competing actions.
Simplified Information Architecture
Made course content accessible within 1–2 clicks and removed low-converting pages.
Audience-Based Structuring
Created clearer pathways for job seekers and job center agents.
Mobile Optimization
Addressed major friction points affecting the 75% mobile audience.
Key Solutions
Created a structured color system with paired dark/light variants and clear derivation rules to simplify client branding integrations.
Rationalized typography from 15 to 9 text styles for clarity and responsiveness.
Defined reusable components and layout patterns using atomic design, aligned with the Angular Material framework, and documented interactive states and breakpoints.
Outcome
Measurably shortened development cycles — engineers could implement new features and client customizations without design intervention, reducing handoff ambiguity across 12 product lines.
Consistent visual language and interaction patterns across products, improving both user experience and brand perception.
Streamlined client integrations by enabling Customer Success teams to easily apply brand specifications.
Outcome
Measurably shortened development cycles — engineers could implement new features and client customizations without design intervention, reducing handoff ambiguity across 12 product lines.
Consistent visual language and interaction patterns across products, improving both user experience and brand perception.
Streamlined client integrations by enabling Customer Success teams to easily apply brand specifications.
More Work More Work
©2026 Maria Gogoleva
GO BACK TO TOP
©2026 Maria Gogoleva
GO BACK TO TOP