Brief

I completed this project for my Professional Diploma in UX (User Experience) Design with the UX Design Institute. The brief was to research airline websites or apps then develop a new user interface that tackled the problems faced by users. As the project is long I’ve broken this case study into five sections. This section focuses on the design principles underlying the interactivity of my design. The EasyJet linear booking process worked reasonably well so I fixed the problems rather than starting from scratch.

“It’s very easy to be different, but very difficult to be better.”

Sir Jonathan Ive

Project

Overview of the sketching process

Please note, this section discusses the reasoning behind some of my design choices. For my earlier sketches, please see the previous entry in this series (Part 3).

In order to keep the sketching process manageable I minimised repetition by:

• Using tracing paper to ‘grey out’ areas of the sketch, putting the focus on the modal boxes for choosing dates.
• Overlaying pieces of paper for sliding drawers / off canvas menus and completed fields.
• Printing out the universal elements of the linear booking process so I could concentrate on the unique elements for each screen.

As I have a marketing background, I began proposing offers and copy for the hypothetical marketing team to approve or replace.

Sketching the home page

My user research showed that the primary use case for such websites is booking flights, so this functionality takes the prime position in the top left of the page. I aimed to reduce the user workload by minimising clicks and using smart defaults (e.g. autocompleting the ‘Flying from’ field with the user’s nearest major airport).​​​​​​​

The second most common use case is browsing possible destinations. I placed this option to the top right. I proposed focusing on destinations that can be reached directly from their nearest airport (Edinburgh in this case) since people often have limited time to search for flights and to travel. The option to search for flights from across the UK would be available below the fold (as a Kayak-style map-based search).

Checking in and checking flight status were reasonably common tasks, so I experimented with a ‘check in’ option added to the main navigation bar and a flight update ‘ticker tape’ just below. The ticker tape was not included in the final design as it became too cluttered. Flights updates are often sent by email or text nowadays, so I decided that this was a low priority feature.

Sketching date-picker modal boxes

I sketched out a modal box for choosing dates. I chose EasyJet’s sliding drawer option (instead of a pop-up box) as it can easily show several months at once, which is handy when your possible travel dates are towards the beginning or end of a month. It also allows viewers to see the details of their booking on the left at the same time. This could be important if you’ve been interrupted during the process and have lost track of what you have done so far.

The rest of the screen would be greyed out to increase the focus on the date picker. Dates with flights would be highlighted and dates without flights would not be clickable. These constraints would ensure users did not waste their time trying to select dates when the airline does not fly that route (unlike British Airways).

Sketching the linear booking process

During usability testing of EasyJet’s design, I found that showing flights for the dates either side of the chosen date was popular with some users but confusing for others. I compromised by making the chosen date flights larger, but showing flights either side in smaller boxes (see comparison below). This would of course need extensive usability testing before being implemented. 

On EasyJet, users missed the transition from choosing seats for outgoing flights to choosing them for the return flights. For this reason, I changed the label of the ‘Continue’ button to ‘Select return flights’ on the first seat-selection screen. I also emphasised the difference by stating “Select seats – outbound” or “Select seats – return” in the top bar.

Rather than forcing users to click through lots of upselling screens, I prompted the marketing team to come up with persuasive messaging and personalised offers. Even if the user has not logged in, we could glean some information from their booking. If they are flying with children you could recommend a family-friendly hotel. Customers who book extra legroom seats would probably appreciate a larger car, even for a short city-break.

As an aside, I noticed that EasyJet did not have a progress bar on their design. Maybe the high number of upselling screens was the reason!

The checkout process for new users was rather long, so I used progressive disclosure to make it less daunting. When it came to prototyping I removed fields that asked for unnecessary information, such as ‘Are you travelling for business or leisure?’ Being asked for more information than necessary is a common user complaint. Where users might not know why we need the information I also added an explanation.

Conclusion

Sketching out these interactions highlighted how design principles and patterns could address users’ pain points. As I was new to Axure, making changes on paper was a lot quicker than trying lots of different approaches on prototyping software.

Previous: User flow, Information Architecture and navigation
Next: Prototyping and Wireframing