Research and redesign for a flight booking app for IOS for Dutch airline KLM

SELF INITIATED CONCEPT

In this 4 month project I conducted and analysed qualitative and quantative user research in order to define problems encountered by users during the flight booking process. Then I redesigned the IOS app from initial sketches, low fidelity wireframes to high fidelity prototypes ready for handover.

Research

User Testing

Wireframing

Prototyping

Step 1 - Research

My research revealed users felt overwhelmed by too much information on certain screens, frustrated by a lack of sharing features and put off by distracting promotions. These delivered a poor user experience and became my goal to solve.

17 x RESPONSES FROM
ONLINE SURVEYS

“I can’t stand all the add ons (cars, insurance) always in your face”

“Make the app better – make the prices clearer”

“Less cross selling”

3 x DEPTH
INTERVIEWS

Users often returned to the app and website before making a booking, in order to share flight options with fellow travellers. Many felt frustrated they were not able to easily share within the app.

4 x USABILITY
TESTS

Users found promotional
ads irritating. Many users lost their way, or were confused at some point along the journey due to vague labelling and too much information on one screen.

4 x COMPANIES BENCHMARKED

A benchmarking exercise with British Airways, EasyJet, Virgin and Expedia helped pinpoint approaches that were best-in-class and identify areas for improvement.

Step 2 - Analysis

I reviewed the research data and built an affinity diagram that contained 70 feedback points, which I grouped in to 6 categories that highlighted key insights.

Key Insights & Observations

Trust was a crucial issue - users wanted transparency of price and clarity of all fees

Clarity of terminology - especially for labels - to ensure smooth, fast user flow through the app

Volume of information - users felt some screens were overloaded with information, and wanted additional explanations to enhance labels

Unsolicited promotions - users found these an irritating interruption

Lack of ability to share flight information easily - this was a frustration to users and increased the time required to book a flight

Step 3 - User Flow

My research informed the creation of a revised user flow, in Sketch, showing screens and screen states from flight selection through to checkout. My use case was two adults taking a return trip with check in luggage and reserved seats.

Step 4 - Wireframes

I introduced a new feature to help users share flight options with fellow travellers. I improved the legibility of flight options by improving how information was grouped and by rewriting labels to increase clarity.

Labels are unambiguous and concise throughout to address users' clarity concerns.

The new share feature addresses a pain point without adding unnecessary steps

Step 5 - Design

The new design system, built in Sketch, had both aesthetic and functional benefits – the colours identified different pricing tiers, seating plans and navigation – addressing the lack of clarity around pricing.

Reusable components included a button system with interchangeable colour and icon states, icons suite and key information groups

Colour is used as a key differentiator in the navigation system, across different pricing tiers and seating plans.

Step 6 - Prototyping

The redesign improved legibility through clear colour coding, clean typography and utilising progressive disclosure of information, to avoid users experiencing cognitive overload.