Citi Digital Design Language

Client: Citi
Role: Creative Direction / UI Design
header

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 on-going 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 create more sophisticated components rooted in those elements, and finally, use 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 them a way to give us input and evolve the system.


RESEARCH AND TESTING

Everything starts with research and testing

We tapped into a variety of 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 informed our design principles and roadmap. Once we started to build the language we then tested all the elements, organisms and started to assemble pages so we could test the individual parts as well as testing 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.

NY Times Start with the basics. The foundation of the Citi digital design language includes base elements like fonts, color palettes, tone of voice guidelines and more. In addiiton to the design foundation we also created other parts of the foundation including Content Principles and Style Elements for help developing a effective and on-tone messaging, development tools and technical guidelines for testing, staging, deployment and accessibility as well as the design principles listed above.

COMPONENTS

Create freedom in a framework.

Components take on their own properties and serve as the backbone of our design systems include things like buttons, breadcrumbs, menus, modals, and tables. By creating these, it 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.

Bringing it all together. Components can now combined to form modules which are groups of components joined together to form a relatively complex, distinct section of an interface. Modules can consist of similar and/or different component types. For example, a masthead module might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” module might consist of the same components repeated over and over again. MODULES

WORKS WITH EVERY FORM FACTOR

Unique variations for web, iOS, and Android

The Citi Digital Design Language has the core set of components that were 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.

NY Times Easy to pick up and use with a low and hi-res sticker sheet, and coded components. Our master DDL file. Contains modules, grid, padding and components. When designing a Citi digital experience, start here.

SUPPORT SYSTEM

Tools, guidelines, downloadable elements, and a dedicated team.

Too many design systems fail because they are launched in massive static, PDF’s with have no support system that allows for it 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, and it is all 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 get access to all variables of the components and external developers can get access to the bootstrap code to develop their own experiences.

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave