Design System Work

Component Builder,
Variable Expert

Creating components so versatile, they adopt like a chameleon!

Throughout my career as a Product Designer,

I had many opportunities to work with design systems—but even better, I’ve helped build two large-scale systems from scratch and crafted UI libraries for two startups along the way. It’s been a fun adventure of pixels, components, and variables.

Air Canada

The Compass
Design System

In the midst of a Sketch-to-Figma migration, a new design system was ready to emerge, and I became both a key component builder and a Figma go-to person.

I crafted 19 versatile components for the web library, packing them with advanced variables for flexibility.

As the company migrated to Figma, I played a crucial role in mentoring peers on the fundamentals of component building, using variables, and efficiently utilizing the design library.

Sarah Graham

Design System Lead, Air Canada

"Anna has been an invaluable part of the foundational work for Air Canada's new design system. Her advanced Figma skills are equally matched with her professional demeanour and collaborative attitude. She has been a pleasure to work with!”

Air Canada (Aeroplan)

Aeroplan’s
Workstream Library

As the lead designer for the loyalty team, I identified the need for a dedicated workstream library to house frequently used components specific to loyalty products, an initiative that ultimately led to workstream libraries across Air Canada.

I led the development of the Aeroplan Workstream library, delegating tasks to a junior designer who supported the build-out.

The library consists of 17 reusable components at the molecule and module levels, with detailed documentation covering anatomy, behaviours, layout, and usage rules. This approach significantly reduced design inconsistencies across Figma files.

Kiefer Ortuoste

Product Designer, Air Canada

Anna has been a great collaborator, fellow designer, and mentor. As a newcomer into Air Canada, she’s been instrumental in helping me understand the Aeroplan program and AirCanada’s internal process. She’s easy to approach and is always there to answer any questions I have and provide any feedback on any designs. Her working file’s are alway so organized and easy to follow.”

Bank of Montreal

Documentation for
BMO's Design System

I supported the Design System team by creating documentation for core components such as buttons, links, accordions, and cards.

This included developing do’s and don’ts, anatomy diagrams, and outlining interaction and responsive behaviours.

The documentation provided clarity for designers onboarding to the new design system, helping them understand how to effectively use each component.

Kimberly Chang

Design Director, Bank of Montreal

Anna created much of the design documentation for many of our mobile only features, which requires a different set of skills than for desktop designs. Near the end of her tenure, she also took on the task of documenting updates to the design system, which is critical for the designers who will continue to work on this site. Her willingness to share templates and make the process easier for her colleagues was much appreciated.

Model Living

Crafting a startup’s
UI Library

I collaborated with the co-founder to develop the company’s branding guidelines, selecting fonts and colour schemes to establish a cohesive visual identity.

In parallel, I built the UI library while designing platform products, creating reusable components—such as buttons, links, filters, input fields, and segment controls—to streamline the wireframing and design process.