Extending the Air Miles Design System within the new rebrand

Supporting the AEM rollout with brand-new components after the Air Miles rebrand officially launched.

My Role

UX Designer

Collaborator

Senior UI Designer

Timeline

1 month

Tools

Figma, AEM (Adobe Experience Manager)

Component Highlights

This section showcases the core components I designed as part of the rebrand rollout on AEM. Each one was created to be:

On-brand — Fully aligned with the new Air Miles visual system
Flexible — Adaptable to different types of content and page needs
Developer-friendly — Built with CMS (AEM) constraints in mind

Here are the main components I contributed to:

Quick Links Component

A component comprised of a decorative icon, a title, supporting text and a navigation icon.

It was designed to be flexible, allowing the publisher to toggle on or off the supporting text. And can be used on both light or dark surfaces.

It has a default, focus and hover state.

Toggle Switch Component

Designed both the light and dark mode versions of the toggle switch.

Used in various places throughout the site to allow collectors to turn a function on or off.

For further accessibility I added a checkmark icon in the active state. This adds more of a visual cue as to what state it's in.

Carousel Component Parts

Designed to be used on both light and dark surfaces, these are the individual parts used for navigation, control and pagination.

Carousel Component - Assembled Controls

Here is what the completed control section of the carousel looks like.

Carousel Component - Light

Here is an example of the full carousel component on a light surface.

Carousel Component - Dark

Here is an example of the full carousel component on a dark surface.

Overview & Context

What was the work?

Following the official launch of the Air Miles rebrand, I was tasked with designing new UI components needed for upcoming marketing and informational pages being built in Adobe Experience Manager (AEM).

While not a traditional design system initiative, this work directly contributed to the evolution of the Air Miles design system — helping ensure consistency and usability across newly branded digital experiences.

Why did it matter?

With the rebrand officially launched, all new digital components were expected to reflect the updated look and feel — including colors, typography, shapes, and illustration styles.

New AEM pages were being planned, but the design system didn’t yet include all the components needed to support these builds. I was brought in to design those missing pieces. Rather than create ad-hoc solutions, I focused on building reusable, scalable components that aligned with the rebrand and could be adopted system-wide.

My role & responsibilities

This work emerged out of a practical need — certain components were required for new pages being built in AEM after the official launch of the Air Miles rebrand. As the program transitioned into its new look and feel, it became necessary to create flexible, reusable components that aligned with the updated brand guidelines.

I was the sole UX designer on this initiative, tasked with translating the refreshed visual identity into components that could support a variety of use cases. This included working closely with developers and content teams to ensure each component was not only visually aligned, but also CMS-friendly, scalable, and adaptable to different page structures.