Redesigning EF Education First's Navigation

The Challenge

The header navigation supports multiple EF products across various countries and languages, each with different implementations and design patterns. This variety of headers had created a visibly fragmented brand experience. Previous attempts at solving these navigational issues proved inconclusive, with conflicting product demands preventing consensus on a universal header. Different product teams had built their own solutions to serve their specific customers, resulting in a patchwork of navigation approaches that confused users trying to explore EF's full range of educational offerings. Without a unified view of what EF represents globally, a fundamentally new approach to website navigation became necessary.

The Problem in Numbers

Early on during the project, research on one of EF's key products revealed significant navigation issues. One-third of prospects couldn't find relevant programs from the homepage, while over half failed to locate alternative destinations. One user compared the experience to "an educational book without an index or page numbers." A clear signal that our navigation wasn't meeting user needs.

Project Objective

Develop a consistent, customizable, and accessible navigation system that would improve user experience across all devices while providing flexibility for EF's diverse product needs and global markets. While this project focused on solving user experience problems, the fragmented headers also meant duplicate maintenance efforts across teams. The operational cost was hard to quantify, but important to consider.

Research Strategy

Phase 1: Getting to the Root of the Problem

I started by talking to real users: 30 participants across France, Germany, Italy, Spain, and Sweden. Using "walk-the-store" interviews (where users naturally explored the site while thinking aloud), I watched both newcomers and existing customers navigate our products. The mix was intentional. Fresh eyes revealed confusing elements we'd normalized, while familiar users showed workarounds they'd developed over time.

Phase 2: Testing Our Solutions

Once we had a redesigned prototype, I conducted remote moderated usability tests with 9 prospects aged 18-25 to see if our solutions actually worked. These weren't just opinion sessions. I measured specific tasks like finding language courses in Malta or comparing program durations. The mobile-first approach was critical here, since these users were often discovering EF through mobile ads and reflexively reached for their phones when researching education programs, treating desktop as an afterthought.

What We Discovered

Critical Navigation Failures

• Menu abandonment: Most participants ignored the main menu entirely, leading to missed program discovery opportunities
• Lost users: Heavy reliance on browser back button indicated poor wayfinding and context awareness
• Language confusion: Users couldn't determine which languages were available without deep navigation
• Mobile blindness: Product headers lacked visual affordance, preventing users from understanding site structure

Mental Model Mismatches

• Users think by destination > duration > courses, but EF's navigation forced age > program > destination flow
• "Program" terminology confused users: some interpreted it as courses, others as destinations
• Age range overlaps created decision paralysis when programs served multiple demographics

The Double-Menu Problem

Analytics revealed another critical issue with the "dual navigation system": 86% of users clicked the global burger menu (containing corporate links) while completely ignoring the product header's chevron icon below it, despite the chevron containing all the actual product content users were seeking. Participants consistently told us "I didn't realize this was clickable" when shown the chevron, instead hunting fruitlessly through the global menu for destinations and courses.

While eliminating the double-menu entirely would have been ideal, organizational and technical constraints made this unfeasible. However, we did implement one crucial fix: replacing the ambiguous chevron with a clearly labeled "Menu" button. This simple change immediately improved product page findability in testing. Sometimes clarity beats elegance when users' mental models are at stake.

Design Strategy

After converting research insights into actionable problems, I facilitated a cross-functional workshop with one of EF's key product teams. We then translated findings into How Might We statements:

• HMW help users discover relevant programs when they don't know exactly what they're looking for?
• HMW make users' current location and navigation path clear throughout their journey?
• HMW create consistent navigation experiences across all EF products while allowing product-specific customization?
• HMW reduce the cognitive load of comparing destinations and programs on mobile devices?

Exploring Different Directions (Week 1)

The workshop sparked an interesting debate between two completely different approaches:

The "Pills" Concept: The product team proposed sticky horizontal bars with scrollable tags. Imagine destination and program options sliding by like Netflix categories. It looked slick and solved the immediate mobile space problem, but stress-testing revealed critical flaws. Some markets had 30+ destinations while others had 5. Some programs needed lengthy descriptions, others just a city name. The pills couldn't accommodate this reality without becoming a scrolling nightmare.

The Three-Level Solution: The alternative was expanding from 2 to 3 navigation levels with customizable components: flags for countries, tags for promotions, sub-text for context. This gave each product what it needed without breaking the overall system. The room shifted when stakeholders realized this wouldn't just fix today's problems but could evolve with tomorrow's needs.

Building Fresh Components (Week 2)

