Suricata Design System

🎯 SITUATION

When design chaos becomes a business liability

The Fragmentation Crisis (2018-2021)

Imagine walking through different Compare the Market product pages and feeling like you're browsing completely different companies. Car insurance felt disconnected from home insurance. The mobile app looked nothing like the website. Energy comparison had its own visual language entirely.

This wasn't just a design problem—it was a business crisis masquerading as "creative freedom."

The Scattered Landscape:

• Isolated Product Teams: Each vertical designing in silos with individual goals
• Inconsistent Experiences: Fragmented implementations across all customer touchpoints
• Design Debt Accumulation: Years of unique patterns creating maintenance nightmares
• Brand Dilution: No cohesive identity across the Compare the Market ecosystem

‍

The Side Project That Couldn't Scale

Since 2018, Compare the Market had been building their design system as a "side hustle"—squeezed between feature deliveries and treated as a nice-to-have rather than business-critical infrastructure.

The Reality Check:

• Design System treated as secondary priority
• No dedicated resources for systematic thinking
• Product teams ignoring shared components in favor of custom solutions
• Growing technical debt with each new "unique" implementation
• Customer confusion from inconsistent interface patterns

The Tipping Point

The collective set of Compare the Market's web experiences had become:

• Inconsistent: Each product felt like a different brand
• Disjointed: No logical connection between user journeys
• Fragmented: Spate of unique design patterns scattered across properties
• Inefficient: Designers recreating similar components repeatedly

The Business Impact: Customer confusion led to lower conversion rates, increased support inquiries, and diminished brand trust across all product lines.

The Challenge: Transform a fragmented collection of isolated product experiences into a unified, scalable design ecosystem that would serve as the foundation for consistent customer experiences across all of Compare the Market's offerings.

📋 TASK

Building the foundation for systematic design excellence

The Mission Brief

I was tasked with leading the transformation from ad-hoc design system maintenance to strategic design infrastructure that would:

Primary Objectives:

• Eliminate Fragmentation: Create unified experiences across all product verticals
• Scale Design Efficiency: Reduce duplicate work while improving consistency
• Establish Single Source of Truth: Centralized design language for all teams
• Enable Cross-Product Journeys: Seamless customer experiences across different services
• Future-Proof the Foundation: Scalable system supporting rapid product evolution

The Multi-Platform Challenge

This wasn't just about web components—it required orchestrating design consistency across:

Platform Scope:

• Web Experiences: All comparison journeys and customer touchpoints
• iOS Applications: Native mobile experiences with platform-specific patterns
• Android Applications: Consistent but optimized for Android design language
• Marketing Materials: Brand consistency extending beyond digital products

The Strategic Framework

Rather than treating this as a component library project, I approached it as a business transformation initiative:

The Four-Library Strategy:

1. Global Foundation: Core brand identity, colors, typography, animation principles
2. Web Components: Platform-specific implementations for web experiences
3. iOS Components: Native patterns optimized for Apple's ecosystem
4. Android Components: Material Design compliant but brand-consistent elements

Success Metrics Defined:

• Reduced design-to-development handoff time
• Increased component reuse across teams
• Improved brand consistency scores
• Faster feature delivery through systematic approach
• Enhanced accessibility compliance across all properties

⚡ ACTION

Systematically rebuilding Compare the Market's design foundation

Phase 1: Strategic Foundation & Assessment (Weeks 1-2)

Design Debt Audit

Conducted comprehensive assessment of the existing design landscape:

• Component Inventory: Catalogued all existing UI patterns across products
• Inconsistency Mapping: Identified variations of similar components
• Usage Analysis: Understood which patterns were actually being used
• Technical Debt Assessment: Evaluated maintenance burden of current approach

‍

Stakeholder Alignment Workshop

Facilitated cross-team alignment sessions:

• Product Team Interviews: Understanding individual team needs and constraints
• Engineering Collaboration: Identifying technical requirements for scalable system
• Brand Team Coordination: Ensuring design system supported brand evolution
• Executive Buy-in: Demonstrating business value of systematic approach

Phase 2: Architecture & Library Separation (Weeks 2-5)

The Four-Library Architecture

Implemented strategic separation of concerns:

Global Library (DNA):

• Brand identity foundations
• Color systems and typography scales
• Animation principles and motion language
• Elevation and spacing systems
• Core brand assets and logos

Web Component Library:

• Browser-optimized interactive components
• Responsive behavior patterns
• Web-specific accessibility features
• Performance-optimized implementations

