In 2023, CIBC published a design refresh of their online and mobile banking platforms.
It was a very, very ambitious project. In addition to reducing the total number of platforms that need to be maintaind, it also brings a new design language, a new navigation structure, introduces responsive web design to online banking, tries to unify the experience between web and mobile, while also trying to set up a design foundation for future projects to follow.
All of this calls for a design system to come in and serve as the connecting fabric.
Introducing “TN”.
Prior to this, there wasn’t a design system on the “post sign-on” team at CIBC. There had been attempts at it, but no design system emerged from said attempts. There were some problems, like these:
Development results often “don’t look right” comparing to design mockups
Different projects constantly whipping up their own versions of the same UI element
Well we said no more to that! We started the journey towards a design system by estabishing a basic catalog of components. They look a bit something like these:
A key differentiator of our design system execution comparing to the previous times is the emphasis on dev-design collaboration. UI components were created as shared entities across the board, so designers and developers have a common understanding of them, making design handoff smoother.
It was a challenging task, convincing people that “if everyone puts some effort into this it’ll be way easier for all of us in the future” was tough, but with an enthusiast group of people and a bit of help from luck, we have reached the stage of seeing some sucess. Below is a small showcase:
You might have noticed some blurry bits here and there. That’s because these are not design drafts and they are in-production screenshots – I definitely picked the better looking ones to show, but it is proof to me that the new system has started to scale. I have no doubt that I’ll have more TN stories to share.
- Project began: sometime in 2022
- My role: one of the designers of the current CIBC mobile & online banking home page, drafter of components, maintainer of TN UI Kit, host of governance sessions, advocate of design systems
- Shoutout to Eddy Guinasao, Kristi Kavaja, Carol Farah, Ruby Li, and other key contributors to this initiative. They are all great design people!
Lyndon Pan 