This is a case study for the booking engine redesign project. Read about the native mobile app redesign as well.
I co-led the user experience and user interface design for Virgin Australia's responsive booking engine systems. The blue sky project required us to start from scratch to reimagine the flight booking process for corporate, business, and leisure travellers. The design needed to be scalable and modular as the concept would be applied to two separate booking applications built specifically for business-to-business and business-to-customer markets.
The existing booking engine is split into separate mobile and desktop platforms so we needed to design a unified, responsive experience that met the needs of our guests.
We kicked off the project by facilitating workshops with stakeholders across marketing and IT to identify common user personas the redesign would target. As Virgin Australia service a wide cross-section of flyers across many demographics, we included both leisure flyers and corporate travellers in our workshops.
As a result of the workshops combined with existing customer data, we compiled a list of every type of flyer we needed to cater the experience for. Gathering information from a broad range of subject matter experts from within Virgin Australia and Virgin loyalty program Velocity, we developed two major persona groups which were placed on a spectrum.
The spectrum was based around each users confidence and experience around booking online. On one side we identified the inexperienced, non-tech-savvy group "Hold My Hand" and placed the experienced, more tech-savvy group "Confident and In Control" on the opposite end of the scale. Developing this spectrum helped us organise focus groups into these extremes, which helped prove and disprove major design decisions.
After we'd gathered enough requirements from the internal workshops, we began planning the user journeys by breaking down the minimum requirements needed to complete a booking. Mapping out the experience at a holistic level helped with the creation of an overarching concept and allowed us to identify pain points in the existing booking experience.
A major pain point we identified from the workshops was how users needed to input guest details before selecting flight extras like insurance and seating. The new concept needed to follow a more traditional ecommerce flow, allowing users to select their entire "product" with extras before proceeding to guest details and payment. This simple change in our approach proved popular amongst stakeholders and focus group participants alike.
Below is an early version of the main user journey showing mandatory steps as pink post-its, whereas optional steps to customise the booking are in mint green.
After revising elements of the product selection concept to cater for domestic and international routes, wireframing each interaction into a workable user interface was my next task. Early iterations were created entirely with pen, paper and wireframing tools like Balsamiq as we needed to move quickly and validate the direction of the concept.
We held weekly review sessions with stakeholders to demonstrate the concept from early wireframes to the final approved visual execution.
In order to progress, the visual design was tackled through constant iteration. The first step was a stripped back end-to-end design of each stage. We knew we were designing an evolving beast as further requirements trickled into our workflow from all areas of the business.
Our team tested interaction design decisions by creating clickable prototypes using a combination of tools like Proto.io and Marvel, as well as browser-ready prototypes built in code. These prototypes were also developed in an iterative way, giving us the ability to make improvements as feedback dictated.
We facilitated a combination of 1:1 user interviews as well as focus groups throughout the duration of the project. These groups included users from both extremes of our persona spectrum (from Hold My Hand to Confident and In-Control) and provided useful feedback on our concept. We adapted usability tests to the feedback we required, applying a mixture of moderated, in-person contextual inquiries and casual, user group discussions. We regularly applied the System Usability Scale (SUS) to quickly measure usability.
Here are just a few verbatim quotes from participants commenting on the experience.
Putting data in before knowing the total price of the flight is frustrating. This is better.
If I’m fiddling around deciding if I’m going to fly with this airline or not, I don’t want to start filling in details until I’m sure I'm going to book it.
Extremely easy to use and the screens navigated quite well to each other.
Although at times we received mixed results on design decisions, our overarching concept of selecting your travel products followed by finalising the booking was well-received. Participants unanimously agreed that filling in personal and payment details was a task they'd prefer to do at the very end of the purchasing experience as this is a process they are accustomed to when shopping online. We held two focus groups each month throughout the design intensive stage of the project.
We applied a "jobs-to-be-done" approach throughout the project, solving bare bones design challenges with a combination of mobile (or touch) and desktop in mind. As mobile traffic is still less than a quarter of total visitors to the booking site, this device agnostic approach allowed us to move quickly as we weren't restricted to design one platform after another.
To ensure we maintained the continuity of the visual design, I led the creation of the booking styleguide and design system. The single-page styleguide aims to reveal the design principles and processes applied to the experience, while also showcasing how UI components work together within the ecosystem.
My major takeaway from the project was a reminder that booking flights online can be an anxious experience for all users. We designed for both sides of our persona spectrum however we learnt both groups share similar worries when it comes to picking the right flight at the cheapest price and making sure their personal details are captured correctly.
A demonstration of an early flight selection prototype.
Through trial and error, we discovered there are simple ways to help ease user worries, like clearly showing booking progress, providing details on exactly what a traveller receives with their ticket purchase, and reducing airline jargon.
Ongoing user research kept our team grounded in the original concept and ensured we never lost sight of our customer-driven and product-centric approach.