16 Aug 2019
The goal of this project was to design a flight tracking email notification for the client. The client, greatescape.co, 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.
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
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
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).
Tracking icon in the destination search bar
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.
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.
Tracking popup wireframes and decision
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.
The tracking flights management and addition screen after email input
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.
Tracking initiation interface on desktop
Tracking management and addition screen on desktop