Unifying online banking journeys at scale
I was the first ever Design Technologist Intern at Canada's largest bank! During my time on the Design Platform team, I contributed to a major release of our core UI library, developed tooling to accelerate design workflows, and learned about the challenges + considerations that come with building infrastructure for growing teams of 150+ designers across online banking products with over 3 million customers.
As teams scale and technology advances, design systems evolve to serve changing needs. Beyond maintaining a component library, we invest in documentation, education, and fostering contribution to keep maximizing value when it comes to helping teams work together to provide consistent digital experiences.
The arrival of Figma's variants + auto layout improvements gave us the capacity to bring design components closer to how they're represented in code. We took the opportunity to rebuild our entire library, ironing out inconsistencies and revisiting layer structures in the process. This was a huge project that I contributed to, up to its release!
No component is perfect
I started the reconstruction process for each component by analyzing the existing version and finding instances across other teams' files to see how they were being used. The new component, living in Figma, should allow flexibility of use to the extent of the coded component's behaviour, while avoiding the traps of becoming unnecessarily complex, and hopefully being unbreakable.
In a sea of variant combinations and nested components, I eventually realized I'd never make the "perfect" component. Every solution posed tradeoffs between simplicity, adaptability, and accuracy. Like most things, it's never black and white – we find a balance somewhere.
But, we don't stop at building components, because it's just as important to make sure people actually know how to use them. I got the chance to do a small revamp of our stickersheets, making them a place not only to quickly access design-ready components, but centralize resources and provide guidance on resizing, layer structures, naming, and variants.
It was really valuable to be surrounded by team members with a variety of backgrounds, from research, content, interaction, visual design, QA, to development. I learned that welcoming diverse perspectives in conversations is essential to design for as many people as possible.
With the major release of the new library, there were quite a few changes, especially surrounding text and colour tokens, that were a pain to manually update. I thought it would be cool to optimize some of the repetitive processes, so I learned to make a Figma plugin!
It searches selected layers for text, and swaps compatible layers with updated text and colour tokens, while maintaining other properties. This means that designers can select a handful of wireframes and migrate tokens with one click!
During the development process, I determined MVP functionalities through getting feedback from teammates who helped test! I shipped the plugin, created a guide in Figma showing how to use it, and presented a demo for all of the designers in our department.
Huge shoutout to Brad, Ali, Vishalii, Nicole, and the Design Platform team for making my time 1000x better! Due to the confidential nature of my work, I've left out a lot of information. If you'd like to hear more, let's chat!