Scaling Design: From Component Chaos to Intent-based Design System
MY ROLE Design system architect responsible for creating the framework, building core patterns, and enabling team adoption while working closely with engineering on implementation
Problem
As Lexagle scaled from 1 to 15 enterprise clients, we discovered our component library chaos wasn't just about visual inconsistency. The fundamental issue was that our components couldn't adapt to varying user intents and content complexity across different enterprise workflows.
Contract managers needed different interactions than legal administrators. Simple documents required different treatment than complex multi-party agreements. Our rigid component system couldn't flex with human needs.
Countless brainstorming and audit work was performed to understand core interactions and flows.
Key Insights
①
User Intent Drives Everything
Users approached interfaces with specific goals: browsing, creating, analyzing, configuring. These intents required fundamentally different interaction patterns.
②
Content Complexity Varies Dramatically
A simple contract template needed different treatment than a complex multi-party negotiation. Time to consume content became our key metric.
③
Context Changes Everything
The same task (like uploading) needed different approaches in different contexts - full pages vs. modals vs. panels.
Framework Innovation
The Breakthrough: Intent Based Design
Instead of building components first, I created a framework that started with human intent and adapted to content complexity. This fundamentally changed how we approached interface design.
Architecture: Four-Layer System
①
Principles
Guiding beliefs that shape decisions: Simplify complexity, Guide focus, Foster trust, Enable confidence & flow, Craft moments of delight
②
Foundations
Basic building blocks: Colors, typography, spacing, elevation, borders, grid systems
③
Components
Self-contained interface elements that follow foundation rules and adapt based on context
③
Patterns
Reusable interactions that combine components based on user intent and content complexity
The Pattern’s Two-Axis System
User Intent (Starting point)
- The specific goal or task a user is trying to accomplish when interacting with an interface - like browsing documents, creating contracts, or understanding workflow status. This serves as the starting point for selecting appropriate interaction patterns.
Content Complexity (Adaptation)
High - Multi-dimensional, system-wide impact
Medium - Moderate relationships, focused scope
Low - Simple, isolated, quick consumption
Based on: Structure × Cognitive Load × Context × Business Impact
Pattern Innovation
The magic happened in how patterns adapted. Take navigation - instead of rigid rules, we created intent-based patterns that flexed with context. For example, wayfinding patterns could be disected and presented in many ways, but ultimately we organized by common user intent and this helped define the rules around component usage and specific guidelines:
Navigate Between
Moving between different areas/spaces
- System-wide areas (sidebars)
- Domain sections (local nav)
- Content items (tabs, links, segmented control)
Journey
- Started: 50+ scattered components, no documentation, constant design debates
- 6 months: Core visual foundations and component library established
- Year 1: Intent-based pattern framework implemented
- Now: 40+ components, 20+ intent patterns, 90% reusability, 4 designers using it
"The same navigation principles work whether you're in a modal, full page, or panel - they just manifest differently based on context. This consistency helps users build reliable mental models." - Pattern Guidelines
Impact
- 40% faster feature delivery - designers stop debating, start shipping
- 90% component reusability despite enterprise customization needs
- Reduced design QA issues by 60% - developers know which pattern to implement
- Scaled from 1 to 4 designers without losing coherence
- 100% accessibility compliance built into patterns
Key Learning
Design systems aren't just about consistency—they're about encoding decision-making. By building intent and complexity into our system's DNA, we created a framework that makes designers faster while producing better outcomes for users with varying needs.
Looking Ahead
“What is the user trying to accomplish?”
This intent-based approach fundamentally changed how we approach design at Lexagle. Instead of asking "What component should I use?" teams now ask "What is the user trying to accomplish?" This shift in thinking has created more thoughtful, user-centered interfaces that scale naturally with business complexity.
The framework continues to evolve, but the core principle remains: start with human intent, adapt to content complexity, and let patterns guide consistent execution. It's a approach that puts users at the center of every design decision.
Scaling Design: From Component Chaos to Intent-based Design System
MY ROLE Design system architect responsible for creating the framework, building core patterns, and enabling team adoption while working closely with engineering on implementation
Problem
As Lexagle scaled from 1 to 15 enterprise clients, we discovered our component library chaos wasn't just about visual inconsistency. The fundamental issue was that our components couldn't adapt to varying user intents and content complexity across different enterprise workflows.
Contract managers needed different interactions than legal administrators. Simple documents required different treatment than complex multi-party agreements. Our rigid component system couldn't flex with human needs.
Countless brainstorming and audit work was performed to understand core interactions and flows.
Key Insights
①
User Intent Drives Everything
Users approached interfaces with specific goals: browsing, creating, analyzing, configuring. These intents required fundamentally different interaction patterns.
②
Content Complexity Varies Dramatically
A simple contract template needed different treatment than a complex multi-party negotiation. Time to consume content became our key metric.
③
Context Changes Everything
The same task (like uploading) needed different approaches in different contexts - full pages vs. modals vs. panels.
Framework Innovation
The Breakthrough: Intent Based Design
Instead of building components first, I created a framework that started with human intent and adapted to content complexity. This fundamentally changed how we approached interface design.
Architecture: Four-Layer System
①
Principles
Guiding beliefs that shape decisions: Simplify complexity, Guide focus, Foster trust, Enable confidence & flow, Craft moments of delight
②
Foundations
Basic building blocks: Colors, typography, spacing, elevation, borders, grid systems
③
Components
Self-contained interface elements that follow foundation rules and adapt based on context
③
Patterns
Reusable interactions that combine components based on user intent and content complexity
The Pattern’s Two-Axis System
User Intent (Starting point)
- The specific goal or task a user is trying to accomplish when interacting with an interface - like browsing documents, creating contracts, or understanding workflow status. This serves as the starting point for selecting appropriate interaction patterns.
Content Complexity (Adaptation)
High - Multi-dimensional, system-wide impact
Medium - Moderate relationships, focused scope
Low - Simple, isolated, quick consumption
Based on: Structure × Cognitive Load × Context × Business Impact
Pattern Innovation
The magic happened in how patterns adapted. Take navigation - instead of rigid rules, we created intent-based patterns that flexed with context. For example, wayfinding patterns could be disected and presented in many ways, but ultimately we organized by common user intent and this helped define the rules around component usage and specific guidelines:
Navigate Between
Moving between different areas/spaces
- System-wide areas (sidebars)
- Domain sections (local nav)
- Content items (tabs, links, segmented control)
Navigate Through
Moving through sequences/processes
- Multi-phase processes (complex steppers)
- Standard sequences (linear progression)
- Simple progressions (step indicator
"The same navigation principles work whether you're in a modal, full page, or panel - they just manifest differently based on context. This consistency helps users build reliable mental models." - Pattern Guidelines
Impact
- 40% faster feature delivery - designers stop debating, start shipping
- 90% component reusability despite enterprise customization needs
- Reduced design QA issues by 60% - developers know which pattern to implement
- Scaled from 1 to 4 designers without losing coherence
- 100% accessibility compliance built into patterns
Key Learning
Design systems aren't just about consistency—they're about encoding decision-making. By building intent and complexity into our system's DNA, we created a framework that makes designers faster while producing better outcomes for users with varying needs.
Looking Ahead
“What is the user trying to accomplish?”
This intent-based approach fundamentally changed how we approach design at Lexagle. Instead of asking "What component should I use?" teams now ask "What is the user trying to accomplish?" This shift in thinking has created more thoughtful, user-centered interfaces that scale naturally with business complexity.
The framework continues to evolve, but the core principle remains: start with human intent, adapt to content complexity, and let patterns guide consistent execution. It's a approach that puts users at the center of every design decision.
Scaling Design: From Component Chaos to Intent-based Design System
MY ROLE Design system architect responsible for creating the framework, building core patterns, and enabling team adoption while working closely with engineering on implementation
Problem
As Lexagle scaled from 1 to 15 enterprise clients, we discovered our component library chaos wasn't just about visual inconsistency. The fundamental issue was that our components couldn't adapt to varying user intents and content complexity across different enterprise workflows.
Contract managers needed different interactions than legal administrators. Simple documents required different treatment than complex multi-party agreements. Our rigid component system couldn't flex with human needs.
Countless brainstorming and audit work was performed to understand core interactions and flows.
Key Insights
①
User Intent Drives Everything
Users approached interfaces with specific goals: browsing, creating, analyzing, configuring. These intents required fundamentally different interaction patterns.
②
Content Complexity Varies Dramatically
A simple contract template needed different treatment than a complex multi-party negotiation. Time to consume content became our key metric.
③
Context Changes Everything
The same task (like uploading) needed different approaches in different contexts - full pages vs. modals vs. panels.
Framework Innovation
The Breakthrough: Intent Based Design
Instead of building components first, I created a framework that started with human intent and adapted to content complexity. This fundamentally changed how we approached interface design.
Architecture: Four-Layer System
①
Principles
Guiding beliefs that shape decisions: Simplify complexity, Guide focus, Foster trust, Enable confidence & flow, Craft moments of delight
②
Foundations
Basic building blocks: Colors, typography, spacing, elevation, borders, grid systems
③
Components
Self-contained interface elements that follow foundation rules and adapt based on context
③
Patterns
Reusable interactions that combine components based on user intent and content complexity
The Pattern’s Two-Axis System
User Intent (Starting point)
- The specific goal or task a user is trying to accomplish when interacting with an interface - like browsing documents, creating contracts, or understanding workflow status. This serves as the starting point for selecting appropriate interaction patterns.
Content Complexity (Adaptation)
The cognitive effort required to process information, determined by factors like data structure, volume, relationships between elements, and business impact. This guides how patterns should adapt to present information appropriately - from simple single items to complex multi-dimensional datasets.
Pattern Innovation
The magic happened in how patterns adapted. Take navigation - instead of rigid rules, we created intent-based patterns that flexed with context. For example, wayfinding patterns could be disected and presented in many ways, but ultimately we organized by common user intent and this helped define the rules around component usage and specific guidelines:
Navigate Between
Moving between different areas/spaces
- System-wide areas (sidebars)
- Domain sections (local nav)
- Content items (tabs, links, segmented control)
Navigate Through
Moving through sequences/processes
- Multi-phase processes (complex steppers)
- Standard sequences (linear progression)
- Simple progressions (step indicator
"The same navigation principles work whether you're in a modal, full page, or panel - they just manifest differently based on context. This consistency helps users build reliable mental models." - Pattern Guidelines
Impact
- 40% faster feature delivery - designers stop debating, start shipping
- 90% component reusability despite enterprise customization needs
- Reduced design QA issues by 60% - developers know which pattern to implement
- Scaled from 1 to 4 designers without losing coherence
- 100% accessibility compliance built into patterns
Key Learning
Design systems aren't just about consistency—they're about encoding decision-making. By building intent and complexity into our system's DNA, we created a framework that makes designers faster while producing better outcomes for users with varying needs.
Looking Ahead
“What is the user trying to accomplish?”
This intent-based approach fundamentally changed how we approach design at Lexagle. Instead of asking "What component should I use?" teams now ask "What is the user trying to accomplish?" This shift in thinking has created more thoughtful, user-centered interfaces that scale naturally with business complexity.
The framework continues to evolve, but the core principle remains: start with human intent, adapt to content complexity, and let patterns guide consistent execution. It's a approach that puts users at the center of every design decision.