Expedia Accessible Map

Keyboard Accessible Map for Booking Hotels

At-a-glance

Expedia serves a user base of over 48 million active travelers. Within this community, 6% of Expedia.com and 40% of Vrbo.com users, depends on maps for their hotel bookings. However, the current map interface falls short for those who depend on keyboard navigation. This issue affects a wide range of users, from individuals with motor disabilities to efficiency-focused power users, and even those facing temporary situations such as physical injuries.

In 2023, I partnered with the Expedia Group Design System (EGDS) Digital Accessibility team and the Maps team to revolutionize the keyboard navigation experience on maps. This redesign made map exploration fully accessible and intuitive using only keyboard controls, a complex challenge due to the linear, non-spatial nature of keyboard input. The result significantly improved independence and ease of use for users navigating hotels on maps without a mouse.

My Impact

• Set a new accessibility benchmark for map interfaces by reducing keyboard navigation time by 60% compared to leading competitors.
• Elevated the System Usability Score (SUS) from 19.7 to 82.2.
• Achieved full compliance with WCAG 2.2 AAA criteria, successfully mitigating legal risks & ensuring accessibility for all users..

What I did

• Redesigned the hotel shopping experience on maps for keyboard users
• Enhanced map component’s accessibility within the design system
• Supported the development of a live sandbox for real-time usability testing
• Evaluated the design with usability testing & WCAG evaluation

Preview

Watch Keyboard Kevin in this 3-minute video as he looks for hotels for his upcoming trip to New York, using only the keyboard. Facing a situation where his mouse is unavailable and his trackpad is broken, Kevin shows the seamless hotel shopping experience on the redesigned map interface, even with keyboard-only input.

Technical Constraints

Keyboard's “Tab” sequence cannot meet the dynamic needs of map exploration.

The primary technical constraints of keyboard navigation are rooted in its linear nature, which relies almost exclusively on the “Tab” key to move through interactive elements. This approach starkly contrasts with the dynamic, exploratory nature of map interface experience, leading to a significant usability divide for keyboard users.

The heuristic evaluation further revealed that “Tab” sequence among hotel pins was locked to the sort order of search results, which has no relation to their location on the map. This mismatch of tabbing order and visual display introduces an additional layer of unpredictability to the keyboard users.

Here's an animated GIF showcasing the current keyboard navigation. As a user moves through pins using the "Tab" key, the focus unpredictably jumps among various pins scattered across the map. From the backend, this sequence matches the 'recommended' hotel search results. However, from the user's perspective, the seemingly random pattern of focus shifts appears to lack clear logic.

Animated GIF illustrating the current keyboard navigation on a map interface.As a user presses the 'Tab' key, the focus jumps among various pins scattered across the map, displaying no discernible pattern or logic in the sequence.

User Needs & Pain Points

Users need to frequently switch between moving the map and checking hotel info.

To further understand user needs and frustrations, I conducted 9 mini usability tests and 4 interviews with keyboard power users. This research highlighted that finding a hotel involves a repetitive cycle. Rarely do users locate their desired hotel on the first try, leading them to often switch between moving the map, navigating pins and checking hotel cards. Through the research, I also identified three major user pain points as following:

1. People are not sure where the focus is. They find it hard to tell which pin is focused against the busy background. Sometimes, pins are overlapped too. 2.People struggle with pin navigation. They feel annoyed that they know which hotel pin they wanted to check, but they can't go there directly. 3. People have difficulties controlling the map. They feel frustrated that they can’t move the map freely when they’re browsing hotel pins

Problem Statement

How might we enhance keyboard navigation for hotel exploration on maps, overcoming technical limitations to create a more seamless and intuitive experience?

Ideation & Validation

To address the 1st & 2nd user pain points

Enhancing pin navigation & map control via keyboard

I interviewed keyboard power users to identify effective navigation patterns and conducted a comparative analysis. I then brainstormed potential solutions and, after evaluating feasibility with accessibility experts and stakeholders, we decided to move forward with the center focus area & legend as the best approach.

To address the 3rd user pain point

Improving component visibility on the busy map background

I redesigned the focus state for map components to help users distinguish the currently focused pin. And collaborated with developers to dynamically adjust the z-index, ensuring the focused element always appears in the foreground.

Redesign focus state. The current focus state uses a hollow dark blue ring, which blends into the busy map background. To improve visibility, I made the ring gap solid and added an outer layer, ensuring it stands out clearly in all contexts. Bring the focused pin to the front. Pins often overlapped, making it difficult to see the focused one. To resolve this, I collaborated with the developer to ensure that when a pin is focused, its z-index automatically adjusts, bringing it to the front.

Re-assessing Industry Benchmark

Why Google Maps' approach doesn’t fit Expedia

As the industry leader, Google Maps sets a high bar for map interactions and accessibility. However, after closely analyzing their design, I identified an opportunity to create a solution better aligned with Expedia’s unique user needs. In Google Maps, when a property card opens, keyboard focus shifts away from the map and the legend disappears. For keyboard users, returning to the map requires tabbing through multiple elements just to reach the close button.

