KLM_hero_screen_mockupslrv2.jpg

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.

process__Surveys.png

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”

process__depth interviews.png

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.

process__User tests.png

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.

process__Benchmarking.png

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.

KLM stickiesv1.jpg
KLM stickiesv1.jpg
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

klm user flow_closeupv1.001.jpg

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.

show flights png.png

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

share feat png.png

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.

Components display.jpg

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

Components display.jpg

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.

showflights2.png
fly from 2.png
selectdate 2.png
going out2.png
KLM_13b.jpg
seats2.png
checkout 2.png
Outcomes
  • Introduction of a feature that enabled sharing of information whilst shortlisting flight options

  • Removal of cross promotions that interrupted the flow and irritated users

  • Ensured all labels and terminology were clear

  • Presented additional costs clearly, such as charges for luggage with transparency to build trust

  • Improved the overall aesthetic to enhance the user experience