American Express Design System

August 2016

Compiled by American Express designers and developers, the Design Language System follows the best practices of existing style libraries and modern brand, web, and mobile design.

Framing the problem

As an Interaction Design Director who had just joined American Express, a shared, centralized design system did not exist. Designers could easily consume when working on product enhancements or net new experiences. Product teams were designing slightly different experiences for every new release, which substantially impacted development since components had to be rebuilt each time. Resulting in team productivity inefficiencies and design inconsistencies across various digital experiences and ultimately harmed the brand's strength—in some cases affecting the client's trust with the brand.

The strategy

A system would not be successful without our end users' support and involvement, in this case, designers and developers. In partnership with our product, design, and tech leaders, the One Amex initiative was started to create a new technology stack that included a modern data layer and a design system from the ground up. That effectively ensured a standardized, consistent look and feel across all our digital products and a working model that would substantially increase speed to market. It reduced confusion, tightened our collaboration, and helped the Amex brand grow organically and in a controlled manner.

When building many projects, organizing components into a unified system can save time through reuse and help ensure that our users get a consistent experience at every touchpoint. It can help speed up and standardize modern web and mobile development at any scale.

The One Amex was crucial since, to have a fully integrated product design and development team, a Design System has to support both teams, design and development. Moving fast isn't just an edge for tech and financial companies; it's essential. Enormous competition demands companies to move faster with excellent stability, which isn't different for American Express.

Managing three different teams, Android, iOS, and Web to maintain a single product is one of the most challenging parts of product design and development. It's not just costly from a monetary perspective, it can also hinder the product's pace, and that's why our technology team's framework of choice was React and React Native.

React Native allows teams to share up to 90 percent of their code across Web, Android and iOS. This can be a huge benefit in the era of agile development.

Establishing design principles

Before beginning to work on our Design System, we had to establish our principles; our design team quickly agreed on design changes we wanted to make.

Our decisions were based on extensive user research, and we knew exactly what we expected to see in the new interface. We would end up in a subjective discussion of personal preference on every design review.

We decided to bring our discussion to a higher level and define our core principles to overcome this challenge.

Core principles

  1. Trusted – This is the heart and soul of great customer service. We provide Card Members with personalized experiences they can trust, designed for clarity and transparency.
  2. Transparent – Transparent design and language reinforces the value of being a Card Member by promoting trust and understanding of what’s being said and how it’s being presented.
  3. Personal – Great customer service anticipates and addresses a Card Member’s needs before they do. Our design is all about them.

Design activities

Research → Audit → Indentify → Exploration → Execution

1. Research

Firstly, we did a robust exercise, researching existing design systems to as a form of aspiration. We looked into some of the best design systems:

  1. Material Design System, Google
  2. Human Interface Guidelines, Apple
  3. Fluent Design System, Microsoft
  4. Design System, Uber
  5. Polaris Design System, Shopify
  6. Spectrum Design System, Adobe

2. Audit

Perform an audit of existing components that were live across out experiences and on mobile and web to surface inconsistencies and visual treatments.

3. Indentify

We outlined a list of the most commonly used components across our experiences. For example: buttons, links, form fields, data sets, and tabs.

4. Exploration

We created mood boards to explore the look and feel, considering both simple and complex components and potential light and dark themes implementations.

5. Execution

After receiving support from our partners in the product and engineering teams, we continued with the design and development of our system.

The three foundational pillars

The Amex Design Language System is composed of many atomic components. Each component encapsulates the visual and functional properties of a certain element in the interface. Different components put together can create different experiences for application users.

We broke down the design system in three different areas:

1. Foundation

Foundation or design tokens are the visual design atoms of our design system. They are named entities that store brand visual design attributes, such as logos, colors, iconography, typography, etc.

2. Components

Components are the basic building blocks. A label, an input, or a button are examples of what components are.

3. Patterns

A Pattern is a group of components that as a whole form a unit. An input, label, and button together form a pattern.

Documentation

The documentation site is a foundational part of how design gets communicated and delivered at a company. We partenered with engineers and product teams across American Express to create a documentation site. Teams areable to find detailed documentation on getting started with all of the components, the themes, our principles, and more.

In addition to the documentation site, we've created a React Native interpretation of those components and its own documentation site too, allowing engineers and prototypers to quickly develop React Native applications on top of the design system without the need to understand all the variations and syntax of the design system. It promotes consistency and re-use throughout React Native applications.

Because React Native is cross-platform development, lots of companies come to React Native, so they can write a single codebase and use it for multiple platforms. But cross-platform development is not easy. Apart from the design, there are many other fundamental differences between platforms that we need to address when writing cross-platform code. When writing documentation, another important aspect is to provide code snippets playgrounds. This lets users quickly try out components, and also makes it easier to report issues.

Governance

When other teams can contribute to our design system, they're more likely to trust the system. It doesn't matter how polished our components are and how robust our documentation is. Without users, our design system serves no purpose. Engineering, design, and product teams must all trust and use the system as part of their everyday process.

Our teams at American Express can engage with the system in the following ways:

1. Adding or changing a component

When designing new products or features, existing components or patterns might not be enough to provide the best UX/UI solution. In this scenario, existing components can either be amended or replaced/upgraded by an all-new component.

2. Amending an existing component

We welcome and encourage new component proposals from internal American Express teams. Our best work comes from collaborating directly with the teams using components in their projects. If you'd like to kick off a new component proposal, please submit an issue using the component proposal template below and we will get in touch.

3. Taking the necessary steps

Step 1. Product targets a feature to consume components
Step 2. Product, design, tech, and feature teams identify what should be a common component in the target feature
Step 3. If a common component doesn’t exist in Figma and/or Sketch app
Step 4. If a common component doesn’t exist in Bitbucket
Step 5. If a common component already exists in Bitbucket

Timeline and key results

December, 2015
MVP planning, design, and develonment began.
January, 2016
Gained buy-in from fellow product teams and the platform engineering team.
March, 2017
We released the American Express Design System beta site. Once we were able to gain traction and expand the system to a more mature library of components, we provided critical resources and support for both designers and developers to get started: a Figma and Sketch UI kit for product designers, and a React Native library and documentation site for developers.
May, 2017
The beta version of the American Express Design System became official. The Vice President of Product and UX Design and Research officialized the Design System's as a centralized and dedicated group.
September, 2017
MVP release of the One Amex where the design system powered the front-end, new look and feel was consumer-facing for selected journeys.
November, 2017
Almost two years later, the system composed more than 320 assets, actively consumed by 23 scrum teams, launched in over 70 features, and was live in 17 markets.