Visit our archive

It’s shoulder season! What’s that you ask? It’s one of those times of the year when you can travel for less cost and avoid the crowds because the peak summer season has ended… and the airlines and hotels really need to get butts in seats and fill those rooms, respectively. So in honor of shoulder season I thought it would be fun to do a quick user experience review of Southwest Airlines, which is one of my favorites for domestic travel.

I decided to review their website and its mobile version, as well as its mobile app. Here are some of what I loved (and didn’t love) about their navigation, presentation, content and interaction design.

 

Navigation

On Southwest Airline’s website, the primary navigation menu is elegantly designed and shows very clear affordance (i.e. what’s clickable or clicked) for the Air, Hotel, Car and Vacations groups. But, for some reason, it didn’t apply the same affordance to the other menu items like Special Offers, Travel Guide and Rapid Rewards. When you click on those tabs, they don’t stay “down” so to speak. For example, if you click on the Special Offers tab, the only way you know you’re really in that section is to look at the small page title. Tsk-tsk…

Hero Area + Scoped Search = Functional + Promotional

What I like about this oversized graphic area is that Southwest has managed to use it not only for conveying a marketing message (what it’s typically used for), but also as a home for the primary activity that users want to do – search. Search for tickets, a place to stay, or a ride.

The tabbed search box makes it simple to do scoped searches on a specific form of travel with little effort. You don’t HAVE to go to the big “Hotel” section from the top menu to do a search for hotels instead of air. Also, it keeps the search form simpler than a catch all type of form where perhaps someone might have to think more – like on Travelocity. I’m not knocking that method, it’s just that this method is more appropriate for Southwest whose primary offering is air travel on one airline, rather than all forms of travel or all airlines.


The Case of the Disappearing Footer

Mmmm, mmmm….I love me some big juicy footers, don’t you? “Fat footers”, those big chunky footers we’re seeing a lot more of lately, work really well for exposing deep links and frequently visited content within a large site. But for some reason, the fat footer that appears on the homepage disappears on the Air, Hotel, and Car pages. After poking around a few pages, I thought, “Hrm, does Southwest have a blog?” Sure enough it does! But, I couldn’t get there from one of the interior pages because the link to the blog was in the fat footer that could only be accessed on the home page.

Presentation

When I thought about Southwest’s presentation, I immediately wanted to see how it carried its branding across platforms and devices. Do you enjoy the same experience regardless of whether you’re on the website, iPhone, Android phone, or some other type of smartphone?

Southwest did a good job of carrying the brand identity throughout the website, retaining a strong and consistent visual design language, for the most part. There are some confusing things I see happening however that perhaps most average users might not notice.

What the font?
If you take a look at all the various forms on the site, you might see that they don’t all look alike. What’s with all the different typefaces here? Subheadings, like seen in the Account Login in the right rail of the homepage, don’t look like they follow the same font families as the rest of the body or heading text.

Also, the form fields appear to be using different weights. In the tabbed search box, the grayed text that hints to you what to fill in is larger than the same kind of text in the Account Login panel.

Then if you compare the Account Login on the homepage with the Account Login on the Travel Guide section, you see a complete change in the way the form works. Instead of having hint text that you type over, the fields are now labeled. From a usability standpoint, I believe labeled fields are actually better. So why didn’t Southwest do this on the other forms? Is it trying to indicate that the 2 kinds of Account Logins are different? Not sure. The forms need to be consistent so that you can easily slip between all the screens without having to pause and think for a split-second about how the form works.

different typefaces - usability

On the plus side, the website does direct you to mobile site – mobile.southwest.com.

iPhone vs. Droid vs. Mobile Site
Just comparing the mobile experiences alone, do you notice anything odd? It’s kind of like that game: “one of these things is not like the others” isn’t it? It did a great job of making the iPhone and Droid apps feel nearly identical, but the mobile site looks like it was completely abandoned. This isn’t ideal. It tells me that it either decided to stop developing or maintaining the mobile site, because it prefers people use the app version. But if you’re neither an iPhone nor Android user, and you have a smartphone your user experience will not be up to snuff and you’ll be forced to use a mobile site that feels very different from even the website version.

southwest airlines iphone app

Southwest Airlines Iphone App

southwest airlines android app

Southwest Airlines Android App

mobile version of southwest airline website

mobile version of southwest airline website

Visually, the mobile.southwest.com version needs work, because it doesn’t carry through any of the brand identity that we’ve become accustomed to via the website. It needs to be enhanced to stay on par with the website.

If you compare the two apps against the mobile version there are other inconsistencies beyond just initial look:

  • Grouping
    • Reservations – car and air – are grouped on the app, separated seemingly for no reason on the mobile site
    • The app does a better job of grouping related tasks. Related action buttons are color coded to help group items and visually they are offset and bundled.

  • Icons
    • The mobile site’s icons feel unrelated from one another and give me the feeling that perhaps they are stock icons. Because they are full color and displayed against colored backgrounds, they are very hard to read quickly. The app icons with their unified style and purposeful color backgrounds are not only easier to read, but also make for a complete system or language that users can count on.

Stay tuned next week for Part II of my shoulder season user experience review where I discuss content and interaction design of the Southwest Airlines website. Got any of your own user experience observations that you’d like to share? Please comment below.