Southwest Airlines, in my eyes, has always been the leader in the airlines industry in many ways: two free checked bags, free cancellation, amazing customer service, comprehensive flight choices. They are exceptional in everything... except their iPhone app. Their app has always trailed competitors, looks visually dated and you guessed it, has yet to be updated for the iPhone 6/6 Plus.
I'm not alone in feeling let down by the app. The app on the Apple App Store currently has a 1.5 star rating with reviews saying things such as "SWA needs a major update that completely scraps what they have now".
Goal: My goal going into this project was to do a visual redesign to the current app in order to bring the app more inline with the new Southwest brand as well as update it to modern design principles.
My goal was not to recreate the entire experience from scratch (I saved that for Version 2).
Before starting to design, I took a look at some Southwest competitors. The three apps that were most highly reviewed were JetBlue, Delta, and easyJet. In general, they all had similar home pages, with important features towards the bottom, an upcoming flights ticker in the middle and menus up top.
JetBlue had something that caught my eye; a "Call Us" button right there on the home page. I cannot explain the number of times I've gotten so agitated by the Southwest app where I just wanted to call someone but had to go to Safari in order to search for the customer support number.
One of the hardest things in redesigning this was figuring out how deep I wanted to strip the current app of its design. I weighed the benefits of keeping the current app's visuals but ended up deciding I wanted to keep nothing more than the color palette.
I pictured my undertaking as taking a book, erasing all the words while keeping all the pages. The basic interactions of the app would be kept, but the visuals would be redone.
I selected five screens that provided the most cohesive idea of the redesign, screens that also were some of the worst in the app (looking at you profile page).
I initially had some growing pains getting the design locked in. My initial splash screen had too little contrast. My home screen looked incomplete and lacked visual direction (below left). And I couldn't figure out how to properly display the Rapid Rewards counters (one iteration, below right).
After speaking with other designers and people who use the app, I nailed down a design direction and quantified my design decisions. I went through a couple iterations of just the home screen, seeing if there was any other way of organizing the main functions typically placed at the bottom of the screen. After analyzing multiple designs, I settled on the round buttons placed in the lower part of the screen since the full-width rectangles used too much space.
The "Call Us" button I had liked from JetBlue was a hit, every user I talked to loved the idea and wished they could get it right away. I created a more conventional hamburger menu rather than the one that currently dropped in from the top. In information-heavy pages, I used cards to break text into more manageable parts, thereby improving readability.
Below is the redesign, with the following five pages:
- Splash screen
- User Profile (particularly egregious)
- Mobile Boarding Pass
I put the current version of the app on the left side and my new version on the right.
Revisiting the goal of my redesign, I set out to bring the app more inline with the new Southwest brand as well as update it to modern design principles. Looking back at the process, it was a lot of trial and error. A lot of ideas that I thought would look great, didn't.
What would I do differently?
This is a question I get asked frequently. So in Version 2 here are things I hope to accomplish:
- Go much deeper than just visual, focus on the holistic experience to ensure everything is tight and efficient (maybe even delightful).
- Remove the hamburger menu, I've seen more and more data showing Hamburger menus hinder discoverability and efficiency. Read more about killing the hamburger here.
Below is a prototype of the new menu animation that more closely matches standard menu interactions (slowed for demonstration purposes).