In 2023, CIBC launched 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 maintained, it also brought a new design language, new navigation structure, introduced responsive web design to online banking, tried to unify the experience between web and mobile, while also trying to set up a design foundation for future projects to follow. The timing was very convenient for a new design system to be put together.
Introducing True North or TN, CIBC Digital’s design system.
Prior to this, there wasn’t a design system on the “secured” team at CIBC. There had been previous attempts at making one, but they all stopped at the styleguide-only stage.
True North began in a very similar fashion – a design system needs a design language to begin with. The first set of TN components were very targeted for the then-upcoming home page redesign (I’ll write about that project one day 😂).
How TN differentiates from past attempts
A set of component was, however, just a starting point and was not a design system on its own. Prior to all the redesign efforts, a couple major problems existed from our previous implementation workflows:
Development results often “don’t look right” comparing to design mockups
Different projects constantly whipping up their own versions of the same UI element
To avoid these accuracy and consistency problems in the new design system, our design team started working with dev leads and accessibility consultants and built towards a true design system, where a strong linkage exists between design and dev, and a component in Figma has a match on the code side.
Growth
Things started constantly evolving from this point. We made all sorts of improvements on visual design, UX, and tech.
An immature design system had a lot of room for trial and errors. Looking bad at it, we’ve also made some truely bizarre mistakes along the way, like at some point deciding that the base unit of spacing would be 1px different between our web and mobile platforms. Thankfully this one was corrected.
Whenever we update the UI Kit, I also write brief release note to inform the design team of changes made, things to be aware of, etc. Occasionally though, I also get to have a bit of fun.
And now, results
Below is a small showcase of things built with True North:
Today, True North is the design system used across 10+ delivery squads at CIBC, and it powers every new online banking page and many new iOS and Android mobile banking features. An entirely new CIBC USA Digital Banking was built with True North as well. I still lead the effort to refine and improve the system.
- Created sometime in 2022.
- Shoutout to Eddy Guinasao, Kristi Kavaja, Carol Farah, Ruby Li, James Catt, Amrik Deol, Andrew Willison, Rafael Abe, Brian Booth, Azeem Ali, and other contributors over the years. TN wasn’t possible without them.