The initial plan was updating existing Backpack components. Should be straightforward, right? Well, not really. The legacy components were built in Figma's early days, and modifying them was like renovating a house only to discover the foundation couldn't support a second floor.

The decision: start from scratch. This meant more upfront work, but it also meant designers could finally customize navigation without that dreaded "detached instance" warning that breaks design system connections. Given that inconsistent customization was exactly what created the fragmentation problem, building bulletproof components became non-negotiable.

Scalable Component Strategy: Created flexible variants for different product needs:

• Mobile/Desktop base versions
• Extended (with global navigation for cross-product discovery)
• Condensed (product-focused without global elements)
• Desktop L/XL variants for different viewport widths (1280px+ considerations)

Accessibility-First Design (Throughout)

• Screen reader optimization: Extensive testing for smartphone text-to-speech users
• Visual contrast: 4.5:1 minimum ratio across all navigation elements
• Touch targets: 44x44 CSS pixel minimum for mobile interaction zones

Rapid Iteration & Validation (Week 3) Built interactive prototypes for immediate testing, leading to the October validation phase. This tight timeline was possible due to clear research insights and focused scope from the workshop consensus.

Key Constraints Navigated:

• Technical limitations: CMS couldn't dynamically index destinations/programs
• Organizational priorities: Navigation wasn't top priority for all product teams
• Global complexity: Solution needed to work across diverse markets with varying content structures

The 3-week design sprint from insight to testable prototype showed how clear research findings and stakeholder alignment can accelerate design decisions while maintaining quality and accessibility standards.

Design & Implementation

The solution centered on a flexible three-level navigation architecture with two distinct header variants: Extended for EF.com pages and Condensed for standalone products. Each variant featured customizable sub-menus with shortcuts for quick access, categories enhanced with country flags, promotional tags for special offers, and contextual sub-labels providing additional program details. This modular approach balanced global consistency with local market flexibility.

The mobile-first implementation replaced ambiguous UI elements with clear, thumb-friendly touch targets and introduced a "Popular Pages" section based on analytics data. Built from scratch in Figma, the components allowed designers to customize without detaching. That was the key innovation: no more detached instances breaking design system connections. Every interaction met WCAG 2.1 AA standards, from contrast ratios to keyboard navigation patterns, ensuring accessibility across diverse user needs.

Quality Assurance

Thanks to my front-end experience, I conducted hands-on QA by running the code locally to test every implementation detail: margins and padding consistency, typography scaling, and animation timing. I validated keyboard navigation flows, ensuring smooth tab order and focus states across all interactive elements.

Using axe DevTools, I performed comprehensive accessibility audits to verify WCAG compliance, catching issues that visual design alone might miss. This hybrid designer-developer approach bridged the gap between design intent and technical execution, ensuring pixel-perfect implementation while maintaining robust accessibility standards across all breakpoints and interaction states.

Validation Results

Post-redesign testing showed measurable improvements:

• Course findability: 77% complete or minor success (vs. previous failures)
• Destination discovery: 89% success rate in finding alternative locations
• Menu engagement: Product menu button achieved improved affordance compared to previous chevron design
• Popular pages section proved valuable for quick access to relevant content

Design Constraints Identified

• Contextual menu limitations: More than 8 destination options overwhelmed users
• Information hierarchy: External links (EF GO Blog, Language tests) felt out of place in program-specific menus
• Multi-language complexity: Destinations like Malta and Costa Rica created language uncertainty
• Mobile-first requirements: 72% mobile usage demanded thumb-friendly navigation zones

This research provided concrete evidence that navigation issues weren't just usability problems but fundamental business challenges affecting program discovery and cross-selling opportunities. The insights directly informed design decisions that measurably improved user task completion while addressing EF's global scalability requirements.

Closing Thoughts

If I could go back, I'd push harder to kill the double menu entirely. The research made the case clearly: 86% of users clicked the wrong one. We had the data, a working prototype, and buy-in in the room. The organizational constraints I'd accepted as given were actually negotiable. That's what I'd do differently.

The harder part was watching the project stall not for technical reasons, but for political ones. Clashing product priorities between leadership meant the redesign never shipped to the products we'd originally built it for. It taught me that in large organizations, the quality of the work is only half the equation. Building alignment before you open Figma is the other half.

I believe navigation is one of the most underestimated problems in UX. It looks like a UI tweak until you're trying to reconcile 30+ destinations, 5 markets, and two menus nobody wants to take ownership of. The foundation we built is solid. Getting it all the way across the line is the next challenge.