Airline Ancillary Services
A functionality used by airline agents to handle ancillary services for their passengers.
PROJECT TYPE
Amadeus client project
TARGET USERS
Airline call center agents of Air Canada
TEAM
Product Managers
Developers
QA Engineers
Product Owner
UX Designer (me)
MY ROLE
Research, Sketching, Wireframes, Visual Design, Usability Testing, Hi-Fi Prototypes, Cross-team collaboration
TIMELINE
Aug 2021 - Dec 2021
TOOLS
Figma, Zeplin, Confluence
Overview.
Reimagining the 'itinerary services' handling experience
Amadeus Ancillary Services are optional services that a passenger can purchase in combination with an airline ticket. Some of the common ancillary requests include seat selection, excess baggage, catering, pets, and ​​unaccompanied minors. The airline agents use the “TSM flow” embedded in an Amadeus product (ARDw) to handle such requests.
My Role
I was the only UX designer in a diverse team of product managers, engineers, and analysts. My role included product thinking, designing wireframes, interactions design, prototyping, and user testing
Prompt.
How to effectively migrate a flow from the tech stack of a 15-year-old legacy website to a common dynamic library - ProductX
The Problem
“.... how to effectively migrate a flow from the tech stack of a 15-year-old legacy website to a common dynamic library - ProductX”
The project was initiated because Airline Agent Division, Amadeus was going through a development sprint, where the main goal was to migrate the tech stack to ProductX (Fake Name). Product X is a highly customizable UI for B2C products of airlines to power their digital experience at any stage of the traveler’s journey, from searching flights to dealing with disruptions.
Amadeus wanted to establish a common tech stack for all their products. But a key challenge in this process was the ARDw was a highly complicated B2B product with over 10,000 embedded functionalities.
Therefore, my first goal as a designer was to find a solution having the best of both worlds - ProductX and a legacy B2B website (ARDw).
Solution
Phase 1
ProductX, being a responsive B2C product, employed a mobile-first approach. However, operating a complex website like ARDw on mobile was not possible. The majority of the airline agent used a large resolution screen (laptop or desktop) to access ARDw.
​
I found designing for a tablet to be a good place to start and then scale it up for larger screens.
Research
As my first step, I aimed at getting to know the users and understanding the flow. Because of the ongoing pandemic and certain corporate constraints, conducting research with the real users, i.e, the airline agents wasn't feasible.
​
As an alternative, I conducted numerous interactive and learning sessions with ARDw Experts, engineers with prior experience on the website, and the global design team. In addition, interaction with Product Managers (PM), who are connected to the clients, bought me a step closer to my first iteration.
Sketching
Having understood the design goals, I started brainstorming and developing ideas that can help me achieve these goals. For phase 1, I wanted to know if people would actually find value in these ideas, and why. I user tested these concepts with the PMs and ARDw Experts.
Key Changes
From the first iteration, the following functionalities stood out in solving agent's problems
Multitasking
Introducing "Tabs" for simultaneous working on multiple TSMs. A similar concept was used to switch between different operations within a TSM - like 'View', 'Modify', 'Waiver'.
Avoiding Breakpoints
Expandable component to accommodate additional data avoiding the need for a pop-up​
Faster Checkout
Fixed action button bar at the bottom for faster checkout.
One-stop Solution
Access to functionalities like 'Create a new Service' & 'View History' from within the flow so that the agent does not have to navigate to different pages
Feedback
There were certain areas where the design lacked behind. However, these failed attempts helped me understand the user better and create designs that target these pain points.
1
Large Components
The number of services can range anywhere between 1 - 99. The 'card structure' for listing services in the Summary occupied a lot of space, resulting in increased scrolls for an agent to find a particular TSM.
2
Difficulty in finding services
This iteration did not cater to the problem of finding a TSM quickly. The agent had to scan the entire list manually to find a passenger or service.
3
Making visual aspect the prime focus
In an urge to make the website 'look' good, I created fancy transitions based on my experience with ProductX. However, I realized that an ideal agent works on this website all day long. Having animations of a B2C product will end up wasting an agent's time.​
Redefining the Problem
“ ….. how can we make an agent’s experience faster and simpler while handling calls related to ancillary services”
By now, the team realized that the design proposals had the potential to simplify an agent's work on the Ancillary Services Flow.
The refined goal was not restricted to migration but aimed at improving the overall experience of an agent on the flow.
Solution
Phase 2
Through the trial and error method, I started targetting the shortcomings of the previous iterations. The goal was to explain a lot of the features without overwhelming the user.
I aimed at minimizing complex animations and providing the agent with a streamlined interaction.
These design elements targeted my audience's pain points and answer the design question
Keep it Simple
Big & fancy components like a 'card structure' forced the agent to scroll to find data. I introduced simpler components to save space and provide the agent with only the information that he would need to solve customer queries​
-
Used table structure with 'Zebra Stripping' for more data and improved readability
-
As a result, for the Summary Page, the number of TSMs on a page increased from 6 to 24
Faster Workflow
For an itinerary with a lot of TSM, an agent would face difficulty in finding a particular passenger/service.
​
-
Introduced a 'View All' button that expands the entire TSM Summary list so that the agent has a broader view.
-
For finding specific passengers, introduced 'Search TSM' and an option to 'Sort'
Improved Structure
A few elements from the previous iteration felt out of the place. In this iteration, I focused on improving the organization of data and elements.
​
-
Functionalities like 'Taxes' were clubbed together in one place.
-
An agent can perform operations like view, modify and expand without having to switch back and forth.
Challenges
User Testing
Performing a user test with airline agents was not possible because of certain corporate constraints. However, there was a sense of incompleteness without the testing.
​
The next best thing we could do was perform the user testing session with the 'Trainers of ARDw'. The trainers are well aware of the user's problems and hence, provided us with valuable data points.
​
The final iteration was successful as it coved all the pain points faced by an agent.
Company's UX Maturity
The company had quite recently started to involve UX, for some of its projects, in the development cycle. As a result, many of the standard UX processes were heavily challenged in the beginning, as many of our colleagues were not used to them. It required a lot of effort, pedagogy, and awareness-raising that ultimately paid off. Once the first iteration received positive feedback, the advantages were quickly acknowledged by the entire team.
UX in Agile
The agile methodology has often focused on optimizing the software development process leaving UX unfortunately a bit aside. The challenge was to make room for UX as part of their existing “development machine”. It had to be made clear that we (as UX) should be involved very early in the process, especially during the refinement phase. After various discussions, the changes to the existing process were made and the project planning was redefined to allow us to provide our mockups well in advance so that there was enough room for user testing. The client was particularly happy with these changes, as they felt much more involved in the project.
Reflections
1
Smooth Experience > Good Visual Design
Visual Design is important, but it is of no use if it is coming in the way of user's problems. Having complex, fancy animations are of no use if the user is having a hard time operating them.
2
Iterations are a key part of any design
With every Iterations and feedback, I found myself a step closer to my goal. Had I stopped at my first iteration, I wouldn't have explored all the problems faced by an agent.
More Projects
ATC Shopper
Premium
Envisioning the Invisible:
Decoding Data Capitalism
User-Centric Metric Collection Tool