Work in progress.
For images, videos, and extra visual materials; see the Portfolio Assets database.
I’ve been working with easyJet for many years - slowly improving the UX of microservices alongside working to align the design of easyJet flights (.com) and easyJet Holidays. In 2021, I was given the opportunity to completely redesign the global navigation bar. Customers were struggling to find key information, and the interface had grown cluttered and outdated. As the Lead Design Engineer, I spearheaded a comprehensive redesign of the navigation bar. The goal was simple: make it effortless for users to find what they need, whether booking a flight, managing a trip, or seeking support. This case study recounts how we approached the project, the challenges we faced, and the solutions we implemented to dramatically improve the user experience.
Initial Requirements
The project kicked off with an in-depth review of the existing navigation and its shortcomings. Through analytics and customer feedback, we identified several critical usability issues in the old navigation bar:
Cluttered Menus: The old nav had too many top-level options, which overwhelmed users with choices.
Unclear Labels: Some menu titles were vague or filled with jargon, confusing first-time visitors (for example, 'Extras' did not clearly convey that it contained add-ons like car hire and insurance).
Poor Mobile Experience: On mobile devices, the navigation was hidden behind a generic hamburger icon without clear labelling, resulting in users missing important sections.
Difficult Account Access: Functions like 'Manage Booking' and 'Check-in' were not immediately visible, leading to frequent frustration.
These issues were formalised into our requirements. We needed to create a navigation bar that was simple, intuitive, and consistent across devices. The solution also had to integrate easyJet’s multiple offerings (flights, holidays, car hire, etc.) in a coherent way. From a technical standpoint, the new design had to be lightweight and easily maintainable within easyJet’s existing web platform.
Competitive Research
Before sketching any solutions, I conducted competitive research to gather inspiration and best practices. I analysed the navigation designs of other leading airline and travel websites (such as British Airways, Ryanair, and Expedia), focusing on how they organised content and guided users. Some common patterns and insights emerged:
Minimalist Top-Level Categories: Competitors generally limited their primary menus to a few broad categories (e.g., Book, Manage, Help), keeping the header uncluttered.
Prominent Calls-to-Action: Many airline sites featured a clear "Book a Flight" button or search bar right in the header, indicating the main user task.
Effective Use of Drop-Downs: Instead of exposing every link at once, competitors used drop-down menus or mega-menus that revealed sub-options on hover or tap, reducing cognitive load.
Mobile-Specific Patterns: For mobile, almost all used a well-labelled menu icon or a bottom tab bar to make navigation accessible without requiring users to scroll back to the top.
These findings were invaluable. They confirmed that our initial direction – simplifying the nav structure and highlighting key actions – was in line with industry best practices. Additionally, seeing others’ solutions helped us avoid potential pitfalls and sparked ideas for our own design, such as adopting a sticky header that remains accessible as users scroll.
User Research & Usability Testing
With a clearer idea of the goals, we turned to our users for direct input. We conducted usability testing sessions and interviews with a diverse group of easyJet customers. We asked participants to perform common tasks using the old navigation (e.g., find flight status, add baggage to a booking, locate travel information) and observed where they encountered friction. The user research revealed telling patterns:
Users often overlooked the 'Extras' menu entirely; they didn’t realise it held important items like travel insurance and car hire.
Several users struggled to find the Manage Booking section, expecting it to be more prominent. One user remarked, "It took me ages to find where I could change my booking – I didn’t expect it under the main menu."
People on mobile devices expressed frustration with the hamburger menu; one tester said they felt lost because the menu offered little context about what it contained until opened.
This qualitative feedback, coupled with task success rates and time-on-task metrics from the tests, reinforced the need for drastic improvement. It guided our priorities by highlighting which parts of the navigation were most problematic. For instance, making 'Manage Booking' and 'Check-in' easily accessible became top design objectives after seeing users struggle.
Design Decisions
Armed with research insights, we set about designing a solution that directly addressed the pain points. I led brainstorming workshops with our UX team and sketched initial concepts. We then iteratively refined these ideas into interactive prototypes, which we validated with users before finalising the design. Key design improvements included:
Streamlined Information Architecture: We reorganised the navigation into four primary sections: Book, Manage, Explore, and Support. This new IA meant all booking-related services (flights, hotels, car hire, etc.) fell under Book, account-related tasks (check-in, boarding passes, flight status) were under Manage, inspirational content like destination guides under Explore, and FAQs/contact info under Support. This structure was far more logical to users and eliminated the ambiguous categories from before.
Clear, Descriptive Labels: Every menu item was renamed for clarity. We replaced jargon with self-explanatory terms. For example, 'Extras' was renamed to 'Add-Ons', and 'Flight Info' became 'Flight Status'. This way, users could predict what they’d find in each section without guesswork.
Enhanced Visibility of Key Actions: Recognising the importance of certain tasks, we pulled them out of the menus and made them prominent. The navigation bar now included a distinct "Check-in" button and a "Manage Booking" link at the top level, visible on all pages. We also added a search icon to the header for those who prefer to search directly.
Responsive & Mobile-Friendly Design: The new navigation was designed mobile-first. On small screens, it collapses into a clearly labelled menu button that opens a full-height side drawer, listing the same sections in an easy-to-tap list. We ensured that the hamburger icon was accompanied by a "Menu" label beneath it — a small detail from our research that significantly improved discoverability.
Visual Hierarchy and Feedback: We decluttered the visual design by adopting a clean, flat style in line with easyJet’s branding. Important links and the active page are highlighted in easyJet’s signature orange for visibility. Dropdown arrows and subtle hover effects were added to indicate which items were expandable. We also implemented a sticky header; as users scroll, a slimmed-down version of the nav bar remains at the top of the screen, keeping essential navigation only one click away.
These design decisions were continuously tested and refined. We conducted A/B tests and additional usability sessions on prototype versions of the new nav, gathering feedback that led to small tweaks (such as fine-tuning terminology and button placement). By the time we were ready to implement, we were confident that the design was user-validated and poised to solve the issues identified in the old navigation.
Technical Execution Highlights
Implementing the new navigation bar posed its own challenges. As Lead Design Engineer, I collaborated closely with front-end developers to ensure our design vision translated smoothly into code. Some highlights of the technical execution include:
Seamless Integration: The site was built on a legacy platform, so we developed the nav component in plain HTML/CSS/JavaScript to integrate without heavy dependencies. We used progressive enhancement techniques; on older browsers the menu still functioned as a simple list, while modern browsers received the full interactive experience.
Performance Optimisation: We knew the navigation loads on every page, so it had to be optimised for speed. The HTML for the menu is now loaded inline with critical content, with heavier scripts deferred until after the initial render. We also sprite-sheeted or inlined small icons to minimise additional HTTP requests.
Accessibility: From the start, we built the nav to meet WCAG AA standards. We implemented proper ARIA roles and keyboard navigation support so that screen-reader users and those navigating via keyboard could easily use the menus. For example, pressing Tab cycles through menu links in a logical order, and the Enter key opens a dropdown submenu when focused.
Responsive Implementation: The engineering team created a mobile-specific navigation component for small screens that reused the same data as the desktop menu. This avoided code duplication and ensured consistency. We paid special attention to touch targets, making sure buttons and links were large enough for comfortable tapping on a small screen.
Testing & QA: Rigorous testing was done across browsers (Chrome, Firefox, Safari, Edge) and various devices to iron out any bugs. We also ran an A/B test on a small percentage of traffic before full launch to ensure the new nav did not negatively affect conversion or performance metrics. The test results showed neutral-to-positive impact on conversions and a noticeable drop in support queries about navigation issues, giving us the confidence to roll out to all users.
One interesting technical challenge was implementing the sticky header without impacting site performance. We solved this by using a simple CSS solution and toggling classes on scroll, avoiding heavy JavaScript listeners. This delivered the desired effect with minimal overhead.
Additional Considerations and Variants
Designing a navigation system for a platform like easyJet meant considering multiple scenarios beyond the standard website header. We planned for several variants and special cases:
Logged-In vs Guest Users: The navigation adapts to show a user’s name and a quick link to their profile when logged in. During the redesign, we ensured this personalisation fit seamlessly, adding an account icon and a dropdown under the user’s name for account options (e.g., logout, voucher balances).
Booking Flow Context: In the flight booking funnel (from flight selection to payment), we introduced a slimmed-down header to minimise distraction. This variant only displays the most essential elements (the easyJet logo for home, and a help link) so users stay focused on their purchase. It was a careful balance – providing an escape route if needed, without luring users away mid-booking.
easyJet Holidays and Other Services: easyJet’s ecosystem includes the Holidays section and partner services. We created slight variations of the nav for these contexts: for instance, on the Holidays sub-site, the Book menu defaults to holiday packages rather than flights. The design language remained consistent, so users felt it was all part of the same family of sites.
Internationalisation: We also accounted for longer words in other languages, since easyJet serves many European markets. The layout was flexibly designed so that if a menu label needed two words (or a longer single word in, say, German), it would still display properly without breaking the layout.
Scalability: Anticipating future needs, we built the nav to be scalable. If new sections or promotions need to be added (like a temporary sale banner or a new product link), the design can accommodate it without a complete overhaul.
Throughout these considerations, the guiding principle was consistency. Any variant of the navigation had to feel familiar and intuitive, as if it were the same core design adapted to its context. By planning for these scenarios, we prevented fragmentation of the user experience across easyJet’s services.
Conclusion
The navigation bar redesign delivered a significantly improved user experience for easyJet’s website. By the end of the project, we had transformed a cluttered, confusing menu into a lean, user-centric navigation system. Users in post-launch surveys reported finding information "much easier" than before, and key metrics reflected the success:
Support queries related to "where to find" information dropped by around 30% after launch.
Usage of the Manage Booking section increased, indicating customers were able to self-serve their needs more effectively.
Our A/B testing also showed a modest uplift in conversion for ancillary products like car hire, likely because those options were now more visible under the new 'Add-Ons' menu.
From a personal perspective, leading this redesign was incredibly rewarding. We navigated complex challenges – from reconciling stakeholder desires to untangling technical constraints – and achieved a solution that balanced user needs with business goals. The project not only improved the immediate usability of the site, but also established a more robust design foundation for easyJet’s digital platform going forward.
In summary, the new navigation bar made it simpler for millions of travellers to engage with easyJet online. It stands as an example of how thoughtful design, backed by research and executed in close partnership with engineering, can make a tangible difference in user experience and customer satisfaction.