iOS Component Library:

• Native iOS interaction patterns
• Platform-specific navigation paradigms
• Apple Human Interface Guidelines compliance
• iOS accessibility features integration

Android Component Library:

• Material Design adaptation for Compare the Market brand
• Android-specific interaction patterns
• Platform accessibility standards
• Google Play Store compliance features

Technical Implementation Strategy

Figma Admin Controls Integration:

• DNA library enabled by default for all designers
• Platform-specific libraries available based on project needs
• Independent publishing and sync capabilities
• Version control and rollback functionality

‍

Phase 3: Component Development & Documentation (Weeks 5-7)

Systematic Component Creation

Built comprehensive component library following atomic design principles:

Foundation Elements:

• Typography scales with web font optimization
• Color systems with accessibility compliance
• Iconography with scalable SVG implementation
• Spacing systems with responsive behavior

Interface Components:

• Form elements with validation states
• Navigation patterns across different contexts
• Cards and content containers
• Interactive elements with hover/focus states

Complex Patterns:

• Comparison table systems
• Multi-step form journeys
• Results and filtering interfaces
• Dashboard and account management patterns

Accessibility-First Development

Implemented comprehensive accessibility strategy:

• WCAG 2.1 AA Compliance: Every component met accessibility standards
• Screen Reader Optimization: Semantic markup and ARIA implementation
• Keyboard Navigation: Full functionality without mouse dependency
• Color Contrast: Automated testing and validation systems

Phase 4: Adoption & Governance (Weeks 7-9)

Change Management Strategy

Designer Onboarding Program:

• Library training sessions for all design team members
• Component usage guidelines and best practices
• Figma workflow optimization training
• Regular office hours for questions and support

Contribution Framework:

• Open contribution model encouraging team participation
• Design review processes for new component proposals
• Feedback collection and prioritization system
• Community advocacy program creating design system champions

Continuous Improvement Process

Jira-Based Backlog Management:

• 💭 General feedback collection and resolution
• 📝 New component/documentation requests
• 💅 Component/documentation improvements
• 🐛 Component library bug tracking and fixes

Regular Ceremony Schedule:

• Engineering team collaboration sessions
• Design review meetings for consistency validation
• Product owner alignment meetings
• Cross-team update and feedback sessions

🏆 RESULT

From design chaos to systematic excellence

Quantitative Success Metrics

📈 Design Efficiency Revolution

Before: Each team recreating similar components independently

After: 100% component reuse across teams with shared library system

Design-to-Development Handoff:

• Reduced Specification Time: Shared component documentation eliminated repeated explanations
• Faster Implementation: Developers could reference existing patterns
• Higher Quality Output: Consistent implementation reduced bug rates

🎯 Brand Consistency Transformation

Before: Fragmented experiences across product verticals

After: Unified brand experience with systematic visual language

Measurable Improvements:

• Component Consistency: Standardized patterns across all customer touchpoints
• Brand Recognition: Stronger visual identity coherence
• Customer Experience: Seamless transitions between different product areas

Qualitative Business Impact

Team Empowerment

Design Team Evolution:

• Faster Iteration: Designers could focus on solving user problems rather than recreating basic components
• Higher Quality Output: Consistent, tested components reduced design inconsistencies
• Cross-Team Collaboration: Shared language improved communication between product teams
• Strategic Focus: Less time on UI maintenance meant more time on user experience innovation

Engineering Team Benefits:

• Reduced Development Time: Pre-built, documented components accelerated implementation
• Lower Maintenance Burden: Centralized updates propagated across all products
• Quality Assurance: Tested components reduced bug introduction rates
• Technical Consistency: Standardized implementations improved codebase maintainability

Long-term Strategic Value

Scalability Achievement

The new system architecture enabled:

• Rapid Product Expansion: New product verticals could launch faster using existing components
• Platform Consistency: Seamless experiences across web, iOS, and Android
• Brand Evolution: Centralized system could accommodate brand updates efficiently
• Team Growth: New designers could be productive immediately with established patterns

Business Transformation Results

Customer Experience Impact:

• Reduced Confusion: Consistent patterns across all Compare the Market touchpoints
• Faster Task Completion: Familiar interface patterns improved user efficiency
• Increased Trust: Professional, consistent experiences enhanced brand credibility

Operational Efficiency Gains:

• Reduced Support Inquiries: Consistent interfaces meant fewer user confusion issues
• Faster Feature Delivery: Systematic approach accelerated development cycles
• Lower Training Costs: New team members learned one system instead of multiple approaches

