Citi Design System

September 2020

In 2020, I helped design and build some of the most successful products and capabilities at Citi Fintech, including the Citi Design System. A collection of components defined by core design principles and patterns, allowing for rapid prototyping and iteration, increasing productivity and speed to market using a shared vocabulary across design, engineering, and other disciplines.

Framing the problem

Before being integrated into Citi's Global Consumer Bank group in 2020, the Citi FinTech was a unit charged with delivering a radically simple, connected customer experience on mobile. Through co-creation with customers, an agile operating model, and cutting-edge technology, Citi FinTech was created to transform how Citi designs, builds, creates, and delivers mobile features and capabilities for millions of customers.

That's why the Citi Design System was born. The system is more than just a library of UI components and style guides; it's also crucial to set parameters for the team's work process and our values and principles. Like most systems, this design system is rooted in Atomic Design, a structural design methodology for creating simple, scalable systems. We start with foundational elements, then make more sophisticated components rooted in those elements, and finally use a series of components to develop full module-based flows.

  1. Style Guide
    1. Foundation
    2. Components
    3. Patterns
  2. Tools and Education
    1. Governance model
    2. Collaboration
    3. Documentation site
    4. Sandbox app

As priorities change, components and patterns can be added or removed, allowing us to evolve our products and services to match market demands. We identified that critical components of the product platform make the delivery of new features appear seamless to the user. This modularity is fundamental to facilitating the implementation of a centralized theme engine.

The process

Apart from making the work process cost-effective and have a consistent experience across multiple platforms while providing a toolset to solve problems quickly, this themeable solution works not only across all the individual experiences for Citi's customer experience product segments but for its external partners as well.

Themeability is usually an overlooked aspect when designing and building a design system. That’s an unfortunate fact, as retroactively adding themes can be an arduous process. Themeability is a complex feature because it requires a thorough plan when architecting a design library and when defining and building UI components.

At Citi, we had to come up with a themeable solution so components could be easily themeable for all three different segments:

Themeable components allow us to easily change the look and feel throughout the entirety of a design, whether that is on a component, screen, flow, or application level.

A theme is a variable system that determines the stylistic features of our atomic components. These theme variables or parameters, which Invision calls design tokens, are created and referenced when designing our components.

Our theme variables or design tokens go beyond just colors and fonts; it also contains component-specific styles. That's possible by creating a multi-tiered variable system; in this case, we created: colors, typefaces, icons, and measurements. That makes for a much more flexible and customizable theme.

The five pillars of success

The Citi Design System is ever-evolving and growing and can scale massively. Getting the foundation right is critical so that it can scale appropriately. We've created The Five Pillars of Success to guide us through this process.

1. Structure

Setting the design foundation and standing up an MVP of core libraries.

2. Tooling

Choosing and implementing the best software is critical in effectively distributing the design system into our designer's and developers' workflow. We have selected the Sketch app, the InVision platform, and DSM to house and manage the design system.

3. Adoption

Encouraging consumption of the design system and productive workflow behavior. We shouldn’t expect designers and developers to work in an entirely new way because we’ve asked them to. Often, failure occurs when teams don’t truly see the value or face resistance from product teams unwilling to redesign existing features. Without a healthy community of evangelists, Design Systems have difficulty achieving adoption. We have to plant the right seeds with the right individuals to make this work.

4. Contribution model

Creating community to enable the system to evolve and grow.

5. Governance

Defining the principles for how the system is controlled across teams.

Operationalizing the design system

Prepare → Design → Build → Scale

  1. Prepare – Design system questionnaire, project kickoff, stakeholder alignment.
  2. Design – Industry best practices, design hygiene.
  3. Build – Core library, documentation, code integrations, platform, and journey integrations.
  4. Scale – Governance model, Component lifecycle, Version control, Communication plan.

Collaboration and distribution

To make this library sharable across the organization, we had to establish techniques for code and the Figma component library reuse. Utilizing package managers, we automated the process of downloading, compiling, and linking out libraries.

This is an automated process where we can package all the components in our repository, in this case, Bitbucket, and share across all tech teams across the company using the library via a link. That's also playing a huge role when it comes to versioning. Whenever there's a new UI Component version, we need to communicate to our journey teams that a new version is available, and they need to change a tag in their projects to consume this new update.

With built-in accessibility standards, updating themes and ensuring an inclusive experience is easier and more manageable.

Measuring success

We can better allocate our resources towards the highest value initiatives with relevant metrics. We can prioritize the components with the highest usage, provide accurate estimates to the product about upgrade efforts, and communicate directly with our tech partners about the changes impacting them.

To address our lack of information about component consumption in iOS, our engineers created a python script to surface key components occurrences across our Citi mobile codebases.

The goal is to surface the data needed to make smarter decisions about new features, more effectively communicate the work effort to product managers, and enforce component consumption across the organization.

Tracking granular component usage allows us to see the scale at which any given component is used across features. This information is vital for estimating the potential scale of component deprecations and gives us more accurate estimates when communicating to product managers and engineering partners about how much a team may be impacted.