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.
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
“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
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
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.
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