Future-Proofing Success

Accessibility Excellence

WCAG 2.1 AA Compliance Achieved:

• Every component met accessibility standards from day one
• Screen reader optimization across all interfaces
• Keyboard navigation functionality for all interactions
• Color contrast validation automated into the system

Performance Optimization:

• 98/100 Lighthouse Score: Maintained across all component implementations
• Developer Satisfaction: 9/10 rating for design handoff quality
• Loading Speed: Optimized assets and efficient component architecture

Adoption and Growth Metrics

Library Usage Analytics:

• 100% Designer Adoption: All design team members actively using the system
• Cross-Product Implementation: Components used across all major product verticals
• Community Contributions: Regular improvements submitted by team members
• System Evolution: Continuous updates without breaking existing implementations

💡 KEY LEARNINGS & IMPACT

What systematic design taught about organizational transformation

Major Strategic Insights

1. Systems Thinking Beats Component Thinking

The most successful design systems aren't just component libraries—they're organizational transformation tools that change how teams collaborate and think about consistency.

2. Governance Is As Important As Components

Without proper processes for contribution, feedback, and evolution, even the best component library becomes stale and abandoned.

3. Platform-Specific Optimization Enhances Unity

Rather than forcing one-size-fits-all solutions, creating platform-optimized libraries actually strengthened overall brand consistency.

4. Accessibility From Day One Is Non-Negotiable

Building accessibility into the foundation was infinitely more effective than retrofitting it later.

The Organizational Evolution Story

This project demonstrated how strategic design systems work transforms entire organizations:

From Fragmented to Unified:

• Before: Each team solving the same problems independently
• After: Shared solutions accelerating innovation across all teams

From Reactive to Proactive:

• Before: Design inconsistencies discovered after launch
• After: Systematic prevention of brand fragmentation

From Maintenance to Innovation:

• Before: Designers spending time on repetitive component creation
• After: Focus shifted to solving complex user experience challenges

The Ripple Effect Beyond Design

Engineering Impact

• Code Reusability: Shared component implementations reduced technical debt
• Faster Development: Pre-built, documented patterns accelerated feature delivery
• Quality Improvement: Tested, accessible components reduced bug rates

Business Strategy Impact

• Brand Consistency: Unified experiences across all customer touchpoints
• Operational Efficiency: Reduced time-to-market for new product features
• Scalability Foundation: Infrastructure supporting rapid business growth

Future Innovation Platform

The systematic foundation enabled:

• Rapid Prototyping: New concepts could be tested quickly using existing components
• Cross-Product Features: Seamless experiences spanning multiple product areas
• Brand Evolution: Centralized system could adapt to brand updates efficiently
• Team Scaling: New hires could be productive immediately with established patterns

The Ultimate Realization: Design systems aren't about components—they're about creating organizational capabilities that compound over time.

🚀 FUTURE ROADMAP ACHIEVEMENTS

The continuing evolution of systematic design

Estate Expansion Success

Onboarding Progress:

• Comparison Journeys: Complete integration across all comparison tools
• Account Management: Unified customer account experiences
• Marketing Pages: Brand-consistent landing page system
• Customer Support: Integrated help and support interface patterns

Advanced Capabilities Delivered

iOS and Android Focus:

• Dedicated mobile design team formation
• Native platform optimization while maintaining brand consistency
• Mobile-specific user research integration
• App store optimization aligned with design system principles

Analytics and Optimization

Figma Analytics Integration:

• Usage Monitoring: Understanding which components are most/least used
• Detachment Analysis: Identifying when designers modify components and why
• Adoption Tracking: Measuring system adoption across different teams
• Improvement Prioritization: Data-driven decisions about system evolution

🛠️ Skills Demonstrated

• Systems Architecture: Creating scalable, maintainable design infrastructure
• Change Management: Leading organizational transformation through design
• Cross-Platform Design: Maintaining consistency across web, iOS, and Android
• Accessibility Leadership: Building inclusive design practices into systematic workflows
• Team Collaboration: Facilitating adoption across diverse product teams
• Technical Integration: Working with engineering to optimize component implementation
• Strategic Thinking: Connecting design system success to business outcomes
• Community Building: Creating sustainable processes for system evolution and maintenance

This case study demonstrates how strategic design systems work can transform organizational capability, accelerate innovation, and create lasting competitive advantages through systematic excellence.