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
• Page Analysis
• Voice of guest (VOG)
2. UX Research
• Competitor Study
• Target Audience Analysis
• Layout Testing
• Usability testing
3. UI Design
• User Flow
• Wireframing
• UI Design
• Prototyping
4. A/B Testing
• Design Interaction
• Copy-Strategy
• Prototype Testing
User Research
By testing multiple variations of layouts we improved the basic structure of the booking flow and avoided wasting time on corrections for the UI design.
Learnings:
-
User comments about the desire to sit with their family, they are more likely to enter in information for all users, and this information can be passed into a downstream tool like check-in.
-
Users like a more transparent message for unselectable flights.
-
Making the other options transparent as people described as “being locked out”.
-
Run A/B tests on the verbiage used on the CTA’s.
-
A/B test the ‘continue to payment’ button on the payment page and if it should be disabled until all three options have been selected vs giving users the option to skip selecting any options.
-
Combining the “+” and “-“ buttons as well as a form of confirmation in the option of each extra.
-
Auto-expand the pricing summary for mobile users.
-
Users want to see both sticky and the text block version of the pricing summary
And more…
Scrolling horizontal vs Dropdown
Flight informations collapse vs not
UXR Customer Reviews
It is important to know how our guests are feeling about every experience and to heat them. It will improve their experiences and increase the company revenue. Basically a “Win-win situation”!
Thisisastory
“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.”
McGriddleMan
“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.”
Dinolane
“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.”
+ 99 comments
User Interface
Component design and RBF design system
WJ 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.
Last minute updates
One of my last projects at WestJet into the Responsive booking flow was the redesign of the “Extra page”. It was a project we worked on for around two (2) months.
The project process included:
-
“Usability testing” (e.g. Testing the Worst Case Scenario, Happy Path -
Two flights, multiple segments, and unavailable cabin selections. The worst-case scenario would include most scenarios). -
Creation of persona(s)
-
“User Research.” (e.g. looking at our competitors and what they are doing/looking for existing UXR/testing existing websites/platforms before even starting working on our own project.)
-
Meetings/brainstorming/ideation sessions with the entire team (e.g. PO, PM, Devs, Designer, Business, and myself).
-
Constant meetings with the Development team to ensure that the new flow/new components are doable and solve the key problems before the project goes to QA.
The mock-ups were ready for QA and then 3 days before the deadline of our sprint we got new requirements from the business so we had to re-do the entire bag section. I contacted the team members right away to talk about it and to brainstorm about the new requirements and how to best meet the user needs and create a great experience that fits both the new needs of the users and the business.
We identified the new goals, explored new ideas, gathered relevant new data, came up with a solution, and took action very quickly. Thankfully we succeeded and the mock-ups were ready on time for QA.
Westjet - Responsive Booking Flow
Testing, designing, collaborating, and making new decisions based on data in order to improve the user experience of WestJet's responsive booking flow.
