Responsive Flight Booking Path MONARCH AIRLINES

Re-designing the way customers book flights.


Project Overview

As lead product designer at Monarch Airlines, a large part of my overall plan was to improve the design direction by aligning the design styles across all platforms including app, web and other devices. This project was to re-design the flights booking path to offer users a brand new and fresh Monarch digital experience. During the course of the project, I designed with web responsiveness in mind whilst also conforming to Material Design style so that the designs could be easily transferred to the iOS and Android app, completing the alignment of designs across all channels.

Following my usual routine, I kicked off the project with heavy competitor analysis. By viewing the booking path of our main competitors, I was able to pick key points which would be valuable in the decision making process for our own booking path. I was also able to decide which features we would be able to improve on and which features may not have been necessary for the success of our own booking path. It was interesting to note the variety and style of language used across our competitors, this also helped us to pinpoint the type of language we would use in our own since we needed to tailor it to a specific prestige demographic.

Flight Selection

During my research, I used Google Analytics to analyse our old booking funnel drop-out rates. This showed that the flight select page is where most users drop out of the booking funnel as only 50% of initial users progress past this page. Competitor analysis also showed that it can be extremely challenging to get this page right since the end result is usually a cluttered mess or a page which required lots of scrolling by the user which results in a bad user experience (see example above). In order to get this page right, I took the best and worst features of our competitor designs and created my own version of what I thought would offer the best experience for this page. Since mobile devices are largely gesture based, I made full use of this by making the date carousel draggable as well as tappable. In addition, I designed the page so that the least amount of space is wasted whilst maintaining a clean look. This was so that we could minimise the amount of scrolling required on the smallest of devices and offer as much information on the screen as possible from the get-go.

Usability Testing Session

The new booking path designs were implemented by our development team after months of collaborating with them and showcasing my designs to the business. Once this was complete, I set up a usability testing session by sending a company-wide email asking for volunteers from every department. Many people applied to take part in the testing session and I ran the session from 1pm - 4pm with people coming and going over the 3 hours. During the session, I monitored the product usage closely as our volunteer testers were asked to complete different tasks ranging from adding seats and bags to completing a booking for a family of 15. I noticed a few patterns of confusion, especially when it came to adding extras and viewing a summary of what extras were added for which passengers. Other issues included back-end time-outs, finding the seat map key and having to re-enter flight search data when navigating back through the booking path. I captured all of the feedback and made the necessary iterations to my designs which were then applied to the improvements made in the next sprint. Regarding the user interface design, all testers were extremely pleased with the new and updated paint job which I gave our booking path.

UI Design