Screen Shot 2020-03-14 at 5.38.06 PM.png

Design System 2.0

Case Study

Our initial design system addressed a handful of design elements that we rationalized and codified to help our products appear familial. Our second pass was an engineering partnership, diving deeply into the atomic elements of our components to create a semantically-tokened system that leverage customer, product, and platform data to render personalized, responsive experience at runtime. It was ambitious, and involved strong engineering partnerships and robust change management to educate teams and drive adoption.

IDS 2.0 logo

A new mark to usher in a new mindset

Setting the vision

An important artifact to educate leaders and teams that we were moving from "several branded design systems" to a single system with coded themes.

Educating teams

An explanation of how the design system elements are vetted, coded and iterated upon.

Educating the Team

The design system was an ambitious co-design exercise leveraging diverse designers from across the businesses - to ensure we had buy-in, a complete set of uses cases and the best output.

Durable Components

A subset of component attributes that would remain the same across our platform, to create a sense of continuity and confidence fo customers

Innovation and contribution

Educating designers on how to intentionally deviate from the system when it didn't meet their needs, with the explicit goals of defining experiments and sharing the results.

Accessibility

Among other things, accessibility is considered a foundational element of the system - and is considered for each component and pattern to insure an inclusive experience for all customers.

Typography

Typography was a multi-phase effort that included type style, scale, and an overhaul of spacing.

Spacing and Padding

These "invisible attributes" are some of the most important in creating the cohesion we were looking for. Implemneting spacing truly "snapped" our experiences into shape.

Icons

addressing icons platform wide was another foundational project to drive cohesion.

Tokens

Design data is key to leveraging context to present an experience that's on brand and device-specific. We diligently coded every atomic element so we can change appearances on the fly - and cascade updates effortlessly.

Documentation

A detail from our website which captured a broad range of design system documentation

Button Workshop

Getting the word out with a fun button workshop

The Team

It took a special breed of detail-oriented, code-savvy designers to create a design system this thoughtful, elegant and flexible. It's fun to work with people that good.