Skyscanner
Backpack Design System Designers, SEO, Flights, Car Hire Product Designers. Engineering squad, Lead Product Manager and DesignOps
quarter
Lead Product Designer
In the mid 2023, I became responsible for Skyscanner's Maps experience. My initial focus was on reducing noise and improving user. This involved the planning and redesign of Maps and the integration into Backpack Design System library. Scheduled for launch in December 2023.
The Skyscanner Map experience has a 25% user engagement on desktop and 6.9% engagement on app. And the one of most important functionality of the map feature is to support travellers in ‘searching’, ‘discovering’ and ‘narrowing down’ options for their trip.
Skyscanner travellers face map pins persistently loading, overlapping and clustering without strict logic. This lends into the amount of noise there is on the current experience on maps, the poor visibility makes it hard to distinguishing different type of Pin’s, Google POIs or Skyscanner's interactive Pins.
Old Skyscanner experience
One of the first designs aspects to tackle was the foundations of the Map Skyscanner utilises. Travellers we attempting to tap the un-tappable Google POIs and at times the Skyscanner POIs and Google POIs overlapped which made the interaction troublesome. Skyscanner brand colours and Google brand colours together, competing of attention was an eyesore, which required focus.
After lengthy product discussions with the Backpack Design System, I established flexibility with the Design System and positioned Maps as being ‘exception to the rule’ with our global design principals in areas like colour, icon sizing, padding, elevation on components etc.
When creating a new skin, zoom levels and hierarchy adds to the complexity. Paired with Skyscanner Brand colours I began eliminating the layers of colours from Google Maps and explored colours which would complement Skyscanner’s brand rather than compete with it. This helped reduce the noise initially found on the map.
As a caveat, Apple does not give businesses the tools to build a skin from scratch so my focus was solely on Google for responsive mobile, desktop and android.
Recording and comparing colour contrasts
Working progress: Colour exploration
Deep dive in colour exploration
Maps colour direction
Editing map skins in Google Cloud
The Map feature is currently not available to individuals with accessibility needs, comprising approximately 18% of the entire Skyscanner audience. It is crucial to acknowledge that adhering to the Web Content Accessibility Guidelines (WCAG) standards, specifically a contrast ratio of 3:1 for graphics and large text, and 4.5:1 for small text, ensures that our design caters to the needs of all individuals with accessibility requirements. Consequently, addressing this issue is a straightforward matter through thoughtful design considerations.
However, the topic of colour contrast required more thought for individuals with low vision, colour blind people and some people with dyslexia. The approach was to focus on designing for the majority of individuals with low vision, this category was colour blindness.
However, when considering colour contrast, we needed to be more mindful of people with low vision, colour blindness, and certain individuals with dyslexia. Our strategy was to prioritise design adjustments that would benefit the largest subgroup within this category, which happens to be individuals with colour blindness this would in turn cover all individuals with low vision. For context the most common types of colour blindness by far 98% are the top 4 in your list, so; Protanomaly, Protanopia, Deuteranomaly and Deuteranopia. These are red/green types of colour blindness.
The challenge in the realm of cartography lies in its historical roots, which predate the emergence of accessible design principles. This historical context makes it difficult to directly apply the contrast standards outlined in the Web Content Accessibility Guidelines (WCAG) to maps. However, recognising the need for a more nuanced approach to colour contrast assessment beyond the standard 3:1 and 4.5:1 ratios, I sought to establish a benchmark that could differentiate between poor, satisfactory, and excellent colour contrast for maps.
In collaboration with the Accessibility team, we realised that such a benchmark did not exist, presenting an opportunity to gather quantitative data in this area. To address this gap, I developed a blueprint that utilised the Sim Daltonism Web app, incorporated a colour-coded key, ensured the interactivity of maps with both keyboard and screen reader functions with engineering. Then conducted testing with travellers focusing on colour contrasts using a primarily multiple-choice evaluation format. These testing rounds specifically honed in on assessing colour contrast within the green, yellow, and red hues.
The results of our efforts indicated that 85% of participants found the colour contrast to be categorised as "very good." Importantly, this approach not only benefited individuals with disabilities but also matched the experience for able-bodied travellers, whilst Skycanner now has a universal map skin for all traveller types.
Universal Google Map Skin
Colour Blindness types
Protanomaly
Protanopia
Protanomaly
Protanopia
Colour Blindness Testing Insights
Removing reds
Greys
Greens
Additional Info: Product attributes
The goal was to reduce noise and build focus so travellers could narrow down their search results. As the new Google skin was created for Skyscanner I spent time redesigning the Map Pins to reflect the updated UI found in our Design System. The redesign effort was a successful model of cross-team collaboration within Skyscanner. As the Lead Product Designer, I ran design sprints between our Accommodation, Car Hire, Research and Backpack team in the UK, Scotland and Shenzhen, led weekly design reviews, planned and directed international user research, and iterated on final versions of the design.
Benchmarking good and bad interaction patterns
Spanning animation
Introducing a previous selection state
Interactive Points of interest
Desktop
.png)
.png)
.png)
I wanted to find the most appropriate way to show travellers their accommodation without the overload of pins. This required understanding what makes maps intuitive by nature, preferred interaction and a ton of observation. As, expected most travellers did not like to be overwhelmed with price pins, making it harder to tap on what the traveller wanted but also thrown into the ‘paradox of choice’ dilemma. I suggested we move in a direction where progressive disclosure based on zoom level within strict design principals. Implementing the cluster logic collaboration with engineering to ensure the interaction is executed with detailed care. I spent time in regular catchups, for each gesture, tap, expansion etc to ensure we were able to achieve the desired interaction.
Closer look at clustering
Whilst working on redesigning Maps UI and Interaction I led the Backpack Designers to create the the design specs and prototypes, which were added to the public Backpack Design System library. The efforts included new colours tokens which adhered to the existing brand colours but we required for a level of uplift when placed on maps. New components like the clustering pins.
As maps was ‘exception to the rule’ having stripped all drop shadow across the Skyscanner product we were now faced with the challenge in creating a differentiation between pins and the background maps. It was an exploration around strokes and drop shadow, with stroke primitively being for selection I found drop shadows to be the most effective use. This was effective due to it without clashing
Desktop
Desktop
Desktop
Day mode - Updates
Night mode - Updates
Primitive colours
New Primitive colours
Rules
Product Tokens
We are in build and I am actively working with engineers and the data team to ensure components are built as desired along with mapping data touch-points.
Launch ETA Dec 2023
