Air Agent
Helping airline staff anticipate and prepare for customer interactions and needs in the airport lobby
01 | Overview
Air Agent is an AI-powered mobile service that equips employees with real-time insights and resources to better support customers.
This was done in partnership with United Airlines as part of my master's capstone. We presented our solution to the strategy team where it was received positively.
For this project, I owned:
Research synthesis
Conducted user research and analyzed key findings.
Mobile wirerfames
Identified user flows and information architecture
Workshop facilitation
Led team/stakeholder meetings and workshops
Role
Team lead, designer, researcher
Team
3 designers, 1 researcher
Context
Sponsored master's capstone
Duration
Mar - Aug 2024 (6 months)
Skills
Contextual inquiry, user interviews, workshop facilitation, wire-framing, prototyping, evaluative testing
Problem Statement
How might we enable customer service representatives in airport lobbies to proactively identify and address customer needs?
Target audience
We focused on customer service representatives (CSRs) stationed in the lobby area because it's often a customer's first point of interaction with an airline in addition to potentially being an early stress point in a customer's journey.
Background
Customer service representatives working in the airport lobby face new challenges because of self-service technologies (check-in kiosks, mobile apps, and chat bots) becoming the standard way of customer interaction.
Business goal
One of United Airlines' business principles is to enable customers to self service rather than relying on going to CSRs. To support this, one of the goals for our design must help increase the number of downloads of the United Airlines mobile app.
02 | Solution overview
3 Touch point solution
Our solution has 3 touch points that connects the customer and the CSR working in the lobby.
1
Streamlined kiosk
CUSTOMER FACING
Customers tap their phones on our redesigned kiosk, launching the United Airlines online check-in process.
2
Customer app
CUSTOMER FACING
They can request for help directly from the mobile app at any point.
3
Employee mobile app
CSR FACING
If help is requested, CSRs can learn about the customer through their employee mobile app
The employee mobile app was the focus of our solution; it allows customer service representatives to:
1
Identify customers who need help and what they need help with.
2
Catch up on necessary pieces of context about the customer's situation.
3
Consult relevant air travel policies.
4
Directly send resources to the customer.
Customer profile and check-in status
AI suggestions/insights that updates as more context is gathered
Real-time audio transcription
Chat interface to revise AI-suggestions
03 | Research summary
Methodology
We wanted to learn more about our target audience's:
overall role and key responsibilities
everyday challenges, obstacles, and frustrations
available resources, tools, and support systems
In 3 weeks, we conducted:
5 Contextual inquiries
Observed and interviewed 15 CSRs across Seattle-Tacoma & Chicago O’Hare airports
4 SME interviews
Interviewed management and veteran CSRs to learn about the role from an operational POV
Competitive analysis
Observed lobby areas of competitors (American Airlines, Southwest Airlines, Delta Airlines, and Alaska Airlines) at SeaTac
Analysis
We saw certain themes emerge, such as:
confusion with United Airlines' open lobby arrangement
difficulties with the customer flow
challenging customer interactions.
Insights
01
CSRs have to adapt to a wider range of interactions because self-service technologies have diversified customer scenarios.
02
An open lobby design creates a sense of ambiguity and confusion for customers, forcing CSRs to inefficiently go through idle customers one-by-one.
03
During irregular operations (e.g canceled or delayed flights), customers will seek in-person assistance over the self-service tools.
Jobs-to-be-done
We reframed our insights following the Jobs-to-be-done framework and concluded that our solution should provide CSRs a way to:
Monitor the lobby area
Anticipate customer needs
04 | Ideation
Brainstorming
I led the team through brainstorming activities and workshops to explore potential solutions.
Brainstorming
We went through a few rounds of brainstorming, both individually and together, and then categorized further to see what themes emerged
Journey mapping
We mapped out key tasks, thoughts/emotions, and identified areas of opportunity
Categorizing + dot voting
To align further, we categorized potential ideas by level of feasibility (ideas we can implement in the present, near future, and far future).
Selected idea
Taking on a service design approach, we landed on an idea that involves 3 touch points:
1
Customers tap their personal devices on a simplified kiosk, launching the United Airlines online check-in process.
2
As customers go through the check-in process on their phones, they can request for assistance at any point.
3
Meanwhile, CSRs monitor the lobby area and can access customer details if help is requested
Customer enters lobby and hasn't checked in ahead of time
Taps phone on kiosk
Goes thru check-in process on phone
Has a question & requests assistance directly from phone
CSR is already primed on customer's travel details/situation
CSR gets notified
Sees CSR approach, asks questions/for support
1
2
3
Kiosk prompts customer's phone to pull up online check-in process via mobile/web app
Diagram of imagined service
Further refinement
We created a few storyboards and a service blueprint to further flush out our idea.
Sketching out our initial idea
Service blueprint
05 | Designing the AI mobile app for CSRs
Highlighted touch point: AI-powered mobile app
The employee app portion of this solution is to help CSRs monitor the lobby and access customer data on the go. We envision it will be integrated with the main mobile app CSRs already use.
User flow and information architecture
I created information architecture and user flow diagrams to align the team on core pieces of information and features to include.
User flow diagram
Information architecture diagram
We wanted this app to give CSRs insights into:
Lobby overview
CSRs can see which kiosks are actively in use and who has requested assistance .
Customer profile
Information about check-in progress, flight status, and basic customer details.
Suggested actions
Using the check-in process and basic customer details, the app will provide CSRs with suggested actions and/or resources based on the context it has gathered.
Low-fidelity and mid-fidelity wireframes
I created wireframes once the team reached alignment on the logic above.
Whiteboard sketches of initial user flows
Sketches of the CSR app
Turning our sketches to mid-fidelity wireframes
Design considerations
Lobby view
Currently, there is no way to monitor the progress of customers using the kiosks. We wanted to provide CSRs with a way to immediately know what's taking place at each kiosk.
Customer profile
Once a CSR accepts a request for assistance, they can see all relevant customer details that provide context on the customer's specific situation. AI is used here to suggest the best course of action based on the information initially collected.
Transcription view
To provide additional context to the AI-generated suggestion, we created a transcript view so CSRs can see their ongoing conversations with the customers they are helping. We wanted to give CSRs a way to adjust any suggestion if new information's received.
06 | Designing the rest of the service
Touchpoint 1:
Passengers tap their phones on a streamlined kiosk
We saw that having a 100% open lobby was too confusing, so we knew we couldn't remove kiosks entirely. We concluded that a kiosk's main purpose is to 1.) act as a visual waypoint and 2.) print physical boarding passes.
We wanted the revised kiosk to be sleek and minimal. After sketching a few ideas, we created the final version in Spline3D.
Touchpoint 2:
Passengers check into their flights using the United Airlines mobile app
After passengers tap their phones on the kiosk, their phone will open the United Airlines check-in process through either the web or mobile app if they have it downloaded.
We added an option to this existing process that allows customers to directly request for in-person assistance.
07 | Evaluation
Concept testing
We walked 4 customers and 2 non-United Airlines CSRs through our envisioned experience and asked them about their thoughts at each stage, specifically noting concerns with the usage of AI.
We showed customers what they would see on both their phones (top row) and the kiosk screen in front of them (bottom row).
CSRs saw what they would see on their employee app.
Discoveries
Our biggest takeaway was that all participants felt that the use of AI in these scenarios were helpful and beneficial in supporting both customers and CSRs. We also saw that:
1
Customers wanted the ability to provide consent for real-time audio transcription.
2
When customers request assistance, they want to be clear who to expect.
Before
After
Made more personal, added location indicator to ensure customers don’t leave the lobby.
Added “opt-out” option to be more transparent about use of AI
08 | Final Service
Customer flow
CSR flow
Visual identity
Global color tokens
$neutral.0
#000000
$neutral.1
#2f363f
$neutral.2
#5c697b
$neutral.3
#d6dbe0
$neutral.4
#e7ecef
$neutral.5
#FFFFFF
$blue.dark
#1414D2
$blue.light
#E8E8FD
$orange.dark
#FFC658
$orange.light
#FFFAEE
$yellow.dark
#F5DD01
$yellow.light
#F5DD01
$green.dark
#1B7742
$green.light
#C1F1D5
$red.dark
#FF0000
$red.light
#FFCCCC
$neonGreen
#8BEC4E
$skyBlue
#A4EBFF
$gradientBlue
#A4EBFF
Borders
$color.border.card
$neutral.3
$color.border.card.ai
$gradientBlue
$color.border.seperator
$neutral.3
Labels
$color.label.primary
$neutral.1
$color.label.secondary
$neutral.2
$color.label.active
$blue.dark
$color.label.inactive
$neutral.2
$color.label.button.primary
$blue.dark
$color.label.button.special
$neutral.5
Border radius
$borderRadius.small
16px
$borderRadius.medium
20px
Typography - MAPS
Category
Typeface
Size
Weight
Case
Line ht.
Letter spacing
Heading 1
Helevetica Neue
24
Bold
Sentence
120%
0
Heading 2
Helevetica Neue
18
Bold
Sentence
120%
0
Heading header
Helevetica Neue
16
Bold
Sentence
120%
0
Body base
Helevetica Neue
14
Normal/Bold
Sentence
140%
0
Body small
Helevetica Neue
12
Normal/Bold
Sentence
140%
0
Button large
Helevetica Neue
16
Bold
Sentence
0%
0
Button base
Helevetica Neue
14
Bold
Sentence
0%
0
Design system
09 | Next steps
Further testing regarding information validation
I would like to conduct further concept testing back at the airport with United Airlines employees. I would be curious to know what kinds of information from our solution they actually find useful or if they feel that it's excessive. This was our original plan for concept testing; however, the CrowdStrike outage limited our interactions, making us pivot strategies.
Edge cases and expanded scope of service
After additional validation of our idea, I would want to expand our solution to include certain details that fell out of scope initially. Specifically, I would want to explore the accessibility aspect for users without smartphones, ensuring this solution remains inclusive for all customer types.
10 | Reflection
Prioritizing key metrics
This project focused on the ideation and storyboarding phases of the design process. If I were to redo this project, I would focus on identifying success metrics (such as customer satisfaction and average CSR-customer help time) earlier on in the process so I can leverage them later when evaluating our concept.
Moving forward with assumptions
Because we had limited access to United Airlines research metrics and design systems, we moved forward with our own research insights, focusing on keeping project momentum to meet tight deadlines.
Vision massaging
Frequent communication, both internal and external, revealed how specific details resonated with different stakeholders. This helped us distinguish feedback between how we presented our idea versus the idea itself.