Southwest Airlines

Redesigning Southwest Airlines' mobile website
Role - UI/UX Designer & Researcher
Timeline - 2 week
Tools - Figma, Maze, Rotato
Jump to the final design
Summary
Southwest Airlines has a reputation for providing friendly and reliable service, with a high customer satisfaction rating among airlines. However, there is room for improvement in the design of their mobile website. 
The goal was to improve the design of their mobile website, specifically increasing the usability score from 8 to 9 and the appearance score from 6.3 to 8. 
Overview
Background
As a frequent flyer, I am very satisfied with Southwest Airlines' customer service, affordable fares, and reliable flight schedules. However, I find their mobile website to be lacking in comparison to the rest of the airline's strong points.
‍
To improve the mobile website, I first needed to understand the problem. Though I had some of my own assumptions about what I’d personally like to change, I put my opinions aside and focused on exploring the problem space by talking with other users.
Introduction
"Southwest UI was very boxy. It reminds me of an excel spreadsheet or a system from the 80s."
Southwest Airlines is a major American airline that was founded in 1967. It is the world's largest low-cost carrier, offering a variety of domestic and international flights to destinations across the United States, Mexico, and the Caribbean. 
‍
The airlines is known for its strong focus on customer satisfaction, offering a range of amenities and services to make traveling with the company comfortable and enjoyable. This focus on the customer experience has helped the brand achieve cult status among its customers. However, as the brand continues to grow at a rapid pace, there is one area where Southwest has fallen behind: the design of its mobile website.

In this UX case study, I will explore the challenges and solutions involved in improving the design of Southwest's mobile website. With the increasing importance of mobile usage in the travel industry, it is crucial for Southwest to address this issue in order to provide its customers with the best possible user experience.
Research
Competitive Analysis
To start off, I performed a competitor analysis of American, Delta, and United Airlines. These airlines were selected because they are among the most popular in the US. I wanted to explore their products to study their design patterns and identify areas that could be improved upon.
American Airline
# of screens to book a flight -  11

2022 NPS score - 41
Delta Airline
# of screens to book a flight -  22

2022 NPS score - 3
United Airline
# of screens to book a flight -  15

2022 NPS score - 13
Insights
I found that the mobile websites of American, Delta, and United Airlines were difficult to navigate and confusing to use. The user interfaces were clunky and slow, and there were excessive ads that made it hard to find the necessary information to complete the flight booking process. This poor user experience led to frustration and dissatisfaction, which made me want to switch to competitors. This presents a great opportunity for Southwest to improve its mobile web design in order to provide a better user experience for its customers and stand out even more in a competitive market, as many customers seek a seamless and convenient online experience. 
  • Slow loading times
  • Unintuitive user interface
  • Accessive advertisements
User Interviews
I conducted user interviews to gain insights into how participants searched for and booked flights. After the interviews, the participants were asked to participate in usability testing of the Southwest Airline mobile website. This helped to identify any challenges and issues with the current mobile web, and provided valuable information that could be used to inform the design of the improved mobile website.
Insights
  • Average Usability Score - 8
  • Average Appearance Score - 6.3
  • Frustrated at how the user wasn't able to choose the city as a destination instead of a specific airport. User wants to see all the results for all airports that are located within the city. 
  • Confused about how to proceed with Fare Selection because there was no clear call to action.
  • Mentioned that the contrasting colors were a little distracting
Auditing the Existing Design
What were the shortcomings of the existing design? 
To ensure the success of the new design, a thorough audit of the existing mobile website was conducted using research-backed accessibility and usability principles. This helped to identify potential roadblocks and ensure that the design meets the needs and priorities of the users.
Issue #1
‍The existing design was cluttered and the use of high contrast colors diminished the importance of important information.
The design was boxy and the color differences were too stark. 
Issue #2
Inconsistent design patterns were causing friction in the user experience.
‍The inconsistent use of styles and patterns caused confusion for users when navigating the site.
Issue #3
The limited choice for users was frustrating the users.
Limited research options caused reduced satisfactions, as users struggled to find the options they needed. 
Solution
Persona
I created a persona to avoid making assumptions about the users and to base their design decisions on real data and insights.
User Journey Map
Through the creation of a user journey map based on the persona, I was able to gain insights into the user's perspective and identify potential pain points in the user experience. This information was used to create a more effective and user-friendly solution. 
Information Architecture
Task Flow
Based on user feedback, the existing website flow was effective in terms of usability and functionality, so there was no need to make changes. 
Wireframes
Low-Fidelity Sketches
To move forward with the new feature and UI, I first used low-fidelity sketching to quickly explore and evaluate my ideas. This allowed me to identify potential challenges or issues with the design and set myself up for success in creating mid and high-fidelity wireframes. 
Mid-Fidelity Wireframes - Mobile Website
I focused on providing as detailed and structured mid fidelity wireframes to set a great starting point for the developers. I also focused on creating clean and easy components. By designing with components, I was able to create a library of building blocks that developers could use to quickly and easily assemble the final UI. The implementation of proper components and the reuse of these components provided several benefits in terms of the user experience.
  • Save time and effort during the development process
  • Ensure the final product is consistent in terms of its look, feel, and behavior
  • Make it easier to maintain and update the product over time
  • Reduce the risk of errors
Mid-Fidelity Wireframes - Responsive Desktop Website
In order to effectively communicate my responsive design concept, I created a comprehensive flow for the desktop website. This included detailed mid-fidelity and high-fidelity wireframes.
High-Fidelity Wireframes - Responsive Desktop Website
High-Fidelity Prototype
Design Solution
01 Up-to-date UI patterns
The outdated UI design was refreshed with a more modern look.
  1. The title bar was redesigned to be more distinct for users to differentiate from the menu bar.
  2. The boxes were rounded more to create a more friendly and modern appearance.
02 Consistent design patterns
The flight fare page featured inconsistent design patterns confused the users.
  1. The fare option cards were revised to be more uniform with the rest of the website.
  2. By adding an arrow icon, the cards became more clear in terms of their function and what the user could expect to do with them.
03 Simple but empowering feature
Users were not able to choose a city as their airport option to provide users with more options to compare and choose from.
  1. To make the flight booking process easier and more flexible for users, the ability to choose a city as a destination was added.
Figma Prototype
Usability Testing
Findings
"Seamless; great job! I used to fly with southwest a lot so it feels like the actual site."
"Process seemed pretty straight forward and all relevant info was immediately accessible!"
"So slick and easy to navigate! The sequence of steps felt familiar and natural to me.”
Usability testing was overall a success. I was able to raise the average appearance rating from 6.3 to 9.2, surpassing the target of 8. However, I was only able to raise the average usability rating to 8.2, falling short of the target of 9.
  1. Average duration to complete the task of booking a flight - 143.2s
  2. Average Success rate - 100%
  3. Average Usability Rating - 8.2
  4. Average Appearance Rating - 9.2
Reflections
Takeaways
  1. In order to maintain a positive user experience, it is important to avoid making changes to elements that are already functioning properly, even if the goal is to improve the visual appearance.
  2. In order to streamline the design process later on, it was important to establish good components during the mid-fidelity stage.
LinkedIn