When I arrived at Citi I found a financial institution faced with the challenge of refining their brand across multiple digital platforms with in-house and external creative teams but no unifying design language to do it with. There had been previous attempts at creating a global digital design language but they failed because of too many versions, not being flexible, expandable, or sustainable and they had been created by external agencies who didn’t support them with ongoing communication or governance.
The Citi DDL is rooted in Atomic Design which is a structural design methodology for creating simple, scalable systems made up of foundational elements, then creating more sophisticated components rooted in those elements, and finally, using a series of components to develop full module-based flows. To be successful it had to be mobile-first with a consistent look and feel that is fully ADA compliant, form-factor agnostic, and used by all of Citi’s global in-house creative studios and external agencies.
It was created using an iterative design process where the design work was tested using moderated user research on individual elements of the design language, a quantitative study, focused usability studies, and end-to-end testing. The system is supported by a suite of tools, guidelines, and downloadable elements that help ensure a clear, consistent, and engaging experience through all channels.
Key learnings from this project
A design and engineering partnership is essential
A design system isn’t just created by the design team as you need the design and engineering teams to stay in sync with their design work and then the code that is created to bring the system to file.
Base everything in testing, research, and data
We tested every element, every organism, and even created test pages across all platforms to be sure we got visual consistency and would be able to take any debate out of the design choices we made.
It has to be a living system
We created a dedicated team that worked with all design, engineering, and product teams to ensure all work adhered to the system but also gave the teams a way to give us input and evolve the system.
RESEARCH AND TESTING
Everything starts with research and testing
We tapped into various internal and external resources and research to inform our direction for the new design language. We did primary customer research, heuristic app analysis, customer reviews, customer analytics, and much more to inform our design principles and roadmap. Once we started to build the language, we then tested all the elements and organisms to assemble pages so we could test the individual parts and test them as a system.
DESIGN PRINCIPLES
Citi DDL Design Principles
These principles help guide the entire development and design of the Citi Digital Design Language. After launch, they then were used by all internal and external creative teams as the guide rails for the ideation, production, and review processes to ensure consistency and alignment with the brand.
Keep it Simple
Create effortless, intuitive interactions that accelerate customer progress. Challenge the complicated and cluttered. Never get in the way of users doing what they came to do.
Make it Meaningful
Create purposeful experiences that deliver value with intent and precision. Provide useful solutions that users will come to count on.
Empower People
Anticipate user needs. Create interactions that make it easy for users to make smarter choices.
Be Practical
Craft experiences that can scale. Synchronize user interactions across multiple touch-points. Push interactions that surprise and delight while still adhering to requirements and regulations.
Be Human
Respect the customer’s emotions and needs. Personalize experiences to reflect users’ unique preferences and behaviors. Support users with reliable service at every step.
Be Accessible
Ensure your design meets ADA compliance standards. Consider functionality and compatibility with assistive technologies like site readers. Create clear content that can be understood by all users, regardless of literacy level or ability.
COMPONENTS
Create freedom in a framework.
Components take on their own properties and serve as the backbone of our design systems including things like buttons, breadcrumbs, menus, modals, and tables. Creating these gives designers the ability to create experiences any way they want, but they do it with consistent components, with consistent behaviors and all of it passes ADA standards. This saves us time in design and development because we don’t have to reinvent the same things over and over again.
WORKS WITH EVERY FORM FACTOR
Unique variations for web, iOS, and Android
The Citi Digital Design Language has the core set of components designed to work in any digital experience, but we needed to create unique variations for different form factors. We did this because you don’t want your apps to look like a website or visa versa. Also, mobile operating systems like iOS and Android have unique elements like form fields and interaction patterns that need to be taken into account for the system to be successful on these platforms.
DEPLOYMENT
Used in all global Citi digital experiences
The Citi Digital Design Language is the standard to which all Citi digital experiences are being built across the entire company. This includes all-new designs for web and mobile apps, as well as work to retro, fit the nearly 60k+ pages across all global digital touchpoints.
SUPPORT SYSTEM
Tools, guidelines, downloadable elements, and a dedicated team.
Too many design systems fail because they are launched in massive static PDFs with no support system that allows for them to grow and change and no guidance or enforcement to be sure it is being used correctly. The Citi DDL has a dedicated team that works on the two main areas of the system – the maintenance and documentation that needs to go into the day-to-day usage of the system and the roadmap and backlog that define where the system is going. They communicate all of this work through weekly update releases to the system, which are documented in a central website, Sketch sticker sheets, and bi-weekly meetings. The website allows users to see all the thinking and foundational work that went into creating it but more importantly, they can try out all of the elements of the Citi DDL to see how they function and look through all the responsive breakpoints. Internal Citi developers can access all components’ variables, and external developers can get access to the bootstrap code to develop their own experiences.