Tracking flight prices

16 Aug 2019


The goal of this project was to design a flight tracking email notification for the client. The client,, is a flight aggregator product backed by Singapore-MIT Alliance for Research and Technology (SMART). They had a great product which used hundreds of flight ticket providers as its data source. More often than not, it was able to find cheaper prices than more obvious flight aggregators e.g. Kayak or Skyscanner.

They developed an algorithm to track flight prices from a certain origin to a certain destination. One of the unique features of this algorithm was that the destination could be fuzzy, meaning one could add a country, or a region as the destination instead of a particular airport.



Where to hook

user flow for flight tracking
User flow for flight tracking

All the inputs that existed on the webpage were interacting with the map directly or indirectly. One could easily put a “track flights” button in the bottom interface, but it would have broken the synergy that the interface had with the map. A button (or a link) was required to hook into the tracking interface which could then allow users to manage the flights they are tracking.

screenshot of existing product home page
screenshot of existing product home page

The position of the hook (or call-to-action, CTA) was a point of discussion in multiple meetings even after I started designing the interface to manage flight tracking. An observation about myself, made me realize that the most natural place where I felt like tracking a price was immediately after I search for a flight ticket. After a bit of discussion, we added a CTA on flights list page, which appeared after a user selected the origin and the destination cities.

Flights-list page with track prices button
Flights-list page with track prices button

However, for both business and design reasons, redundancy is a good practice. This was especially true for this case as the flight tracking was possible for countries and regions (not just cities). So we added another CTA for flight tracking right next to the destination search bar which will take the user to tracking interface with pre-filled destination (same as the destination search bar).

Searchbar with tracking icon
Tracking icon in the destination search bar

Designing interface

We lacked the infrastructure to do A/B testing for our ideas, while only having the time to pursue one of the ideas. So without questioning the lightbox constraint, I designed with it.

Initial screen for tracking flights

The initial wireframe was designed considering that the CTA to reach this interface will only be available once the city had been chosen. As I learned about the ability of the algorithm to track prices to countries, continents or regions, I realized that the ability to change the tracking destination should be present. The following were the iterations for the design.

wireframe for initial popup state
Tracking popup wireframes and decision

Completing the flow

The following are the rest of the screens for the whole experience that follow the similar design language. The user email was the only identifying input we asked for, not even a password. The users had the ability to unsubscribe (or say they didn’t sign up) from the email we sent them when they started tracking flights.

Screens in the flow
The tracking flights management and addition screen after email input

Desktop version

The desktop provides for a lot more space as compared to the mobile devices. There was room for more functionality in one view, which we did. And here was feature parity between desktop and mobile screen interfaces.

desktop initial screen
Tracking initiation interface on desktop

desktop screen 2
Tracking management and addition screen on desktop