Design System

A product portfolio built on 20 years of mergers and acquisitions is bound to have some differences in experience, platform, and extensibility. Our enterprise-grade design system unites over 40 diverse products with millions of end users under one unified visual and experiential system.

Role
Contributor

Index

Design-System-Cover

Principles

To ensure clarity and consistency across the design system, our small team of designers, developers, and researchers sat down together and workshopped a few guiding principles. We asked ourselves what we wanted to achieve, what failure could look like, and conversely, what success would look like. Our vision and mission was captured in four words:

Inclusive
Know who our work is for

circle-1

Informed
Make data-driven decisions

square

Simple
Focus on what’s essential

triangle

Flexible
Create solutions that scale

hexagon

Foundations

The color palette, typography, and icons were designed to give a more fresh and human face to our products compared to the austerity of the legacy UI. We chose Source Sans, a humanist typeface, a more saturated color framework, and a sleeker icon style with a whimsical rounded corner. We deemphisized hard lines and introduced drop shadows for a softer look and feel on the page.

design-system-foundations

The same product screen using the old UI style and the new UI style.

Patterns

Members of the design system team also work with different product teams to solve for different functionality needs within applications. We use this work to build a library of common patterns that other product teams can then adopt to scale user experience across the product portfolio. This library is constantly evolving along with the growing needs of both teams and customers.

Index_Detail

A standard index/detail pattern used in two different products.

Accessibility

It’s so important that components and their interaction states are WCAG compliant beyond just color contrast standards. To take advantage of an upcoming update of our theme, I designed a new framework for interaction states within components. Introducing more shape differentiations between states helps boost the visual differences between states while reducing the reliance on color to communicate. With components accessible at their core, color is used more decoratively, and we could safely make beautiful design decisions without sacrificing functionality for our users.

IDS-COLORS