Citibanamex
Design System
Creation of the unified design system for all Citibanamex digital platforms, based on Atomic Design — with consistent components, iconography and interaction guides.
Creation of the unified design system for all Citibanamex digital platforms, based on Atomic Design — with consistent components, iconography and interaction guides.
Across the bank's different platforms, we created a committee that conducted in-depth research to understand our users, their needs and the competitive landscape, identifying design trends in the banking and financial industry.
The main goal was to provide bank users with a complete, visually unified experience across their different digital platforms.
The team, following Citibank's main guidelines, established a set of design principles and UI components based on Atomic Design for consistent use across all bank platforms.
Evoking trust and security, respecting standard interactions on digital platforms.
Documented guides for headings, body text and all other typographic elements.
Icon set relevant to banking functions, with solid and outlined versions on an 8px base grid.
The team separated icons into more precise categories for the most common use cases. We ran a card sorting session and the full UX team defined the final categories. We created an 8px base for sizes, with solid and outlined versions of each icon.
We established a flexible grid system providing consistent layout across different screens and devices, maintaining a harmonious arrangement with responsive design for a fluid desktop and mobile experience.
A molecule in Atomic Design is the union of different atoms — the smallest unit that can exist — to form a more complex UI element.
We defined component interaction patterns: how buttons behave, how forms are filled and how data is presented. Special attention was paid to transitions, animations and micro-interactions that enhance the experience without overwhelming the user.
We compiled all design guidelines, components and assets into comprehensive documentation serving as a reference for designers, developers and other stakeholders. We conducted training sessions to familiarize the team with the new system.
