Citi Odyssey

Retail Banking Experience

Design System Lead - SVP
Citibank
2019 - 2021
In-house DCX Design Team
Singapore
Roles
Design System · UI · UX · IA · Prototyping · Documentation · Design Ops
Retail Banking Experience

Citi Odyssey was a multi-year redesign of Citi’s retail banking experience across 15+ markets. I worked across the design system, information architecture, UX patterns and prototyping, helping create a more consistent and flexible experience across products and platforms.

A key part of the work was creating a modular foundation that could adapt to different banking products and markets. This included rethinking the information architecture and introducing tailored dashboards, contextual upsell and self-service patterns to make the experience more relevant to customers.

I worked closely with the technology team to turn these ideas into a universal component framework and application architecture. Prototypes helped us explore and validate concepts early, while documentation, new tools and design processes helped make the system scalable across the region.

Business impact

The numbers made the case for the system. Conversion, support calls, rollout time and NPS all moved, and they moved because the foundation was shared.

Laptop, tablet and phone showing the Odyssey banking dashboard next to a panel of business results
The same account overview on a phone, a tablet, a laptop and a large display

Multi-platform

One system, from phone to large screen. The layout adapts rather than being redesigned.

Rollout speed

Fifteen plus markets in under nine months. A design system used as a business tool, not just a component library.

Five Citi login screens for different Asian markets, each with its own skyline
Phone account overview surrounded by contextual cards for card renewal, activation and upgrades

Contextual by design

Upsell and self servicing live inside the account overview, shown only when they are relevant. Fewer calls, higher NPS and a real lift in digital sales.

Standardised dashboards

Every product got the same dashboard skeleton. What changes is the content, tailored to the account, not the layout.

Three phone dashboards for different account types, standardised in structure
A row of product dashboards for loans, investments, deposits and cards

Mobile to large screen

The mobile patterns scale up rather than being redrawn. A tablet or desktop view is the same system with more room.

Wealth overview on two phones and the same overview on a tablet
Pages from the Odyssey design language documentation on a starry background

Design language

Over 150 pages of documentation kept design and technology in step across the region.

Theming support

Six customer segments, one code base. Theming turns a new segment into a token set rather than a new app.

Six themed variants of the app for the Citi customer segments

Prototyping

Real data, real devices, instant test cases. We could configure different scenarios in seconds, without build cycles or expired sessions getting in the way.

Prototype screens for selecting a customer segment, market and language
← Back