.png)
Pan Am Flight Scheduler
Goal: Design a flow allowing a user to find and purchase a flight that matches his/her needs for Pan Am, a classic airway brand. (Note: This case study is purely for practice and does not represent actual client work)
Audience: People looking for a flight that matches specific goals.
My Role: UX Designer
My Process
Because if you don't have a process, you don't know what you're doing.
1
Discover
Competitive Analysis
User Interviews
Insights
2
Architect
User Flow
Sketch
Wireframe
3
Design
Style Guide + UI Kit
UI Design
Testing
1. Discover
Competitive analysis
After reading the client brief, I start where I normally start: studying the competition.
Since I needed to create a responsive flow, I visited on a desktop and mobile four different airways websites and walked through their experiences from initial search all the way to completion (minus actually buying the flight. I’m not THAT well off)..
At each step, I took screenshots of desktop and mobile view added them to a Figma board.
User interviews
Once I had a baseline of what exists, I wanted to understand how Pan Am’s flow could stand out. I interviewed three users to understand how they schedule flights.
I organized my findings into two deliverables: An Empathy Map and a Journey Map.
.png)
Insights
So what did I learn that was unique and that I could act on?
First, people want to filter flights by cost, speed, or least number of stops. This goal-oriented filter is something many airways provide but it is usually hidden until you do an initial search.
My idea was to incorporate these goals as part of the INITIAL search..
Second, sometimes people really want a specific time of day for a flight (primarily to avoid red eye flights). This time-based filter seems to be missing from most airway websites.
2. Architect
User flow
Scheduling a flight isn’t as straightforward as it looks. My interviews showed that the choices people make about cost, timing, and seats changes as opportunities arise. So you need to make the flow for those choices easy.
Here is how I organized my flow, allowing seat choice to be available--but optional--at several steps.
.png)
Sketch and Wireframes
While thinking about how this flow might work in reality with my filter idea, I did a quick sketch and wireframe, which I iterated on late with my UI design.
.png)
My logic for the search form organization was to group all the fields into the tabs of one-way, round trip and multi-city; each option could change the available fields.
I also included the filter options that came up in my research: Time and goal-based options.
3. Design
Brand style guide
Now that I had architecture and initial wireframes, it was time to formalize the brand style guide and design the entire flow.
Pan Am’s brand was tricky because they wanted something modern but also fun. A hard balance to make. Playfair Display and Open Sans together seemed to strike that balance.
My thought process for the color: Take the brand's primary blue color and add a hint of that hue into the white background and grey text color. Then use a complementary red for primary CTAs and tags.
UI design
Overall, my design principles were:
Filter selectively upfront - Most flight schedulers have two modes of filtering: basic fields upfront vs. advanced settings. My principle brings forth a few more "advanced" settings into the basic filtering: Goal-based and time-based. These two filters match goals that were surfaced during my interviews.
Visually connect the results to the filter- Added a red tag to the flight cards to show how they match the goal-based filter: Cost, speed, fewest stops.
Eliminate bottlenecks - Rather than forcing people to choose a seat, I allowed people to pick the flights first to see a total cost before committing to choosing a seat.
Testing
I tested this flow with three users and got plenty of great feedback. Basically, the overall flow made sense, but some of the UI elements did not communicate what I wanted them to and some were missed entirely, such as the “Seats” links on flight cards.
I made updates and finalized my designs.
.png)
Future Features
If I had more time, I would have created the seat picker UI and options for customers to send messages to loved ones to let them know they are traveling.
