Air Miles Pattern Library

Creating a new community of practice that breaks down the silos between dev and design.

Make it easier to do the right things, and harder to do the things that aren't

In an effort to improve collaboration and reduce the time it takes to launch new products, some colleagues and I formed a community of practice with members from several teams and divisions at AIR MILES. In the CoP, we went through an extensive discovery process to understand the pain points, and landed on several initiatives that could dramatically improve the speed, quality, consistency, and maintainability of our projects. Most importantly, I wanted to fix some key code problems and improve communication and collaboration between the UX team and developers.

Along with several process improvements, we launched the AIR MILES' first pattern library. It consists of documentation of Air Miles' design system that is tied to very modular CSS styling that can be pulled into any web project (no more heavily customized bootstrap!). I'm also building some accessibility tooling and processes to help ensure that new products are built to be accessible from the start. The pattern library is already being used in several different environments, and it is drastically reducing the time to build new pages.

Outcomes

The pattern library has been a great opportunity to get many different developers on the same page in terms of code standards, naming conventions, and other front-end best practices. Having a shared vocabulary to describe the building blocks of different projects helps avoid confusion, improves code maintainability, and speeds the workflow of both designers and developers.

Check out the first release here: pattern-library.airmiles.ca

To learn more about what we built, and why we decided to build it, get in touch!