Southwest Flight Exchange
Building a new feature to modify an existing flight.
Deliverable
New feature
Team
1 Designer, 1 PM, 8 Developers
Client
Upside Business Travel
Date
01/2021
Overview
Problem Definition & Context
Southwest is one of the more popular airlines purchased by our customers. Due to this popularity, our Stakeholders have expressed that there has been demands to create a way for users to have more experiences with their Southwest booking and align extra features closer to what Southwest offers on their website. Also, due to the transition of Southwest using NDC rather than Sabre as their GDS, we needed to create an entirely new experience to serve the NDC GDS system.
There have been multiple new features that have rolled out due to this alignment, and the last large project is creating a way for customers to be able to modify an existing flight.
Approach & Solution
Provide customers with the ability to modify their Southwest flights by airport, date, and time, including difference in price.
Our scrum team had 3 months to have this feature launched so we worked within a 12 week sprint. Once a week we had planning to make sure we were on track with what went right and things we can improve on. Designs were due around the half way mark of the iteration, to make sure there was enough time for development and testing.
Customer & Business Impact
In order to stay on track of Upside's OKR for Q1 2021, one of our goals into developing NDC Exchange for Flight Self Service was to create a self service modification for UBT flight exchange for Southwest.
Our goal is to use ATPCO's NDC Exchange to shop and book Southwest (WN) fares, to unlock ability to add Early Bird, and to issue travel credits as applicable, so that the platform can ensure we get full inventory and accurate prices. Overall this will improve the customer experience!
In order to go live with our integration, Southwest and ATPCO require a site review.
The key requirements of the site review are in this iteration :
Shop, book, and ticket Southwest Airlines fares and schedules
Modify and cancel any previous itinerary
As the Senior Product Designer, I worked within a scrum team of a Project Manager, Lead Engineer and 6 Engineers. I was responsible for conducting competitor analysis, designing user flows and wireframes to clarify product requirements, creating interactive prototypes, and designing high-fidelity mock-ups for engineers.
I also worked closely with the Engineers to understand technical feasibility, testing once the product was ready to launch, addressed bugs and created a flawless experience.
My Role
Upside Business Travel is a corporate platform that provides digital services and support to small and midsize companies. To help travelers and organizations save time and money when they book trips, the platform aligns their wants and needs, reduces friction and frustration, and offers new levels of freedom and control.
Research
PLANNING & BRAINSTORMING
This project comes with specific requirements we must meet :
Shopper must be able to modify a Round trip, 1 leg of a Round trip, and a 1 way flight
Shoppers can modify the date, cabin class, location
Shoppers can do all modifications without the help of a Navigator (customer service)
DESIGNING WITH LIMITATIONS
Even though I am designing an entirely new feature, this projects also comes with a lot of limitations in order to meet the MVP by the due date.
I started this project by getting an understanding of how Upside's current flight shopping experience looks like. By seeing the entire flow, it helped to form a better user flow and eliminate pages and functions not needed for this experience.
TECHINICAL RESTRAINTS
This feature will be a entirely new experience and every page in this flow will be recreated with the Engineers, depending on the technical limitations and the level of lift.
Booking a Flight
Canceling a Flight
Competitive Analysis
Getting an understanding of how other travel sites allow a user to modify an existing flight, Southwest was the main website that helped inspire the design on how to share and display information with the user.
Insights :
Display the original flight information
Display the difference in price
Create a way for the user to select which leg they want to modify
Have users go through the same flow whether they are paying or not
🔑 Key Takeaway
Use some pages from our existing shopping flow to save time for design and developers
Redesign the flight search page to display price difference while utilizing spacing
Eliminate elements we don't need to create more time to launch an efficient MVP
Create a way to allow the user to select which leg of the flight they want to modify
First Iteration
Once the user is on their itinerary, there will be a link on this page to allow them to modify their flight by themselves, not having to contact a Navigator (customer support) to do this for them.
Itinerary page
Trips page
User will access their flights in the Trip page. There will be no changes here, though this will be the first step in the user flow where they access their itinerary.
The flight results page currently shows fairs across 6 various sections, depending on the seat class.
Since Southwest is now using NDC as their GDS, there will not be different seat classes, so we can eliminate the icons (and the row) which display this info.
Even though Southwest does not have different seat classes, they do provide 3 different levels of tickets, varying with different amenities.
How can the 3 various tickets be displayed while utilizing space and properly displaying the price difference rather than the ticket price?
Flight results
Checkout
Get rid of the flight drawer - this allows us to display the price difference effectively while visually using all the space
Display the original flight information
Eliminate the cart button - this removes a big technical lift, so designs will work around eliminating this function while creating a smooth transition from results to checkout
FLIGHT RESULTS REVISIONThis page will be similar to the current checkout now.
Some changes to implement :
The Trip price box will only be reflecting the price difference, or 0 balance
User cannot add a new credit card - they must use the card on file
Some components that are not needed within a modify flight flow will be removed to lessen the technical lift
The Various Curveballs
Constantly adjusting design and tech when guidelines are changed :
Initially we were told that both legs of a flight had to be selected in order to modify a flight. This led to lots of discussion of how do we direct the user to the understanding of "both legs need to be modified" even if you want the same flight. In this case we thought about the option of showing the same flight and directing the user there, but we realized this was not technically feasible of finding the same information from a flight.
Later we were then told a user can modify a round trip This greatly changed the abilities to simplify this design from a visual and technical perspective.
Then we were told that a user can only modify the departing location on the first leg and the arriving information on the second leg (it gets confusing...)
There were issues and being able to display the correct price difference. We had to rethink how do we communicate to the user that we do not have the correct price for your flight at the moment, but please wait and we can get it for you? This later was later resolved.
Examples of Iterative Brainstorming
Iteration - second round
Once there was an understanding of the design requirements and the technical lift, I was able to start to build more options to create a self service experience and refine solutions.
Creating another user flow helped in understanding what screens I should create, and it allowed me to ask the Developers more specific questions to clarify design. Due to the technical restrictions, it also created some challenges on how to alert the user that they must modify both legs of a flight.
I needed to create some modals to give more context and communicate state changes to the user. I also asked more questions, to get a better understanding of what our solutions should be for the next Iteration.
Itinerary
The Modify Trip link was moved to a new box named traveler information. Here the user can easily find all of their travel info and trip actions in one card.
In this specific action of modifying a Southwest flight, the user can only make this modification with an existing credit card on file. In the instance where this is no card on file, the user will be directed to contact a Navigator for support.
In order to create a way for the user to select which leg they would like to modify, I created a modal that allows the user to choose modifying 1 leg or both legs of their flight.
Flight results
The screens of the flight results page had the most iterations and design versions.
The intention for this page is to display the flight results in an effective way and create an easy and clear way for the user to modify their flight.
The design solutions for the flight cards was the best way to display all the flights while showing the price difference.
The biggest challenge was the top of the page - how do we display the info needed and create a way for the user to change and modify their flight with no assistance?
The iterations done here were with the intention of creating different ways a user can view their original flight while meeting the initial requirements of a user having to modify both legs of a flight.
Once we were told that this requirement was lifted, the flights results page became more simplified.
Checkout
I brainstormed with an idea of creating a modal after the user is finished selecting their modification. Ultimately I felt it was important to keep the transaction process the same as buying a flight, so the user goes through a checkout process.
There was discussion on what if the transaction is $0. In this case they will go through the same process of either paying extra or getting money back. There will be no confusion for the user on what happens with different payment scenarios since they will go through checkout and afterwards land on their updated itinerary page.
Final Product
Modifying a roundtrip flight
Modifying a 1 way flight
Modifying 1 leg of a flight
The final product reflects 3 different scenarios:
Modifying a round trip flight
Modifying the first leg of a flight
Modifying the second leg of a flight
Reflections
Great learning experience of working on a Scrum team with a big project and tight deadline
Great collaboration with Tech Lead and Project Manager.
Overall myself and my team put a lot of work into this project. Unfortunately there were various technical restraints and allowances that were communicated to us with little time to adjust. Though we were able to make these adjustments when needed and really showed how quickly we were able to adapt.
TESTING TESTING TESTING!
We spent a full week testing every scenario with modifying a Southwest flight.
We recorded all testing bugs and design inconsistencies by created Jira tickets. They were labeled in order of priority from a technical perspective and design UI layout.
Our scrum team did a great job collaborating and working together to make this a flawless experience.
I would have loved to have done user testing and A/B testing. This would have given more validation to the designs and would have solved design question faster, thus saving time on a project that already has a tight deadline.
IMPROVEMENTS
TEAMWORK!