Mise à niveau anticipée
Donnez à WestJet Les membres Gold et Premium l'opportunité de surclasser leur cabine 48 heures avant leur vol au lieu de 24 heures pour un meilleur tarif.
Expérience utilisateur • Interface utilisateur • Recherche • Architecture de l'information • Prototypage
Donnez à WestJet Les membres Gold et Premium l'opportunité de surclasser leur cabine 48 heures avant leur vol au lieu de 24 heures pour un meilleur tarif.
Expérience utilisateur • Interface utilisateur • Recherche • Architecture de l'information • Prototypage
Intro
Westjet responsive booking flow is divided into seven steps.
I mainly improved steps four (Seat map), five (Extra page), six (Payment), and seven (Confirmation).
Not all projects have the same starting points or goals, so my approach and my decisions vary from project to project, based on the needs. For example, I am routinely asked to design a new component to add to an existing channel, to create a new platform with complex workflows, or to quickly deliver a creative design or even a Motion Animation for a new illustration.
I will discuss below my approach applied to this project to help you better visualize my workflow.
Project approach
1. Data Collection
-
Conducted in-depth page analysis to identify pain points and opportunities
-
Gathered insights from the Voice of Guest (VOG) to understand user needs and preferences
2. UX Research
-
Performed competitor benchmarking to identify industry best practices
-
Analyzed target audience behavior and preferences to inform design decisions
-
Tested layout variations to optimize content structure and readability
-
Conducted usability testing to validate user flows and interaction patterns
3. UI Design
-
Defined clear user flows to ensure intuitive navigation
-
Created wireframes to structure and plan page layouts
-
Developed high-fidelity UI designs aligned with brand identity
-
Built interactive prototypes to demonstrate functionality and gather feedback
4. A/B Testing
-
Evaluated design interactions to determine the most effective solutions
-
Tested copy strategies to maximize clarity and engagement
-
Ran prototype testing to validate assumptions and refine final designs
User Research
By testing multiple layout variations, we were able to optimize the structure of the booking flow, improving usability and reducing the need for time-consuming corrections in the UI design.
Findings:
-
Users expressed a strong desire to sit with their family, which encourages them to enter information for all passengers. This data can be leveraged downstream in tools like check-in.
-
Users prefer transparent messaging for flights or options that cannot be selected. Making unavailable choices visually distinct prevents the feeling of being “locked out.”
-
Conduct A/B tests on CTA verbiage to determine the most effective language for user engagement.
-
Test the “Continue to Payment” button on the payment page to decide whether it should remain disabled until all options are selected or allow users to proceed without selecting any extras.
-
Combined the “+” and “–” buttons with a confirmation step for each optional add-on, streamlining interactions.
-
Auto-expanding the pricing summary for mobile users improved clarity and reduced friction.
-
Users appreciated having both a sticky summary and a full text block version of the pricing details for reference.
These insights directly informed design decisions, ensuring a more intuitive and user-friendly booking experience while reducing errors and friction in the flow.
Without big data, you are blind and deaf in the middle of a freeway.
Customer Reviews
Understanding how our guests feel about every interaction is crucial for creating meaningful experiences.
By actively listening and responding to their needs, we can not only enhance their overall satisfaction but also drive loyalty and increase company revenue. In essence, it creates a true “win-win” situation, our guests enjoy better experiences, and the business benefits from stronger engagement and growth.
“Option A is the most user friendly option allowing each section to be clearly visible, center aligned for easier access and I prefer the flow of this option over the others.”
“I don’t trust the sliders as much. I preferred the option with the confirm button because it reassures me that the baggage selection is confirmed/saved.”
“I prefer that kind of bar that follows me when I scroll the website because I can always see my options. It’s easier to select the different passengers.”
WestJet New Seat Map
Auto Seat Selection Segment Changer:
Users did not like the previous experience because it was disorienting even with the segment indicator at the top. Users felt more in control of the version where users have to select the next flight CTA. It allowed them to review or change if they wanted before moving forward.
Help users understand what segment they are selecting a seat for and understand not all segments are eligible for seat selection.
We saw on the user test:
-
Including a visual stepper helps users have confidence in the flight in focus
-
Users like a more transparent message for un-selectable flights
-
Users liked the basic up-sell with a bolder look and feel
-
The auto-select seats was a big hit
-
The sticky elements helped mobile users
Recommendations:
-
We recommended a visual indicator
-
It increases users' confidence in the flight being selected and showcased users ability to easily navigate through the segments of their flights.
-
We recommended the addition of the message for not selectable segments.
-
We encouraged a message similar to previous version to be used with the word error removed.
Challenge:
Having a 100% accessible seat map without using colours for the comparison between the cabins but using elements instead.
The Digital Check-in (DCI) Seat Map:
All the insights for the DCI Seat Map were already collected in the seat map of the responsive booking flow. The only difference was that the seat map is using the newest “WestJet Design System”.
Background:
This project into the responsive booking flow was the most challenging project I’ve ever had in my entire career and the most fun to do if you considered making the seat map 100% accessible for every guest.
It was an enormous collaboration between myself and the team to arrive at creative solutions to make this work. we've decided to use “Elements” instead of colors to differentiate between the cabins which were tricky, but it did work. Sometimes the smallest changes can have the biggest positive impacts on our users.
It was a win that reflected our values and a great example of working as a team is key to success to get great results.
*The following design of the Seat Map has been created with the New WestJet Design System and implemented only in the Digital Check-in flow for the first phase of our redesign project.
User Interface design
Designing reusable components and a cohesive, responsive booking flow system to ensure a seamless and consistent user experience across devices.
Final adjustments
One of my final projects at WestJet within the responsive booking flow was the redesign of the “Extras” page, a project that spanned approximately two months. The goal was to enhance the user experience, simplify interactions, and ensure the flow aligned with both business needs and user expectations.
Project Process:
-
Usability Testing: We tested a variety of scenarios, from the “Happy Path” to the “Worst Case Scenario,” which included two flights, multiple segments, and unavailable cabin selections. This approach helped us anticipate potential friction points and ensure the new flow would work across all use cases.
-
Persona Development: We created detailed user personas to guide design decisions and keep the focus on real user needs throughout the project.
-
User Research: Before diving into design, we analyzed competitors and reviewed existing platforms, studying their strengths and weaknesses. This allowed us to establish a solid foundation for our own design work.
-
Collaboration & Ideation: Regular brainstorming sessions with the cross-functional team, including Product Owners, Project Managers, Developers, Designers, and Business stakeholders, ensured that ideas were aligned, practical, and user-centered.
-
Developer Coordination: We maintained ongoing communication with developers to ensure that new components and flows were technically feasible, solving key problems before the project reached QA.
Despite thorough planning, three days before our sprint deadline, the business introduced new requirements for the baggage section. I immediately coordinated with the team to brainstorm solutions, re-evaluate goals, and explore new design ideas. We gathered additional data, iterated on concepts, and developed a solution that addressed both user needs and updated business requirements.
Thanks to quick collaboration and agile decision-making, we successfully updated the mock-ups and delivered them on time for QA, ensuring the redesigned Extras page met its objectives without compromising quality.
