Background
While attending a recent SheDesigns UX Course, I participated in a four member group project that analyzed and determined the issues with the Southwest Airlines site, and chose some key areas of the site to be improved. We worked through the design process and created high-level designs for a prototype.
Initial UX Challenges: Southwest’s website is cluttered and out of date. The homepage has too many ads and links. Many of the links and user flow paths are repeats. This results in the users being overwhelmed and confused by choices. The large amount of ads put the book flight form below the fold. The site’s core functionality is buried and hard to find.
Information Architecture
We categorized the data on the existing site and app. This helped us better understand how the data was being presented to Users and how they were interacting with it. In addition to the checkout process data, we determined that there were 4 different data classifications: incentive-package deals and who they targeted, information specific to different types of travelers (business, family, ect.), safety updates about Covid 19 and weather, flight delays and changes, and Status of existing trip updating trips, changing flights.
Given that we were redesigning an existing product feature, we did not need to redefine user profiles. Instead we focused on analyzing the websites and mobile apps of competitors. This helped us define functional design for this market. Based on the Information Architecture and our competitive analysis, we were able to determine that all user profiles could be categorized into two groups: new and existing customers. We hypothesized that the solution to Southwest’s cluttered UI was to simplify the homepage to focus on the user functions: booking flights and making other travel purchases.
We created a virtual card sorting exercise using Asana. Users are shown
a list of cards kept in a neutral section. The user is then asked to sort
the cards into three columns based on which type of traveler would value the travel feature: Business, Leisure and Family. The tester should take an image of the card placements. Then the user is asked to identify the type of traveler they are and remove to a deck or neutral pile all the cards that they do not personally value and add all the ones they do. Then the tester should take another snapshot of the final choices.
The card sorting exercise will show what should be added to the customized options. It can be edited down to more central themes once patterns are identified through the initial user testing. We provided users with over 50 different data points to make it impossible For users to determine what we felt was important or to create patterns that could result in artificially created patterns in our results.
User Flows
For the purpose of prototyping we decided to focus on creating the simplified homepage. We analyzed the original user flow.
The second half of the user flow forces the user to go through the car rental process. Our proposed redesign removes this process from the book flight user flow.
Our Changes to the User Flow
For the purpose of prototyping we decided to focus on creating the simplified homepage. We analyzed the original user flow.
Issues with the Original Desktop design
Book Flight Wireframe
Book Flight High Resolution Mock Up
The result is a sleek minimalist UI where the focal point is the core site functionality. Users are still able to access all the information that was presented in the original site. They are no longer bombarded with noise. Now new users can make purchases quickly and efficiently before they lose interest. This home page is to be repeated for Hotel, Car Rental and Vacation Packages. The additional pages are to be accessed via the navigation on the top navigation bar. An additional example is shown for the Hotel purchase home page.
Book Hotel Wireframe
Our redesign was built around a standardized framework for all booking processes. While each user flow has been given its own landing pages, the standardization of the booking windows means that minimal developer resources will be needed for the proposed revamp of this feature.
Book Hotel High Resolution Mock Up
This creates a focused user flow that drives new users to purchase without overwhelming them with the economy of choice. We focused on providing the core services while providing the best experience.
Revamping the Mobile Booking Experience
Arguably improving the mobile booking process is equally if not more important, as consumers are increasingly making purchases using mobile devices. Our research process revealed that that Southwest’s app is plagued with many of the same UX issues as their desktop site.
The mobile interface has current offers/ ads as the focal point of the opening page. However the design is not consistent with desktop because the booking process is only accessible to the hamburger menu. The result is that the booking process is even less accessible for new users.
Mobile Flight Booking High Resolution Mockup
We adapted the infrastructure developed in the desktop wireframe to create a mobile booking process with a look and feel consistent with the desktop design. Threads are placed below the adapted flight booking window. The elements have been placed vertically to fit mobile screens.
The calendar opens in a drop down in front of the booking window. The same calendar format is used for the other booking menus which are accessed through the hamburger mobile navigation menu.
Mobile Navigation through a Hamburger Menu
We determined the original design of the hamburger menu to be functional. We were able to keep the design and add a manage flights option to make the menu fully consistent with the desktop navigation design.
Mobile Flight Booking High Resolution Mockup
We also adapted our Book a Hotel desktop design for mobile. The hotel booking mobile UI did not have ads, but is rather cluttered with a large image. It is completely inconsistent with the desktop user experience and the other mobile booking interfaces. We removed the background image allowing for a more focused booking process.
What I learned?
Working in a team project allowed me to learn where my strengths are and where I can best contribute to the process. Overall, redesigning a portion of the Southwest site helped us see how important building a strong user flow is to creating functional design.