UI Explorations

air transat ‘my trips’

Improving ‘My trips’

Friendlier patterns for scan-ability and ease of use.

UI improvement

simplicity

figma

Context

My partner was recently flying Air Transat from Toronto to Lisbon for work and had a seriously frustrating time trying to figure out when her flight was departing and arriving. The hierarchy of information and the navigation patterns chosen by Air Transat made it difficult to access the key information she needed as a user.

Current Interface

The default view displays crucial details like the flight dates in a low-contrast, small text line over an image. Further details are hidden in a horizontal chip rail, and high-priority real estate is used for confusingly meaningless elements.

One of the two most important sections is needlessly hidden in this horizontal chip rail.

One of the two most important sections is needlessly hidden in this horizontal chip rail.

One of the two most important sections is needlessly hidden in this horizontal chip rail.

Prime home page real estate occupied by a confusingly arbitrary progress tracker.

Prime home page real estate occupied by a confusingly arbitrary progress tracker.

Prime home page real estate occupied by a confusingly arbitrary progress tracker.

One of the two most important sections is needlessly hidden in this horizontal chip rail.

Prime home page real estate occupied by a confusingly arbitrary progress tracker.

I have to assume that won’t always say “Up to date”... if and when that day comes, I’ll remind the user to pull to refresh then.

I have to assume that won’t always say “Up to date”... if and when that day comes, I’ll remind the user to pull to refresh then.

I have to assume that won’t always say “Up to date”... if and when that day comes, I’ll remind the user to pull to refresh then.

Three of the most crucial pieces of information occupying very little vertical space and attention.

Three of the most crucial pieces of information occupying very little vertical space and attention.

Three of the most crucial pieces of information occupying very little vertical space and attention.

I’d prefer a “softer” navigation element than an ‘X’ in this case. Don’t even want the slightest chance that someone worries they’re cancelling their trip.

I’d prefer a “softer” navigation element than an ‘X’ in this case. Don’t even want the slightest chance that someone worries they’re cancelling their trip.

I’d prefer a “softer” navigation element than an ‘X’ in this case. Don’t even want the slightest chance that someone worries they’re cancelling their trip.

I have to assume that won’t always say “Up to date”... if and when that day comes, I’ll remind the user to pull to refresh then.

Three of the most crucial pieces of information occupying very little vertical space and attention.

I’d prefer a “softer” navigation element than an ‘X’ in this case. Don’t even want the slightest chance that someone worries they’re cancelling their trip.

Objectives

What would I like to improve with this interface?

Visibility - make important details easier to access and see quickly.

Visibility - make important details easier to access and see quickly.

Efficiency - make it faster and easier to get to the important things, and hide the low-priority items.

Efficiency - make it faster and easier to get to the important things, and hide the low-priority items.

Improvements

Use valuable real-estate for important details, make actions easier to perform, stash low-value information lower in the layout.

Efficient use of the top section accomplishes the tasks of the previous “Preparation” section.

Efficient use of the top section accomplishes the tasks of the previous “Preparation” section.

Efficient use of the top section accomplishes the tasks of the previous “Preparation” section.

This is the level of prominence I would expect from an “At destination” section on an airline app.

This is the level of prominence I would expect from an “At destination” section on an airline app.

This is the level of prominence I would expect from an “At destination” section on an airline app.

Two prominent tabs represent the two information spaces that are most important to this user.

Two prominent tabs represent the two information spaces that are most important to this user.

Two prominent tabs represent the two information spaces that are most important to this user.

The high visibility middle section is focussed on important details.

The high visibility middle section is focussed on important details.

The high visibility middle section is focussed on important details.

Efficient use of the top section accomplishes the tasks of the previous “Preparation” section.

This is the level of prominence I would expect from an “At destination” section on an airline app.

Two prominent tabs represent the two information spaces that are most important to this user.

The high visibility middle section is focussed on important details.