Research & Understanding
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.
Design principles
The team, following Citibank's main guidelines, established a set of design principles and UI components based on Atomic Design para uso consistente en todas las plataformas del banco.
- Color palette evoking trust and security, respecting standard interactions on digital platforms
- Documented typography guides for headings, body text and other elements
- Icon set relevant to banking functions and actions
Iconography
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.
Layout and Grid System
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.
From atoms to molecules
A molecule in Atomic Design is the union of different atoms (the smallest unit that can exist) to form a more complex UI element.
Interaction patterns
We also 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.
Documentation & training
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.
A living system
A design system isn't static — it's a living organism. We encouraged all designers from different teams to approach the Bluebox committee with their specific needs for continuous improvement based on real feedback.
