Project: Usable Design Analysis of Southwest.com

The website that I chose to analyze for this project belongs to Southwest Airlines and is located at www.southwest.com. My analysis is primarily based on the navigational elements of the home page and the process of navigating between the home page and associated travel booking pages. The primary function of this website is to facilitate booking airfare and other travel arrangements with Southwest’s partners.

Criteria:

  • Are the main navigation elements functional, clear, and easy to locate?
  • Is the search function clearly presented?
  • Do navigation elements adequately persist beyond the home page?
  • Are breadcrumbs positioned and styled appropriately for clear navigation?
  • Does overall design support or detract from clarity of navigational elements?

Are the main navigation elements functional, clear, and easy to locate?

The main navigation elements on the home page of this website include, the Southwest logo with link to home, top navigation bar, and booking navigation bar along with additional resources listed in the footer.

SW-initial-home-view-desktop

The Southwest logo

The logo is located in the top left corner, is highly visible, and persists across all pages of the site.

The top navigation

SW-home-top-nav

A simple top navigation bar is anchored to the right top corner. From this navigation bar, users may select from four main categories, which when clicked produce a popup menu for further exploration.

  • Flight | Hotel | Car

screenshot-www.southwest.com 2016-07-01 15-42-15

  • Special Offers

SW-home-top-offers-popup

  • Rapid Rewards

SW-home-top-rewards-popup

  • For Search, please see next criteria.

Although the top navigation is clearly written, it is unobtrusive and not immediately visible upon initial page view. Using a larger, or bolder, font would make this easier to see when scanning the page for navigation.

The booking navigation

The primary function of this website is to provide users with a seamless way to search and book flights. This navigation element is elegantly designed and performs well. The transitions between tabbed menu items are appealing and the content is clear and concise. Entering travel details into the flight search form is straightforward and easy.

The booking navigation bar is styled to standout and draw attention, but the announcement for the “Fall Sale” pushes it too far down the page, which may cause it to be overlooked. It is located mid-page on initial view with a larger desktop screen.

SW-home-initial-comments

The booking navigation appears closer to the bottom of the page on smaller screens.

SW-booking-belowfold

The visual impact of both navigation bars would be improved if the “Fall Sale” announcement were not in the most visually prominent page location. This may be the best placement for driving traffic to the “book now” call to action (CTA) for this sale, however, it may have the unintentional result of pushing users not interested in this offer away from the main booking page.

Additional resources in the footer

The numerous resources included in the footer are clearly stated and organized logically. It is primarily a list of links to other pages, but does have graphic elements, such as buttons for social media and Southwest subsidiaries.

SW-footer

A nice addition to the footer are icons that identify links that will take the user away from the www.southwest.com domain.

SW-footer-icon

The footer is the only place where links to customer service and other FAQ type content can be found. Since the home page is rather lengthy to scroll through, it would be helpful to include a general link in the top navigation for “Customer Service” in order to avoid customers using the search function at the top to find it, which would generate the following error:

SW-search-error

Is the search function clearly presented?

On the home page, there is a magnifying glass icon located in the upper left corner. Although this is an anticipated location and icon, it is not evident on initial view due to the background graphic. The icon doesn’t stand out enough when scanning the page.

SW-home-top-search-icon

The addition of an accompanying “Search” label beside the icon may be of benefit in this situation to prevent the icon from being overlooked. Another possible solution is to darken the header background in order to improve visibility of the icon.

After locating the magnifying glass icon and clicking it, a search box appears, which is very large and easy to read.

SW-search-popup

If the icon were more visible initially, the icon along with the popup would be a clear and easily understandable presentation of the search function.

Do navigation elements adequately persist beyond the home page?

The Southwest logo with link to home and the top navigation (including search icon) persist throughout the site. However, booking selections made from the top navigation will not return the user to the booking navigation located on the home page.

SW-home-top-nav-popup

Instead, users arrive at a completely different page with an older design style, rather than the style they became acquainted with on home page. The lack of design continuity may cause momentary confusion, or cause the user to question whether they are on the same site.

SW-redirects-oldhome

The footer present on the home page is not present on many pages of site, which contributes to a lack of unity and clear branding site wide. The majority of the pages on the site would not be harmed by the addition of consistent footer content.

A great example of consistent footer usage can be found on Alaska Airlines website:

screenshot-www.alaskaair.com 2016-07-04 02-13-13

 

Are breadcrumbs positioned and styles appropriately for clear navigation?

The home page has a different look and feel than most of the pages within the site. Most of the time, the only way to return home is by clicking the logo. For instance, take a look at this capture:

SW-booking

After navigating to this flight booking page from the home page, there appears to be no clear path backwards other than the logo or back button. The same format, without a clear return home, is repeated on the majority of the site’s pages. Granted, on booking pages it might be an intentional tactic to prevent backpedaling on the sale, but these pages are so different from the home page that it requires a bit of time to orient to a new set of navigation elements. Adding a clear link to the home page at the root of the breadcrumbs would remove any questions about how to return.

On the plus side, this page does provide very clear and appropriately placed breadcrumbs detailing the progression of how the booking process will continue from this page forward. This is also true of other booking pages across the site.

Does overall design support or detract from clarity of navigational elements?

Booking air travel, or any travel for that matter, can be an extremely complicated endeavor for a person planning a trip. There are great number of important details and moving parts that have to come together in order for travel to be successful all the way from planning to booking to returning home. The less the traveler has to check and double check on every detail, the more time they will have to enjoy the experience and the more they will appreciate any service provider they can trust with their travel arrangements.

The Southwest home page design is very different from all of the other site pages. While this is not uncommon, it may bring up questions for users, like whether they are still on the same site, or if they will find the same fares starting from the home page as they would starting from other pages on the site. They may even wonder if the company isn’t able to afford a full site redesign.

While using a similar format and organization on all pages of the Southwest website would be ideal, the addition of similar styling on at least the booking pages would create a more unified look and feel, as well as removing the need for users to start over with a new format.

A Better Example

A competitor, Alaska Airlines, has a unified look and feel throughout their website, using the same header, footer, and basic layout elements on all pages.

Navigating this site, it’s unlikely a user would have any worry over whether they had wandered away onto another website.

Recommendation Recap:

  • Re-positioning advertising for the “Fall Sale” would improve the visibility of both the top navigation and booking navigation.
  • The search icon and top navigation would be more visible with a larger font or darker header background.
  • Adding the label “Search” might also be warranted to improve the clarity and visibility of the search icon.
  • Adding a customer service link to the top navigation, or improving search function results, is important in order ensure that users are able to find this content with ease.
  • The style for all booking pages should use design elements and forms in common with the home page in order to avoid making users learn a new navigation if they backtrack, or select booking from the top navigation menu.
  • Making a return path to the home page clearer on all pages would improve clarity of navigation between pages and home.
  • Using a consistent footer design, as Alaska Airlines does, would improve navigation especially on pages that are not using the same design elements as the home page.
  • Ideally the entire site would express the same design and navigation style. At the very least, design elements from the home page should be echoed throughout the site to improve the look and feel as well as presenting a unified presence to foster consumer confidence.

Leave a Reply

Your email address will not be published. Required fields are marked *