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.
Brand
Sunweb Summer - Eliza was here - Gogo - BizztravelTimeline
4 sprints of 2 weeks (research, wireframing, prototype)Research
Checking user behaviours and party compositions patternsPrototyping
Wireframes and digital prototypesTesting
Husability hubStrategy
UX strategyVisuals/UI
Elements already done on the Design SystemResult
New feature in development, not tested yetURL
sunweb.nl
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.
Benchmarking
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:
Booking
- ●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
Airbnb
- ●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
Expedia
- ●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
Wireframing
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
Insights
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
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
Option 2
Option 3
Outcome
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
Outcome
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.
Prototyping
Design for mobile
Search Page with map button on the RIGHT/TOP
View with clustered prices
Card shown after the click on the price
Search filters including the regular filters on top
Design for desktop
Example of view in a desktop with the rooms list on the left, and an opened accomodation card on the map.
Componentization
Components taken from the Design system - Mobile
Components taken from the Design system - Desktop
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