Marc Gispert Saget
Digital Product Designer
The challenge

Enable people to check out and compare multiple search results based on geographical location

From the business it was asked to give the chance to the customers to find a travel package through comparing multiple search results based on the location. Not only to provide a new feature to help them, but also because It was detected that some users leave the Sunweb site to search the location on other sites. From the UX part it was considered the user insights to provide the design for the map that best fits in terms of usability.

Responsive image
  • Brand

    Sunweb Summer - Eliza was here - Gogo - Bizztravel

  • Timeline

    4 sprints of 2 weeks (research, wireframing, prototype)

  • Research

    Checking user behaviours and party compositions patterns

  • Prototyping

    Wireframes and digital prototypes

  • Testing

    Husability hub

  • Strategy

    UX strategy

  • Visuals/UI

    Elements already done on the Design System

  • Result

    New feature in development, not tested yet

  • URL

The high level goals were to:

  • Provide a new feature to compare accommodations based on locations
  • Avoid users leaving to a competitors pages searching the rooms’ alocation
  • Improve the conversions thanks to the map view.


Checking what other companies do.

Before start, it was done a quick research on what other popular e-commerces do regarding selling reservations through a map. The companies checked were:

Relevant insights:


  • On the search page, the map button appears on the right, as a generic thumbnail.
  • The map appears on the right of the site in a new pop-up
  • If the user zooms out it can be seen the apartments of all over the world, but these are not automatically shown, only a few of them. The user has to zoom in on order to see more results for the new area


  • The map appears automatically on the search page
  • If the user zooms out can see the apartments of all over the world
  • After the zooming out the search list is automatically refreshed


  • The map appears on the left, with a real miniature, on the search page, as an extra option
  • If the user clicks on the map will be able to see just the accommodations for the location searched.
  • If the user zooms out, there is a clustered message saying “94 hotels from 242€
* I din’t want to spend to much time on this portfolio sharing the competitors behaviours, please understand this insights as information for the creative process.

The creative process


Based on the outcomes of the benchmarking, some wireframes have been done to start talking about options, such as:

  • Map button as a thumbnail or as a regular button
  • Showing the map by default or not.
  • Amount of elements on the view
Responsive image
Responsive image


Thanks to the mockups, we had the outcome from business that it should be avoid to show the map from the beginning in order to save the unnecessary charges from the provider.

The user testing

Research and the outcome

Based on the benchmarking and the wireframes it was designed some mock-ups, and these were tested with real users.
The number of researches and the topic were the following ones:

First research
Expected behaviour on mobile

  • Expectations of map button behaviour
  • Expectation of embed map on the search results page or map on a new window.

Second research
Searching for the best desktop interface

  • Position of the map on the search results page
  • Understanding of the condensed cards
  • Preference for a full-size map or partial view of the map

Third research
Understanding the filters

  • Which is the best way to show filters on the map view

First research

The first of the three questions was build-up in 2 steps:

  • 1. We asked the user for a short description about what they expect after clicking on the map button
  • 2. Two different options were shown to the user, and it was asked if any of the proposals could fit on their expectations. It was also asked to support their decision with a comment.

Step 1

Step 2

Responsive image
Responsive image
Responsive image

Outcome 1

The outcome of the research determined that the map button it’s safe enough to implement it on the search page.

Outcome 2

After the survey the participants show their preference for a full-size map with as less distractions as possible

Second research

The aim of this research was, on one hand see the preferred place for placing the map on the search page, and on the other hand see the preferences for showing the accommodation cards in certain places or with a certain format.

Option 1

Responsive image

Option 2

Responsive image

Option 3

Responsive image


What can be understood from the comments of the participants is that users prefer the interface with the map on the top because they are able to check all the elements, filters, map and accommodation cards at the same time.

Third research

The aim of this research was to confirm, through a first click test, the hypothesis regarding the position, the design and the content of the button filters on the map view.

Image shown

Results of the first click test

Responsive image
Responsive image


It can be seen in the results how most of the participants successfully clicked on the filters button. This confirms the hypothesis that users will find the details of the regular “filters on top” from the Sunweb page within the new filters button for the map view.

The outcome of this research was taken as a  confident reference to make the final design for the maps with this kind of button.  

Final insights of the researches

Research 1

    On desktop the user wants to have all the options accessible.

Research 2

On mobile the user wants the minimum of distracting elements.

Research 3

It’s safe to cluster all the filters within the same button.


Design for mobile

Responsive image

Search Page with map button on the RIGHT/TOP

Responsive image

View with clustered prices

Responsive image

Card shown after the click on the price

Responsive image

Search filters including the regular filters on top

Design for desktop

Responsive image

Example of view in a desktop with the rooms list on the left, and an opened accomodation card on the map.


Components taken from the Design system - Mobile

Responsive image

Components taken from the Design system - Desktop

Responsive image

Next steps

How to continue?

On one hand, all the designs provided regarding the maps are based on other successful examples from popular travel sites, but adapted to the Sunweb. On the other hand the outcome of these design proposals was the result of different kinds of tests, as can be seen on this report. Nevertheless, this doesn’t mean that this cannot be improved in certain ways or some pain point appears and it have to take care of it, is because of this that it’s recommended to, at least, continue with the following recommendations

  • Follow-up how the map button on the search page through a different ways of testing, such as:
  • Hotjar surveys
  • Conversions in analytics (the number of people who book a package through the maps)
  • Follow-up how the map interface checking if there are pain-points