Table of Contents

Subscribe

Just like the Midwest itself, Midwest Airlines is one of the best airlines still in business today—“The Best Care in the Air.” They tout their leather seats and warm chocolate chip cookies baked fresh on board, which are both well and good. Clearly they care about their customers, but their site makes me think otherwise.

Midwest Airlines The current Midwest Airlines homepage.

Making Observations

Having recently booked a flight through Midwest’s site, I decided it was time to give them a refresh based on a few opportunities I saw. Here are a few notes I jotted down as I went along with the mindset of a customer booking a flight.

  1. Forms are laid out without regard to structure or process
  2. Images are unnecessarily used in the navigation
  3. Poorly sized images make scanning page difficult
  4. Visuals are added for pure (uninspired) aethestics
  5. Too much noise distracts the eyes

Those are just a few overarching concepts I had in mind. Now for the nitty-gritty details, the stuff that really got under my skin.

Teeny, Tiny

First of all, everything is tiny. Midwest is one of the best airlines in the country, and their style (online and on board) suggest they’re targeting the business class over budget travelers. If that translates to small click areas, even smaller text, and equally small headings, they really need to rethink their strategy.

I wrote a piece for the ZURBlog on designing better links and navigations, and clearly Midwest’s design team could benefit from reading it. With everything being so tiny, it would seem as though Midwest doesn’t want me to find anything, or even make sense of their home page.

Conflicting & Inconsistent Visuals

Midwest Airlines

Secondly, and perhaps just as annoying as overused small type, is the use of color. Where did those background blues and yellows come from? Certainly not their brandmark, but hopefully not out of some designer’s arse. The header feels very uninspired with those two blues and borderline stock photos. It also conflicts heavily with the central brandmark’s gold and dark blue.

Midwest Airlines Ugy Ad Midwest’s homepage suffers from their outrageous adverts.

And speaking of colors, those “featurettes” they rotate through on the homepage just scream amateur. Coupled with the lackluster type treatments across the site, it just begs to be made fun. With the intermixed caps, lowercase, and random blue words, the inconsistency is almost unbearable and causes my eyes to casually drift instead of being pulled by design.

Follow Through

Thirdly, the follow-through on structure and implementation of the final product is miniscule at best. From misaligned elements to under the hood, this thing just was not put together well. I guess you could say it looks like Humpty Dumpty fell off the wall and someone tried to piece it back together.

Midwest Airlines Form Midwest’s forms suffer from a lack of structure and process. Check out their sign up form get a sense of the confusion for yourself.

The forms are the worst offender on the site. In reality, the sign in form looks the best out of all other forms, as it has the least to offend with. Still, if your sign in form needs explaining, you’ve got problems.

Aside from the piss poor public facing side of the site, it’s what’s under the hood annoys me most. It looks like Midwest’s developers know two things: Yahoo’s YUI is amazing and that CSS is overrated. Wait, what?

While I’m fine with YUI being used (frameworks give balance, can lessen code, etc), their complete disregard for CSS (and HTML) standards is a shot through the heart. They need to work towards separating their layers (content, presentation, and behavior) while improving their understanding of the code itself. Honestly, it looks like they mistook CSS (Cascading Style Sheets) for RSS (Repeating Style Sheets) because at least 50% of their code could be cut by making proper use of the language.

So What?

Well, as I mentioned earlier, I took a stab at redesigning Midwest’s homepage. The result is spot on to their audience, eliminates the bulk on the homepage, and offers an easy way to audience’s heart: a clear booking form.

The Unveiling

Although I started with the same mismatched blues, I managed to remove those nasty blues from the header in favor of a more brand-driven color scheme that really seals the deal for me with the redesign. And here she is!

Midwest Airlines Redesign Redesigning the Midwest homepage, I trimmed some fat and focused the page around the booking form, the key driver for every travel related website. You can also see the same page from a signed in view.

I also wanted to address my above concerns, and although I haven’t taken care of the code part, the follow through on visual elements to create consistency is there. I wanted to build on what Midwest started to demonstrate that one final push to get a website live just isn’t enough.

It’s worth noting I wanted to keep the flight status form, but when I reached my cut-off time, I couldn’t decide how best to implement it, if at all. In the end, like a few other pieces, it fell to the cutting room floor, however I did include a text link. I timeboxed the redesign to focus on what needed the most attention to get the final product done. All told, I think it does a great job, regardless of the flight status form.

Clearly Midwest has a long way to go on the road towards “Best Care in the Web,” but hopefully this push can serve as a little extra fuel for the long haul.

2 Comments

  1. R.Bhavesh

    This is what the real markdotto post is :). I loved the earlier re-designs you made on your other site(now closed?)

    I loved the midwest redesign as well. However, I am thinking about the navigation. In your design, how would you show the currently active link in the main navigation? Also don’t you think it does need little bit more importance than a simple link?

  2. Mark

    R. Bhavesh:

    Glad you like it! In regards to the navigation, I plan on addressing a few remaining issues in a follow up post where I redesign their sign-up form, including a few header modifications.

    The check flight status is likely a key action, though I have absolutely no metrics to back that up. At this point, I’m using pure consumer instinct: what do I want to do here? I lost an hour to trying to “fit it in” to the design as a form on the homepage, but felt compelled to leave it out unless I could come up with a solid, clean implementation.

    A link with equal weight to other primary actions seemed solid for my purposes.


Copyright © 2008 Mark Otto.