Maps design system

Frameworks, techniques & tools used:
LeadershipStrategyStakeholders managementUX collaborationDesign Excellence advocate Design systemsScalabilityLibrariesApi'sFigmaReact


My role:
Leading UX for the project

Problem: Soooo many maps!

Booking.com is a worldwide known online travel agency, with rapid growth into the whole marketplace and different offerings such as Accommodations, Cars, Flights, Attractions etc., experience on the maps, across these products, become disconnected, cluttered and used legacy technology.

There wasn’t one source of truth for maps. My team and I took the initiative to create a truly scalable and consistent plug-and-play map solution that can serve all the maps across all Booking offerings for all of our users.

Live examples of maps across Booking funnel / product offerings within one website.

Why it’s a problem?

  • user needs to learn many map patterns - mental effort
  • users don’t trust Booking.com maps as they are not consistent and do not represent the brand
  • it’s not scalable - expensive for business
  • a lot of maintenance required - design & dev time and effort

Stakeholders mapping & management

The biggest challenge for this project was its scale. I needed first to understand the full scope of it. While the Product Manager was doing a fantastic job of reaching out to all teams already using maps, I was trying to do the same on a design level. I was reaching out to almost 250 colleagues from different business units not only to learn if they use or plan to use the map on their products but also how they do it, and what challenges their users have.

One of the first documents we created was a stakeholder map. This helped us significantly with managing expectations and planning further communication channels. This work paid off later in the process when we were shipping our first releases. Our stakeholders were always well informed about where in the process we were, and thanks to that they could plan their roadmaps accordingly, making the adoption process faster and smoother.

We quickly learnt that project scope was enormous and demand was huge. We started talks with senior leadership to seek advice on the design and tech approach to make sure we were aligned with company objectives and priorities. It helped us a lot in further prioritising.

These initial talks took quite a lot of time and initially were a little frustrating, as no single pixel was moved for nearly two months. However, looking back at the process, this was fundamental to the projects’ success. Thanks to solid due diligence, building relationships with various teams and senior leadership, we focused on the right things, kept everyone informed, and successfully shipped the product.

UX Approach

After initial talks with the UX community, I realised that my role in this project would not only be creating components, but more importantly, fostering collaboration between designers from different product teams. I understood that there is no real possibility of one person learning and fully understanding all user needs in all product teams: the best approach would be to let all designers share and own their area as they are experts in their field. My role would be to focus on bringing this expertise together and making sure that what we deliver is scalable to serve on a global usage level, using different map providers, and in over 40 languages.

After consultation with product and leadership, I decided to follow the evolution > revolution approach.

I decided that the safest approach would be to start componentizing our existing map patterns first. I didn’t want to start with revolution, rather the small steps approach. Our current map on Booking.com-Accommodations, was intensively user-tested and A/B tested over the years. I wanted to use all research and previous experimental knowledge as a starting point and focus on consistency and componentization first.

Mapping out inconsistencies and receiving quick feedback via A/B experimentation

My approach principles

  • Clean your house first
    I mapped out all inconsistencies, unified all existing elements, and extensively A/B tested them to make sure we were shipping a user validated product. Just cleaning inconsistencies helped us improve the conversion rate, reduced bounce rate from the map and improved experience.
  • Understand the demand
    I facilitated multiple workshops with designers to understand if there were any missing elements on Accommodations maps that were necessary for users in their product area. I was actively communicating back to my team and helping with further prioritisation.
  • Foster collaboration
    I organised co-design sessions with fellow designers where we drew together potential solutions for non-existing components and re-shaped current patterns to cater for all possible scenarios.
  • Constant feedback
    I tried to be as transparent as possible, searching for constant feedback from design principles and the whole design community, either via our regular critique sessions or just 1:1.

Deliverables

Part of my role in this project was aligning with the Booking Design System team and Developers: making sure our Map Product Patterns were an extension to the already existing ecosystem. This helped overall consistency of components, grew scalability & discoverability of them, and helped developers to understand design patterns easier.

  • all map patterns were designed using our internal design system foundations and components for scalability
  • shipped and documented in Figma
  • Figma components were replicated in React by our dev team. I made sure we used the same naming conventions for easier identification of components and I was responsible for overseeing the whole process
  • components were aligned with different map providers specs (Google, Mapbox)
  • provided documentation and visual prototypes of all map capabilities that our map API and library have

Education, adoption & support

Thanks to our initial very open approach and shared ownership, we didn’t have to advocate much for the use of our product. Designers and teams were reaching out themselves, as this was a huge help to their efficiency and time management.

To help the adoption process:

  • We created an open Slack channel for all teams integrated with our map so we could share experiences and problems.
  • I created short Map Library and API capabilities sessions with designers to help them understand the product and use it to its full potential.
  • I initiated co-design sessions for whole business units where designers shared and collaborated on their map designs using a new library
  • I advocated for excellence and collaboration. I became a go-to person for maps, but also influenced other designers to actively share their already significant map knowledge within their teams and units. Thanks to this, the map library became a living document with feedback and input from lots of designers and helped me improve and iterate on it over time.

It is live!

Thanks to the really great collaboration we successfully shipped the first release and migrated Flight, Attractions and Cars products to the new map API and Library. Even more teams and products are in the line for adoption. We improved maps user experience globally, across multi-platforms and multi-products, enabling all users to easily navigate through maps and focus on searching for their business and leisure needs.