Creating a fully native and accessible design language.

At Citi, I led the creation of a global Digital Design Language to unify the brand across platforms and teams. Rooted in Atomic Design, the system was mobile-first, ADA compliant, and scalable for both internal studios and external agencies. Built through iterative research and testing, the DDL provided consistent components, modular flows, and clear governance tools—transforming a fragmented ecosystem into a cohesive, flexible, and sustainable design system.

SUMMARY

Sector: Internal | Citi Digital Design Language (DDL)

My Role: Design Director | Creative Technologist

Challenge:

Create a new mobile native ADA compliant DS utilizing patterns defined by Apple's Human Interface Guidelines (HIG) and Google's Material Guidelines.
Update the outdated existing web DS to be ADA compliant and address gaps with branding to align across components.
Citi's consumer product line is extensive covering everything from banking and credit cards to mortgage and investments so each part of the system needed to be flexible and incorporate the needs of each lines of business.

Outcome: The enterprise-wide Design System delivered a unified, ADA-compliant framework that streamlined design and development across Citi’s digital ecosystem. Built on a component-driven model, it provided scalable, reusable patterns that ensured consistency while reducing design and engineering overhead. By making the system open and collaborative, teams across lines of business could not only adopt but also contribute to the evolution of the library—creating a living system that balanced governance with flexibility. The result was faster delivery, improved accessibility, and a cohesive customer experience across platforms.

Design Principles

Built off of the existing principles to unify across teams and platforms, but these help guide the design, internal teams (product, business, and engineering), and external organizations that would support marketing or other business efforts (agencies, CRM, etc). The principles were were backbone for change, innovation, and process when leading a design system for an enterprise global design team.

creating a foundation

The Citi app had grown increasingly fragmented, with multiple product teams introducing custom components and patterns that undermined cohesion. Given that over 70% of our customers use iPhones, addressing this inconsistency was critical. The existing style guide lacked depth and clarity, offering little support for teams to adopt a consistent design approach.

Starting with the foundational elements and other related guides of styles and content we started to shape the cohesive experience across all platforms.

Styles and Segments

Citi’s customer segments are driven visually by color and brand, each having it’s own DS theme that can tokenized to change between segment quickly and seamlessly.

Flexible Framework - Component Driven

Components are the core of the framework, enabled to be modularized and customized to fit the business need or task. The unique properties enable designers and teams to stay aligned while maintaining consistency and increasing productivity. All components go through a rigorous standards review including ADA compliance thus improving the downstream reviews for go live.

enabling teams - Documentation & Team

It’s important in a design language the team is enabled with a framework and tools but also with documentation on usage and patterns. A dedicated team promotes and governs the overall usage and evolution while acting as representatives to the rest of the team.

The community is encouraged with regular open house meetings, playbooks, and open libraries. Also, a revolving door of sponsors and champions across teams promotes education and federated representatives.

Designing the Customer Experience

Designing Citi Self Invest required building a fully native, multi-platform experience from the ground up. Achieving platform parity was critical—allowing customers to seamlessly trade, research, track progress, and transfer funds anytime, anywhere. We began with market and consumer research to define our audiences, then created a roadmap that aligned features with both user needs and business goals.

Through rapid prototyping and an agile design process, the team was able to adapt quickly based on feedback while maintaining continuous alignment with internal governance and leadership.

learnings and outcomes

Building an enterprise Design System taught us that success depends as much on governance and adoption as on design quality. We learned that flexibility, scalability, and clear communication are critical for meeting the diverse needs of multiple business lines while maintaining consistency. The outcome was not just a unified design language, but a framework that accelerated delivery, reduced design debt, and improved customer experience across platforms. Most importantly, it established design as a strategic partner—enabling teams to innovate while staying aligned to a shared vision.