Design Systems

A design system was introduced to support the expanding range of components and patterns for a global financial firm, ensuring consistency and scalability across all platforms.
In compliance with client confidentiality under an NDA. This project will focus on the methodologies and approaches.

BUSINESS OPPORTUNITIES / GOALS
The company is committed to empowering its people with the right mindset and skills to enhance the quality of all their services. To support this, a design system needed to be introduced to scale the growing number of components, saving time and reducing costs.

THE PROBLEM
The previous components were outdated and inconsistent throughout the application, making them not scalable. 

MY ROLE & KEY CONTRIBUTIONS

As a Senior Product Designer for this engagement, I had the opportunity to contribute to building a comprehensive design system.

• COLLABORATION: Working closely with fellow designers, we took ownership of different sections to build the atomic library, addressing the growing number of components and patterns. We also collaborated with developers to ensure the design system was seamlessly coded, creating a single source of truth that both teams could share on one platform.

• DESIGN: We defined clear rules and guidelines while also extending the brand’s identity. Additionally, we had the chance to experiment within set parameters, introducing new colors, components, and patterns to enhance the system’s flexibility and coherence. We followed Brad Frost’s Atomic design principles and teachings by Nathan Curtis.

THE TEAM
1 lead, 2 senior designers & 1 developer

TIMELINE
1 Year, 2-week Sprints.

FOUNDATION 

We created a style guide that introduced an 8px spacing and grid system with a defined number of columns, using a rem-based guide to ensure optimal responsive behavior across screens. All components and patterns were custom-built without relying on frameworks, ensuring the brand’s uniqueness and consistency.

To facilitate easy adoption, we provided detailed specs, implementation guidelines, visual references, and design principles. This foundation also included pixel-perfect results to support future scalability as the product grows, helping the team optimize design efforts moving forward.

STYLE GUIDE CONTENTS:

  • Annotations
  • Spacing guidelines
  • Layout grids
  • Branding (Colors & Typography)
  • Icons
  • Sizing guidelines

COMPONENT & PATTERN LIBRARIES

We designed a component library with reusable elements and their variants, such as buttons, accordions, form fields, modals, pagination, navigation items (e.g., headers), and more.

Leveraging these components, we built a pattern library that grouped UI elements and provided guidelines for their proper implementation. This offered reusable content and layout structures, ensuring consistency and efficiency across the product.

THE LIBRARY & DOCUMENTATION 

ONLINE ACCESS

• We created an interactive page on the company’s website to display documentation and guidelines for the design system, accessible to both designers and developers.

• The page featured code snippets and APIs that could be easily copied and pasted, improving developer efficiency.

• Additionally, we included FAQs and global support to assist teams worldwide.

DESIGN IMPACT

  • The design system saved significant time for developers by reducing the need to code new components.
  • It streamlined handoffs between designers and developers, ensuring smoother collaboration.
  • By maintaining consistency throughout the product, the system helped scale the product faster and more efficiently.
  • By introducing centralized updates across the system, the design system also saved costs and effort in the long run.