Delta Airlines

*unaffiliated with Delta Airlines

People: Just me.

Stuff I did: Reverse Engineer UI, Analyze Existing App, Propose New Solutions, Party.

Internet Magic Keywords: User Experience, User Interface, Human-centric Design, Case study, and Redesign.

I am a huge fan of the Delta Skymiles program. I frequently use the app and wanted to try to make it better.

Current App

The current Delta app’s main function is to view your Skymiles account and book your next flight. As soon as you login, you are immediately directed to your account.

the current screenshot of the Delta App Login Page
a screen shot of the current Delta App Skymiles screen
a screenshot of Delta Airlines current booking screen
a screenshot of the details page screen for the delta app
1
2
3
4

1. Log In Screen
2. Skymiles Account
3. Book Flight Itinerary
4. Flight Details

Deconstruction

Using the Type Ninja chrome extension, we identified Delta is using the "Whitney" typeface.

a screenshot of type ninja Delta website Whitney typeface

The first thing I did was try and understand the logic of the UX/UI by reverse engineering the app. This was done simply by copying the layout and typeface exactly.

Using a series of rulers, guides, and overlays we can quickly get a copy of the app layout.

a screenshot of the ruler guides in figma aligning the screenshot to the redesign
a closeup of overlaying the current screen with a redesign for the Delta App
a screenshot from Figma showing the traced outlines of the current app
1
2
3

1. Ruler alignment
2. Overlaying current app
3. Outline of app

Log In

The login screen was pretty straightforward.

Current Screen

the current screenshot of the Delta App Login Page

New Screen

a PNG of annotated login screen redesign for the Delta App
Account Skymiles

For anyone new to the skymiles program, understanding the tier system and how to advance is pretty complicated. I wanted to simplify the screen by combining the two requirements needed to advance to the next level.

MQMs, MQS, MQDs, and card spend are all very complicated topics. I created a bottom link that would explain more.

Current Screen

a screen shot of the current Delta App Skymiles screen

New Screen

a redesign of the Delta App Skymiles progress bars
Choosing a Booking

This is by far the most complicated screen on the app. We land on this page after we select the airport flying out and the destination. We are presented with lots of variables all at once. Each card has it’s own price, take off location, duration of flight, time of departure, and amount of stops. Also included is information for other carriers, layovers, layover durations and a bunch of other information.

To tackle the load of information, I focused on the most important thing to the customer: cost and time. All other information has been moved into “View Details” and has been reworked from a link, into a more digestible timeline.

Below are the screens for choosing a booking and viewing more details.

Current Screen

a screenshot of Delta Airlines current booking screen

In the current version, clicking on “View Details” redirects you to another page. You are presented information in a table format.

a screenshot of the details page screen for the delta app

New Screen

a png of the redesigned Delta Booking page with notations
Final Screens
a screenshot of the redesigned delta screen login pagea screenshot of a redesigned Delta Airlines App Skymiles screena screen shot of a redesigned delta airlines booking screena redesigned screenshot of Delta Airlines Booking Details screen
1
2
3
4

1. Log In Screen
2. Skymiles Account
3. Book Flight Itinerary
4. Flight Details

If I worked at Delta:

Of course this was just a fun exercise. Moving forward, I would have loved to interview passengers to see what they think about the redesign. Would something like this even work? Is this better or worse than before? What would they like to see?