If we were to adopt this design, it would introduce unnecessary friction for Expedia travelers, who frequently switch between moving the map and checking hotel details. Our users need a more fluid and efficient experience, one that keeps navigation intuitive and focus consistent.

Flow of Google Maps: Pin opens card, map loses focus and legend disappears, tabbing through multiple elements required to return

Can I do better than Google Maps?

To find a better approach, I revisited user needs: users need to frequently switch between moving the map and checking hotel info.

The key word here is "checking." Users primarily want to see hotel details at a glance while maintaining control of the map. They don’t need to actively interact with the hotel card itself.

Design Solution

The user flow is straightforward, but navigating with limited keyboard controls is challenging. My goal is to ensure that all the new interactions are intuitive and familiar to keyboard users that they can be mastered instantly.

Smooth map exploration & pin selection

In the old experience, users have to “tab” through all the pins and only hope it lands on the one they are interested in. Also, when they use arrow keys to pan the map, if the focused pin went out of screen, they couldn’t move the map any more.

In the new design, the central focus area consistently positioned at the center of the screen. It significantly improves usability by allowing for panning and zooming across the map as users explore hotel options. A legend is also available to help users identify pins within the central area, allowing them to select their interested one either through the "tab" key or directly via number keys.

Left: A highlighted central focus area in blue on the map, enabling users to use arrow keys to pan to map, or tab key to navigate pins. The tab order is the same as the legend. Right: A legend detailing hotels, identified by number and accompanied by their prices, allows users to use 1-9 number keys to quickly select pins.

Adjusted z-index to ensure visibility

As the user navigates through pins, the z-index of the focused one is always adjusted to bring it to the forefront, ensuring visibility. In the given example, the $254 hotel pin was initially covered by the $368 one. After shifting focus to it, it was automatically brought to the forefront.

Left: The pin of $368 is in focus, partially obscuring the $254 pin. Right: After shifting focus to the next pin, the $254 pin gains focus, with its z-index adjusted to ensure it is displayed at the forefront.

Accessing hotel details without losing map control

I differentiated between the focus and select functions. Now, when users press "enter" to select a pin, the hotel card opens, yet the focus stays on the map. This design choice lets users glance over the card's information while maintaining the flexibility to pan, zoom, and explore other pins on the map.

Given that this approach diverges from the conventional "enter" interaction, where focusing and selecting occur simultaneously, I've implemented contextual instructions to assist users in navigating this new interaction model.

Measure of Success

After Figma prototyping, I worked with the developer to implement the core feature in a live data sandbox for usability testing. At the same time, I collaborated with researchers to develop a research plan and selected the SUS (System Usability Score) as the quantitative data measurement tool, tailored for our limited participant group.

Improved SUS (System Usability Score) from 19.7 to 82.2

I conducted usability testing with a group of 8 keyboard users to test the new and old MVPs, with half of users testing new MVP first, and the other half testing old MVP first. Following each test, participants were directed to complete a standardized SUS questionnaire. This method enabled a comprehensive evaluation and comparison of ease of use, efficiency, and effectiveness between the new and old MVPs.

A diagram illustrating system usability score for two MVPs: the old mvp rated 19.7, falls into the category of 'worst imaginable and not acceptable', while the updated MVP, with a rating of 82.2, is deemed 'excellent and acceptable'.

Successfully met WCAG 2.2 AAA criteria

As shown in the table, the old MVP falls short of meeting A level accessibility, while the new MVP can successfully meet AAA level accessibility.

A chart showcasing the compliance of two MVPs with WCAG Success Criteria: The original MVP fails to meet one Level A criterion and two Level AAA criteria, whereas the new MVP achieves full compliance with all applicable Success Criteria.

In Their Own Words

“

I really like the legend that let me know what will jump me into. It seems a lot more logical than me just tabbing and hoping it lands on the one with the price point I want.

Participant 8 | Usability Testing

“

(The new design) makes navigation faster and more efficient. It's pretty intuitive, and kind of matching everything together.

Participant 2 | Usability Testing

“

The two-step entering process is straightforward to me. It aligns with my expectations. And I appreciate the contextual instruction. It's a great idea.

Participant 5 | Usability Testing

Reflections

Team support shines in my first keyboard accessibility project

This solo project had an exceptionally tight 10-week timeline for end-to-end UX design. It was also my first time designing for keyboard accessibility, and I was learning along the journey. Without the incredible support of the team, I wouldn't have been able to complete this project on schedule. This encompassed tasks such as recruiting keyboard users, gathering internal feedback from accessibility experts, engaging with stakeholders, collaborating with the developer to create the sandbox prototype, and strategizing with researchers for the research plan.

Having a plan but staying flexible

Originally, we had set aside one week to develop the live sandbox, but things didn't go as expected. As our developer delved deeper into the project, he found that the coding was more complicated than we initially thought. Through internal discussions, we made the strategic choice to prioritize the development of core features. Then I used both the sandbox prototype and the Figma one to conduct usability tests. This approach allowed us to thoroughly evaluate the user experience, even as we faced unexpected technical challenges, all within our tight timeline.