Southwest Flight Exchange

A new way to modify an existing flight
Image of southwest flight exchange on website.png

Overview

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.

PROBLEM DEFINITION AND 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. This is part of the requirements we must meet to have NDC as the GDS for our product.

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. Applying NDC to Southwest also allows us to display more inventory. 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

ROLE

As the Senior Product Designer, I worked within a scrum team of a Project Manager and 8 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.

 

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 WITHIN 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.

 

TECHNICAL 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

Current Experience copy.png

CANCELING A FLIGHT

cancel flow.png
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.

Screen Shot 2021-02-11 at 12.00 1.png
Group 23.png

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

Takeaways from Research & Planning :
  • 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

 

Iterations

Version 1
user flow version 1.png

Since we are building a MVP for the first launch, we really focused on the leanest flow and making sure it is technically functional. For the MVP we are only allowing modifications.

1. Trips Page

User will access their flights in the Trip page. There will be no changes here, though this willl be the first step in the user flow where they access their itinerary.

Screen Shot 2021-05-02 at 8.38.34 AM.png
2. Itinerary Page

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.

Current Screen

Current - Trip Iterary Page.png

Version 1

Modify Flight.png
3 - Flight Results

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?

Current Screen - Flight results

Group 1.png

Current Screen - Flight Drawer

Group 40.png

Version 1

Group 38.png
New card to display flight.png

  • 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

4- Checkout

This 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

Current Screen

current checkout screen.png

Version 1

checkout screen new ideas.png

The various curveballs

FLIGHT RESULTS PAGE

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.

{images}

 

  • Later we were then told a user can modify a round trip (both legs, choose between legs, and modify a 1 way flight. This greatly changed the abilities to simplify this design from a visual and technical perspective.

{images}

  • 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...)

{images}

 

  • Issues with the pricing and having 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?

Version 2
user flow version 2.png

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.

1. Trips Page

This is the main page to view the itieraries so there will not be any changes here.

2. 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.

V3_1.png

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.

2.png

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.

2-1.png
3. 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 requirments 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.

Group 39.png
Group 41.png
4. 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.

Group 45.png
10.png
 

Final Product

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

Itinerary

V3_1.png
7-1.png

Flight Results

5.png

Checkout

10.png

New Itinerary

12.png
V3_1.png

Final Prototypes

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

MODIFYING ROUND TRIP

MODIFYING LEG 1

MODIFYING LEG 2

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.

Key Takeaways

  • 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.

Improvements

  • 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.