Citi's atomic component library extends across multiple digital platforms iOS, Android, and Web. It serves as a crucial resource for experience designers and engineering teams, empowering them to create both new and existing product flows efficiently and cohesively.
The existing design system lacked refinement and updates as the product and tools evolved. Our core design language relied more on design rules than on completed templates or pages.
( Research )
The core factors that shaped the research process included understanding which product teams owned which features, mapping engineering workflows across platforms, reviewing the sketch app to code integration process, and identifying pain points for designers and engineers.
-
What product teams owned which features?
-
Understand the current workflows of engineering partners on the various platforms.
-
Review the internal integration process from sketch to code.
-
Pain points for current designers and engineers.
-
Current testing environments and apps used by engineers.
( Design Process )
The foundational work moved from inventory and audit into theming and sharing workflows that could scale across iOS, Android, and web.
-
01. Inventory — Gathered the most frequently used flows from current design files across teams to restructure the design system effectively. Foundational elements were redesigned in Sketch.
-
02. Design Audit — Compared redesigned flows and observed inconsistencies in brand colors, spacing, font styles, and font weights.
-
03. Theming — Built accessible theming for Citibank segment groups (Blue, Priority, and Gold) with support for dark and light modes.
-
04. Sharing — Used InVision Design System Manager to sync Sketch files, manage documentation, and maintain version history.
-
05. Integration — Connected design documentation with Storybook to support engineering handoff across platforms.
( Results )
The collaboration delivered a refined atomic design system with clearer organization, stronger theming, and better documentation for cross-platform product teams.
-
Redefined atomic component library
-
Theming solution
-
Component organization
-
Documentation and Storybook integration via DSM
-
Naming conventions
