Citibananex Design System
Define design principles
The team, complying with the main guidelines of Citibank, establish a set of design principles and UI components, based on Atomic Design that will be used and consistent across the bank platforms.
We choose a color palette that evokes trust and security for the users, and also respect the standard interactions in digital platforms. This is documented as the typography guidelines for headings, body text, and other elements. Design a set of icons that are relevant to banking features and actions.
Iconography
The team separate in categories that were more accurate for most of the uses. We do a card sorting of categories and by the end of the whole UX team decision, We create a 8px base for sizes, also a solid and a outlined version of each one of the icons. Here are some examples:
Layout and Grid System
Establish a flexible grid system that provides consistency in layout across various screens and devices. This helps in maintaining a harmonious arrangement of elements and content. Consider responsive design to ensure a seamless experience on both desktop and mobile.
Atoms to molecules
A molecule in Atomic Design is the union of different atoms (the smallest unit of particles that can exist) to form a more complex UI element.
Interaction Patterns
We also define the interaction patterns of the components, such as how buttons behave, how forms are filled, and how data is presented. Pay special attention to transitions, animations, and micro-interactions that enhance the user experience without overwhelming or distracting.
Documentation and Training
We compile all the design guidelines, components, and assets into a comprehensive documentation. This serves as a reference for designers, developers, and other stakeholders. Conduct training sessions to familiarize the team with the new design system and learn to use it.
Iteration and Collaboration
A design system is not static; it’s considered as a living organism . We encourage to the whole designers on the different teams to approach the Bluebox committee with their specific needs. For us to sit, make test and be in continuous improvement by gathering feedback. Regularly review and update the design system to accommodate changes in technology, user needs, and industry trends
