AIR MILES

Rebrand Execution + Pattern Library

My role in the complete re-branding of AIR MILES, including process and design work.

project overview

AIR MILES worked with the consulting firm Broken Heart Love Affair to rebrand the organization and re-inspire the collector base. While Broken Heart Love Affair handed off a brief overview of the new branding, the internal UX  and Brand teams determined how these elements came to life across our digital properties.

the challenge

Timelines were incredibly tight for this project. There was just over two months between the kick-off event and the launch. In this time, we had to update all pages across both the AIR MILES website and mobile application. Our team immediately understood that it would not be possible to launch with all elements up front and that we would need to take an iterative approach to the project.

Screenshot of branding brainstorming exploration.

brainstorming sessions

I first led the team through a brainstorming session to determine how we could translate the look and feel of the new brand to our digital properties. This mind mapping session was run using FigJam with the entirety of the UX Team and the Brand team in attendance. We started by listing adjectives that came to mind when thinking of the new brand. We used dot voting and discussions to determine which adjectives we would pursue before creating a mood board. Finally, we spent time designing conceptual mock-ups and discussing those we felt were most effective. This session was critical as it aligned the team to one vision and inspired all our designers, as the team began to work on different parts of the initiative.

scope definition

It was not possible to complete the full rebrand within the allotted timeline. This meant our next step was to determine and validate a scope that would be feasible. I worked with our tech teams to put together a presentation for our executive suite. This included three different stages for the rebrand that we wanted to achieve. Ultimately, we landed on the MVP+ which included updating all colours, logos, primary icons, imagery, and typography headings.

Screenshot of the proposed design iterations from MVP to MLP on airmiles.ca.Screenshot of the proposed design iterations from MVP to MLP on the AIR MILES app.Screenshot of the selected MVP designs that included homepage redesign and updated typography on headers.

decision process

Moving into our MVP+, we still had many decisions to make in order to fully dive into the majority of the design work. It was an overwhelming process, but to get our team started, I began to run bi-weekly meetings with our Core Four — the four individuals who made the final decisions. These lasted a few weeks before transitioning into design approval meetings with our brand team and stakeholders.

Screenshot of the Core Four decision session presentation: Review of the new brand philosophy of Make the powerless feel powerful.Screenshot of the Core Four decision session presentation: Image Aesthetic selection.Screenshot of the Core Four decision session presentation: Brand Attribute Adjectives selection.Screenshot of the Core Four decision session presentation: Grid and layout discussion.Screenshot of the Core Four decision session presentation: Brand Colours purpose selection.Screenshot of the Core Four decision session presentation: Colour Combination selection.Screenshot of the Core Four decision session presentation: Typography Colours selection.Screenshot of the Core Four decision session presentation: Background Pattern Discussion.
High fidelity designs of the Personal Shopper landing page.High fidelity designs with rebranding documentations of the Personal Shopper landing page.High fidelity designs of the RMG partner landing page.

designs

To begin the page design process, I determined which pages and experiences would require high-fidelity wireframes for our developers and which redesigns were straightforward enough to only require screenshots and documentation. I then designed and presented high-fidelity wireframes for our credit card pages, our personal shopper flow, the RMG page, and the email unsubscribe flow. Each was accompanied with documentation for developers.

documentation

A large part of my role at AIR MILES is supporting our many micro-sites. These sites were determined to only require screenshots and documentation. The build teams would then make the necessary changes to utilize our new look and feel. I provided developers with detailed specs and tested the pages as they were built to ensure that each aligned with our rebrand.

Screenshot of the Goodyear partner splash page with documentation to instruct which changes to make for the rebrand.Screenshot of the Concern Resolution Process splash page with documentation to instruct which changes to make for the rebrand.Screenshot of the Security splash page with documentation to instruct which changes to make for the rebrand.

pattern library

After the launch, we still had a lot to do to reach our ideal state. One of my new tasks has been creating and managing a web pattern library that will grow as we work through the design of our new experiences (and update existing ones).

Screenshot of the current airmiles.ca pattern library in the desktop view.

< Hashtag Local Branding + Site Design

Illustration >

IT LAUNCHED!

Although our rebranding efforts are not complete, I am very proud of the work we accomplished. I am currently building out a pitch to closer align our brand elements (such as colour and images) with the marketing campaign. This will ultimately lead to a more cohesive experience for users. We will continue to update our site with new components to elevate the AIR MILES experience.

Explore our re-branded site!