BookingApp
Redesigning the airline agent's experience when creating and managing bookings
OVERVIEW
BookingApp is a web application that allows airline call-center employees to create and manage bookings.
My Role
I'm working on this project as one of two designers.
Main areas of responsibility:
-
Understand agents' needs and processes
-
Simplify old, complex processes
-
Design a new, cohesive look and feel
-
Create and maintain Figma component library
Project date
March 2020 - March 2021
Due to the pandemic, initiating any contact with a client was strictly prohibited. Because of this, our plans for user research and testing dramatically changed--our original plans to visit a couple of clients' call-centers to do user research were cancelled.
In order to adapt to the situation, I often sought for extra feedback from our PM, who was once a call-center agent, and relied on my knowledge of design principles.
Gaining empathy for the airline agents
User environment
-
High-stress
-
Common for managers to pace the call-center floor behind the agents pressuring them to finish the call and move on to the next one
User needs
-
Getting through each call as quickly as possible
-
Easily navigate through large amounts of information
Pain points in old processes
-
Information organization
-
Unnecessary complexity
-
Technical limitations
-
Lack of training
A closer look at some key areas of BookingApp
User needs and solutions
The Start Screen
When an agent starts a booking, it's not always a booking for a flight. It could start with a car rental, activity, or a packaged promotion.
Pain points in legacy product
An agent cannot start a booking with anything other than a flight. In this flow, the agent must start with a flight, then add a car, hotel, or an activity as an extra add-on.
Solution
Remove anything that is unnecessary, and bring together all possible starting points onto one screen.
Flight Results
Pain points
-
Scan-ability is difficult
-
It is not clear which flight is selected
Solution
-
Use space and grouping to help agents quickly scan flights
-
Use animation and other visual indicators that clearly communicate to agents that they successfully selected a flight, and that a specific flight is sold
Seat map navigation
Pain points
-
Navigation to and from seat map
-
Navigation within seat map
-
Unnecessary info displayed
Solution
-
Add Seat Map to stepper so it's part of the main booking flow
-
Establish clear information hierarchy
Usability testing
Since our UX team has not had contact with users for nearly two years, most of our UX team is contributing to usability testing for BookingApp.
Due to that limited contact with users, we were not able to ask them the questions we wanted or test the designs with them before they were built.
Because of this--and in an effort to respect their busy schedule--we're breaking up the usability testing into multiple sessions.
Currently, we have conducted the first round of usability testing, and are now planning for the second round.
Guide/ Script
First round of usability testing
I created this guide/ script to help those on our team who don't have much experience with usability testing--or for those who haven't done it in a while.
Sample of compiled notes
Once all initial notes were taken, they were compiled into this spreadsheet to review as a team.
Takeaways
-
SSR panel on Flight Results caused confusion: Some agents thought they needed to click the SSRs to add them to the booking, and others didn't understand its relation to the available flight cards.
-
Flight header and available flight cards are too similar: A user worried that it is too easy for agents to, unknowingly, start searching in the Flight 2 section when they're still searching for the first flight.
Final Designs to Key Screens
Start Screen
Starting a new booking
Flight Results
Seat Map
What users are saying
Spirit Airlines
employee
It's a lot smoother when going through a booking flow.
Swoop Airlines
employee
So user-friendly now that I've seen it.
Norse Atlantic Airlines
employee
Nicer than SkySpeed (the old legacy application).