Infant Travel UX – Feature designed for Lobby Agent mobile app
Overview
This design project at Alaska Airlines required collaboration with a product manager and engineering group to creating design solutions for a mobile app called Lobby Agent. The app is an exclusive internal workplace productivity tool used by the CSAs (customer service agents) on iPad minis at all airports that service Alaska Airlines.
I worked across four to six different UX scenarios and addressed a number of rules and regulations that impacted a seat map function and mobile app's system. My process was to address one scenario a week, review them with the product manager for approval, and submit them for an engineering review. If the review went well, I was free to submit the designs for development. If it wasn't technically feasible, I'd go back to the drawing board and design a new solution to simplify it.
Role
I work full-time at Alaska Airlines as an in-house senior product design consultant. I design with a group on iOS-based productivity apps called CSA Mobile for the iPad mini 6. My central mobile app I work on is called Lobby Agent and I am the design lead with a junior designer, a central product owner, and an engineering team of 4 people.
Timeline
March – November 2021, and providing ongoing engineering support
Information Architecture
This was provided by the product manager to help me understand how the app currently worked and how information was structured within the app. It was very helpful for me to understand how tasks worked for our users and how the core pieces of information worked when agents added infants to guests' seats.
Design Problem & Constraints
The main design problem was that guests traveling with babies are limited to their seats on different types of aircraft and I needed to create solutions on how these particular rules were applied on them. Agents checking guests at the airport had to ensure they'd still get a seat on the flights, with their babies.
Within this project, there were a number of policy rules that needed to be observed. A couple examples of this is by abiding the number of "souls" (or people) on a craft. This meant including infants with the count. Another constraint was observing the number of oxygen masks that are available for an infant, and this meant only one infant per row is allowed, but only when all seats were occupied.
UX Process Diagrams and System Flows
In order to understand the mechanics of how all the scenarios interacted with one another, it was essential that I designed a working visualization that laid out all the pieces. Part of the problems I kept running into was how to explain where my specific design comps would work within the feature. The below site map was created in conjunction with the lead iOS engineer, who had built the core system from the ground up. Within this map, I created triggers, menus, outlined the problem it was addressing, and even back-end calls for what happened on the tech side.
Three different scenarios are mapped out here to show how pieces of the system architecture would branch into other areas of the app.
The scenarios are: Fix partial infant information applied in system, Block guest from having a seat (due to bad seat), Add lap infant to Seat
Mapping the system with existing design components and screens bring the site map from a schematic to a more real visualization of a product.
Demo Video– Unseating Guests with Lap Infants
There are a few scenarios presented in the demo video that I needed to design towards solving. Some of the UX proved to be a little tricky when handling infants on a plane. The biggest challenge is that not all seats are eligible for babies and all guests would need to be reseated if placed in those bad seats. I worked with Policy and product to determine when infants could be fine in a seat, and when they'd need to be removed.
The demo video is showing something we called a "Sabre block," or when a guest adds an infant added to an ineligible seat– in an exit row, for example. The video shows that this will open the seat map with an alert indicator informing the user that this seat isn't available. The only option is a green Unseat button which will immediately unseat that person. At that point, the agent can either look for a different seat or leave it to the agents at the gate to assist the guest.
Demo video provided by the engineering team
UX Flows & Design Comps
This shows how our users would add an infant to a guest that was flying that day. Upon opening the app, I sought to make this process as easy as possible. The add button initiates a modal with input boxes that the agents are required to put in the data.
Two flows are presented below. The top shows how add an infant to a guest, the bottom shows how to remove the infant. Both are intended to be quite simple and intuitive processes to keep the agents quickly moving through the guests.
How to Add an Infant to a Guest
The Lobby app is launched from the iPad
Agents would look by confirmation code, or name and Destination
Confirmation code is input in this scenario
Loading screens are processed when an entire screen will load new content
The main screen is called the "Hub" and handles of the guest's reservation info
The Add icon is tapped to add an infant
A form is opened along with the keyboard to prompt the agent to add infant details
After the info is input, the Save button on the bottom is tapped, or the Enter button on the keyboard can be implemented
A green toast notification indicates that this was a successful add
How to Remove an Infant from the Guest's Seat
To remove an infant from the guest's seat, tap on the Lap Infant tile below Profile
The tile will open existing info on the infant, a red link called Remove Lap Infant is tapped
An iOS alert pops up to prompt the user to be certain that this action is intentional
Upon remove, user goes back to the main screen with a notification confirming that it was successful
Design Impact
In building out this mobile app for customer service agents, one of the biggest complaints was not being able to add infants to their guests. Agents would often resort to the computer to resolve this need. After we shipped this feature and pushed into a new release, many agents were happy to resolve this and not resort to legacy software on the computer. By using their iPads, they can work with the guests in the line and not have the limited workstations to resolve checking-in with babies.