Ryanair App Redesign
A more intuitive approach to booking and managing flights with Ryanair
Software used
Challenge
A lot of customers complain about Ryanair’s flight booking system because of its usability, which leads to many customers losing trust and preferring to fly with other companies.
Results
-
A new interface free of distractions, giving the user clarity and confidence to navigate the app​
-
A consistent design system that communicates to the user more effectively
-
Findings that can inform a successful app redesign
Expert Review
Using methodology designed by User Experience Strategist Dr David Travis, I identified the specific strengths and weaknesses of Ryanair’s App. Each checklist item required entering a rating of -1 (doesn't comply with the guideline), +1 (complies) or 0 (partly complies). If a particular guideline wasn’t relevant, it was left blank. This quantitative data resulted in an overall score of 78%. By carrying out this process, I was able to identify specific areas which can be a barrier for user adoption and retention.
Competitor Analysis
Key:
Okay - significant usability issues identified
Good - a few slight usability issues, but generally user friendly
Excellent - didn't identify any usability problems
Competitor
Good
Excellent
Okay
Good
Task Orientation
Excellent
Excellent
Good
Excellent
Excellent
Excellent
Excellent
Good
Forms & Data Entry
Excellent
Trust & Credibility
Excellent
Good
Excellent
Writing & Content quality
Good
Excellent
Excellent
Excellent
Good
Good
Page Layout & Visual Design
Excellent
Excellent
Pros
All main tasks are put into individual blocks which nicely contrast with the background, affording strong visibility, reducing clutter.
Orange colour is eye-catching and visual contrast is consistent throughout.
Smaller text on top of photographs doesn't dominate the image, and doesn't look tacky.
Colours are used sparingly and for specific purposes, icons are very clear and consistent with their design language.
Has a navigation bar at the bottom of the screen which is accessible, especially when the labelled icons are highlighted when on a particular page.
The 'Book a Flight' interface is very clear and readable, switching to a dark mode with clear white text.
Cons
Relies on hamburger menu, hiding navigation tools thus killing discoverability.
The prices next to the tickets have GBP after the numbers, instead of the currency symbol £. The way the price is displayed is not obvious to the user, and the font for GBP is also small, which doesn't comply with accessibility.
When on the search page, users have to then click a search button, when they could already be looking at the search flights form. This wastes time and is unnecessarily two steps to get to one step.
A navigation bar is absent and relies on the hamburger menu.
Also, the 'Home' button is below 'Log In' which is not well prioritised in terms of intuitive navigation.
Navigation & IA
Excellent
Excellent
Excellent
Excellent
Home Page
Low Fidelity Wireframe
I pulled out the strong elements from the competitors and began implementing these into my low-fidelity designs on Balsamiq. By having different options for the interfaces, my participants can select which designs work better than others. Producing several visual solutions to select from is a way of working that came naturally to me, coming from an illustration and design background, where I learned not to keep ideas limited when it came to design.
Sign In Page
Home Page
on-tap 'more'
Selecting Flights
on-swipe
up
Navigation - remembering previous booking
>1 Saved search
0 Saved searches
User Feedback
The low-fidelity designs were tested using a heuristic evaluation with four participants consisting of interviews and observations. By taking an iterative approach to user testing, I was able to eliminate designs that did not work, then improve the designs and re-test them.
Key Findings
​
-
Add a cross button on the 'more options' pop-up page, to indicate to the user to close
-
When typing in the airport, have the page zoom in slightly so the user can read it more easily
-
When the user starts typing a destination, nearby airports should be displayed for the user to choose from.
Current Design System
I created a style tile for Ryanair's current interface design, and one for high-scoring competitor Vueling.
Consistency & Visibillity
-
Ryanair benefits from a strong and recognisable logo design. However, the overall design language lacks cohesion due to inconsistent use of colour. For example, mid-blue is used for required fields that are left empty. Blue is commonly associated with trust and stability.​​ Red is used effectively in other contexts to signify warnings and prompts, so using it here would be appropriate.
​​​
-
By adopting a more deliberate colour scheme, Ryanair can ensure that its design supports user comprehension and improves overall usability.
​​​​
-
Vueling’s app design is straightforward and consistent, but it faces accessibility issues. The dark grey and light grey navigation bar lacks sufficient contrast, which can hinder readability, particularly in low-light settings or for users with visual impairments. Increasing the contrast between these colours to meet WCAG guidelines would enhance usability without complicating the design.​
​​​​​​
-
In Ryanair's current design system, selected icons are presented in a dark blue. While blue can evoke feelings of loyalty and trust, darker shades are often associated with somber emotions like sadness and depression. This choice risks misaligning the app’s mood with the user's intent.
​
-
By adopting a mid-yellow as the dominant colour for selected icons, as seen in Vueling’s interface, the app could convey a more joyful and stimulating atmosphere. Yellow is associated with happiness and optimism, aligning better with the emotions users might feel when planning holidays or mini-breaks. This simple yet impactful change could enhance user engagement by creating an interface that resonates with the excitement and anticipation of travel.​​​
Colour Transmission
Redesigning the current Design System
Before
After
Changes Made
​​
I changed some of the colours from the original design system to create a stronger contrast and increase visibility, particularly the form text from blue to black and blue to a mid yellow for the selected icons. By using this colour harmony technique, it makes essential elements more prominent, thus providing the user with a better understanding of where they are on the app, find what they're looking for and generally make it easier for them to navigate.
​
The colour for 'Form text - required area not entered' has been changed from a mid blue to red, communicating warning to the user that they cannot proceed without entering data in the required fields as well as keeping it consistent with the red used for the important updates.
​
The Ryanair Logo, font sizes and styles were not altered because they are successful in meeting the criteria for W3C accessibility standards.
List of Recommendations
-
Make 'Back to Home' button text and border darker
-
Use different icon for check-in on Navigation Bar, something inexperienced users would understand
-
Indication that the ticket prices have changed in the Saved Searches page
-
An alternative terminology for 'Saved Searches'
-
Make the 'Saved Searches' link on the menu clickable in its whole area, not just the number in the circle
-
Use yellow to draw the eye on the saved searches as a way to draw the eye in to resume so as not to confuse 'back to home' as a button to book the flight
-
Omit the phrase 'all savings will be lost' on pop up box for when user wishes to delete a saved search
Future extensions of this project would be to implement these changes, conduct new user testing and measure results from this design with the new design, as well as the current Ryanair design with the new design - prototypes and design system.
Next Steps
​​Having studied some of the apps of the other competitors in this project, I noted several flaws in them. There is a lot of potential to do a redesign of the lower scoring competitors, namely British Airways and TUI. Further research could entail carrying out biometric user testing – using eye tracking technology to see where the hot spots are on the interface. It could involve actually collaborating with Ryanair, using their resources and taking into account their business needs. Following that, one could work with Ryanair to implement A/B testing with existing customers to establish what works “in the wild”.​
Biometric user testing – using eye tracking technology to see where the hot spots are on the interface.
Option
Option
A
B
