stil-336189-unsplash.jpg

COSMOS TOURS

UX/UI/Web design

scroll

Introduction

Cosmos offers a wide range of tours and cruises both in Europe and around the world. Their offering is mostly aimed at people in the retirement age - therefore they provide a lot of extra services including transport to the airport to make the trip as smooth and hassle-free as possible. Recently they decided to target the younger audience but to make their proposition more appealing to that age group they had to reduce their prices. Their solution was to introduce “Tour Only” option - which doesn't include flights or airport transfers, and as a result, is considerably cheaper. 

Booking overlay
Booking overlay

press to zoom
Product page
Product page

press to zoom
Product page
Product page

press to zoom
Booking overlay
Booking overlay

press to zoom
1/5

Problem

My agency completed Cosmos website re-design around 2 years ago, but since then their offer evolved - more booking options and variables were added creating very complex decisions trees. There was a right-hand side sticky module with dates and airports drop downs that was taking a lot of real estates and making the rest of the content look very squeezed. The module, however, was not big enough to accommodate for the new booking options. On top of that, there was a lot of content on the page (overview, itinerary, hotels, gallery, recommendations) and users had to scroll a lot to find a particular piece of information they were looking for. Needless to say, the old product page was just not working anymore.

Cosmos_dektop_1
Cosmos_dektop_1

press to zoom
Cosmos_dektop_4
Cosmos_dektop_4

press to zoom
Cosmos_dektop_2
Cosmos_dektop_2

press to zoom
Cosmos_dektop_1
Cosmos_dektop_1

press to zoom
1/4

Solution

I've made the bold decision to start from scratch with a fresh approach and perspective. Supported by the data on how users interact with the old site combined with extensive research we were able to create a design that includes the extensive variables of a tour but still presenting the user with a clean, simple and easy to use interface. The right-hand side module was replaced by a banner that sits just below the hero image but is still above the fold. Because the page was very long and rich in the information I’ve introduced a secondary nav that follows the user as they scroll down the page and works as an anchor. It helps them navigate through wast amounts of content and help them access the information they need quicker. 

81688.png

Dates and prices pop up

I was also responsible for designing “See dates and prices” pop up - both from a visual and UX perspective. The main challenge was to enable users not only to compare different trip options (tour only vs tour with flights and transfers) but also different dates. To make matters even more complicated - each of the two tour types has a different booking system - one can be booked online, the other one can only be booked by phone. It took a lot of wireframing and prototyping to arrive with a satisfactory solution but we delivered what I think is a game-changer in the travel sector booking process.