H1Design System

H2Project Overview

A global provider of software solutions for the Asset Management and credit industries, faced challenges with design consistency and scalability across their product suite. Each product team operated in silos, leading to:

 

Inconsistent

Inconsistent user interfaces, creating a fragmented user experience.

Duplication

Duplication of design efforts, increasing development time and cost.

onBoarding

Difficulty in onboarding new designers and developers due to lack of standardized components.

Legacy products

 

The objective was to establish a unified design system that would streamline product development, enhance user experience, and maintain brand integrity across all platforms.

H2Solution & Execution

1. Discovery & Research

  • Conducted stakeholder interviews to understand pain points and expectations.
  • Audited existing products to identify common UI patterns and discrepancies.
  • Gathered user feedback to prioritize key design elements that impacted usability.

2. Design System Development

  • Developed a comprehensive UI component library, including buttons, forms, elements, and data visualization components.
  • Established a visual style guide detailing color schemes, typography, spacing, and iconography.
  • Introduced accessibility standards to ensure compliance with WCAG guidelines, improving product inclusivity.

3. Collaboration & Integration

  • Implemented tools like Storybook for interactive component previews, enabling real-time collaboration between designers and developers.
  • Created design tokens for consistent theming and rapid customization across different products.
  • Hosted workshops and training sessions to onboard teams to the new system, ensuring adoption and best practices.

4. Documentation & Governance

  • Developed comprehensive documentation covering usage guidelines, component specifications, and contribution protocols.
  • Established a governance model to manage updates and iterations, with regular feedback loops from product teams.
Design System
Branding
Branding

H2Results & Impact

Enhanced Design Consistency

Achieved a cohesive look and feel across all multiple products, reinforcing brand identity and user trust.

Development Efficiency

Reduced design and development time by 40%, as teams reused pre-built components instead of creating new ones from scratch.

Increased Collaboration

Strengthened communication between designers and developers through shared resources and real-time feedback tools.

Faster Time-to-Market

Enabled quicker prototyping and product updates, resulting in accelerated release cycles.

Scalability

Positioned Co. to scale their products efficiently, adapting to new market demands without sacrificing design quality.

User Satisfaction

Received positive feedback from users for improved usability and visual coherence, enhancing overall user experience.
Design System

H2Conclusion

P2The Design System significantly improved design consistency, reduced development time by 40%, and fostered a culture of collaboration. By streamlining workflows and maintaining a user-centered approach, the design system became a pivotal asset in Co's product development strategy, improving overall user experience and facilitating faster time-to-market.

H2Faster Time-to-Market​

P2Reducing development time by 40%
Dev time with Design Sys. 60%
Dev. time without Design Sys. 100%

4x

Faster Load Time