The Outcome
What we achieved
+
%
Improvement in look-to-book ratio
+
%
Purchase value per booking
-
%
Reduction in design & development effort
01 Your Booking Benefits
Reimagining the Benefit Pill
Positioned just below the booking widget, the original Benefits Pill had a limited role - prompting users to sign in to view their Aeroplan perks or promoting a credit card offer. With the redesign of the Homepage, we saw an opportunity to elevate this feature from a passive reminder to a dynamic, value-driven tool.
Our goal was to surface personalized, actionable Aeroplan benefits directly within the booking flow - helping users make informed travel decisions without friction. As the lead designer, I was tasked with transforming a compact UI element into a rich source of information - without overwhelming the user or compromising clarity.
The key to success lay in distilling complexity: identifying what mattered most to users, designing intuitive micro-interactions, and being careful to steer away from overloading the pill with content.
Phase 01. Discovery
To validate our design direction, I conducted a focused market scan on how leading travel and financial platforms surface complex benefits across the booking and checkout experience. Across airlines (Delta, United, WestJet), mobility platforms (Uber), and financial products (American Express), a consistent pattern emerged:
Benefits are surfaced when they meaningfully impact a decision, rather than buried in account pages.
These patterns validated the use of a pill-based container as a way to keep the booking experience lightweight by default, yet capable of scaling in depth through progressive disclosure.
Phase 02. Design Explorations
With the interaction model validated, the focus shifted to refining how benefits would be structured and presented within the expanded pill. This phase explored how to organize benefit information in a way that remained scannable and resilient to scale.
Through rapid design exploration and internal reviews with design and product partners, I iterated on layout, information hierarchy, and visual treatment, testing how different pill structures handled multiple benefit types.
The horizontal tile layout was selected as it maintains a consistent vertical rhythm, keeps all benefits visible at once, and allows users to quickly compare eligibility, availability, and actions without leaving context
The final information set prioritized decision-support: benefit name, source, availability, expiry, and a clear next action
This ensured users could quickly assess relevance and impact without being overwhelmed, while preserving access to deeper details when needed
Phase 03. Stakeholder Feedback & Iterations
The final phase was highly collaborative and iterative. I regularly presented evolving designs to director-level stakeholders across Product & Design, Brand, and Marketing teams at Air Canada, using their feedback to inform my design iterations and ensuring alignment and buy-in at every step.
My final design organized benefits by both benefit type and issuing financial institution, establishing a clear visual hierarchy that makes complex benefit information easier to scan and interpret. By grouping benefits under dedicated sections for each credit card partner, the interface improves categorization while reducing redundant logo repetition across the list.
Additionally, displaying a clear 'Book by' date sets upfront eligibility expectations, helping users quickly understand time-sensitive constraints and minimizing the risk of missed or expired benefits during booking.
02 Booking Widget Experience
Redesigning the Calendar Date Picker
Situated at the top of the booking widget, trip type selection (round-trip, one-way, multi-city) has historically been visually de-emphasized, nested within a dropdown that many customers overlooked. During the beta launch, customer feedback submitted through Usabilla revealed a recurring discoverability issue: users actively asked for a multi-city option that already existed, signalling a clear gap between functionality and visibility.
This concern was reinforced internally. Leadership pointed to patterns in tools like Google Flights, where trip type selection remains accessible beyond the initial booking widget interaction, particularly within the calendar experience - allowing users to adjust their intent without restarting their search.
Together, these signals prompted us to rethink how trip type selection could be surfaced more clearly throughout the booking flow. The goal is to make an existing capability easier to find, ensuring customers could confidently select the right trip structure at the moment it mattered, without friction or guesswork.
Phase 01. Discovery
I began the design process with a focused market scan across a range of competitors, and found that these experiences converged on similar approaches: trip type selection was made explicit within the booking widget rather than hidden.
Most airlines opted for using either radio buttons or a tabbed interface, and in cases where multi-city wasn’t highlighted as a primary tab, it was still clearly called out through a dedicated link within the booking widget.
Phase 02. Design Explorations
My early design explorations considered surfacing trip type selection directly within the booking magnet using radio buttons or a tabbed layout. However, both options required significantly more horizontal space, introduced layout trade-offs, and would have necessitated substantial restructuring of the booking widget, which would be particularly challenging across mobile, small desktop breakpoints, and longer localized languages such as French.
A Shift in Design Direction
To preserve a clean, scalable booking experience, the team chose to retain the existing drop-down within the booking widget. This would allow the UI to remain simple, responsive, and adaptable without requiring a full redesign or major engineering changes.
However, to address stakeholder and customer concerns around discoverability, multi-city selection was also introduced within the calendar view - a critical step in the booking flow. By adding radio buttons at this moment, we created a secondary, highly visible touchpoint that reinforces and validates the user’s selection, making the multi-city option difficult to miss while minimizing intrusion of the primary interface.
The calendar date-picker went through multiple rounds of iteration informed by stakeholder feedback. Over time, less essential fields such as Departure and Return dates (already visible in the booking widget) and Trip Duration were removed to reduce redundancy and cognitive load. The structure of the calendar was also re-shuffled to accommodate other important pieces of information such as the 'Per person', 'Currency', and price indicators. These changes eventually allowed the multi-city option to be elevated to the top of the calendar view, maximizing visibility at a critical decision point in the booking flow.
Phase 03. Validating Design Decisions
Our user testing validated the effectiveness of the updated trip type interaction. All 5 participants were able to switch between round-trip and one-way using the calendar-based selector. To further validate the design, participants were asked how they would add additional stops while in round-trip or one-way mode; all successfully switched to multi-city.
Notably, users were roughly evenly split between adjusting trip types from the calendar and from the booking magnet, indicating that the added calendar touchpoint was both noticeable and useful. Overall, the design enabled users to confidently navigate trip type and date selection from multiple points in the booking flow.
03 Design System Build-Out
Pioneering the Design System Libraries
As part of Air Canada's transition from Sketch to Figma, the design team took on the mission of establishing a scalable design system and modernizing team workflows. I contributed to both the platform's foundational design system library and its day-to-day adoption. These included building reusable components and crafting detailed documentation capturing development considerations, use cases and behaviours across multiple breakpoints, anatomy diagrams, and interaction and responsive behaviours.
As a lead designer on the Homepage team and recognizing the need for structure beyond core platform components, I initiated and led the Homepage Workstream Library - one of the first workstream-specific libraries to be built out at Air Canada. Built on top of the foundational platform library, it houses frequently used, homepage-focused components and served as a model for subsequent workstream libraries.
Key Impact at a Glance
Led the creation of the Homepage Workstream Library, delivering 10+ reusable components with clear documentation covering anatomy, behaviour, layout, and use cases
Contributed to core design system documentation (e.g. cards, accordions, alerts, tooltips), defining responsive and interaction patterns across desktop, tablet, and mobile
Helped drive adoption of Figma and the new design system, contributing to a ~30% reduction in design and development effort across the Air Canada Digital Product team