The Weekendesk new web experience (codename : Maxibus), was created from scratch separatly from the legacy desktop website. The intent was to create a mobile first solution, with a more inspirational tone and a stronger stack with React.js
I joined the Design Team in October 2018, since then I'm working alongside designers, product managers and developers. Mostly with the Checkout squad (In charge of the products display and the booking funnel) and the Search Squad (in charge of the search engine and the SEO).
Here is a sample of work made at Weekendesk, alongside another Product Designer and a Product Manager, made in two weeks.
After running some users test an behaviour analysis on Contentsquare, the product team identify several issues and improvements to make on the product page.
The user decision triggers per order of importance are: price & discount, pictures, ratings, package composition, location, reviews.
They usually spend 25s on this page, only 50% of them scroll below the fold, and the key contents are suffering from a low exposition rate.
Packages composition, rating and pictures slider components are accessible but that's not well understood by the users.
They also express the need to share a package to someone and to see straight on the page, the other offers within the same hotel.
With this project, we wanted to reduce the bounce rate on the product page, increase the exposure rate of the other element and therefore, improve the transition rate to the booking page and the conversion rate.
We tackle this project by improving the visibility of the identified decisions triggers, into two mains areas :
- The landing screen that the user sees when he land on the product page and he trigger that allow him to scroll on the rest of the page.
- The rest of the page, all the content and informations about package below the fold.
We added a more contrasted and standard navigation : white components with overlay, to help the user understand that there is more picture to see.
User used to face a incoherence in the experience, the price was displayed in a bar with a strong background on the product card in the search and had another display on the product page.
We revamp this into one and only component, the Price Sticker, that the user will find in the same place all along the way to the booking funnel. It also provide more context to the price, by adding the number of nights and the PAX (number of people travelling).
The Hotel Highlight block, is a new component that allow the user to quickly identify the hotel name and stars, the reviews and an extract of the most things loved by the customers. It's the central piece that will trigger the user to scroll : with another background it will be cut on most of the devices while landing and encourage them to start scrolling to read more about the product.
The behaviour has been reworked to make room for the hotel highlight. Now it's appearing after the user scroll the new "booking button" and it behave as a quick access to the booking instead of being the way to book.
We choose to break the previous accordions behaviour and display the package composition with more highlight so users won't miss it (We also introduce it in news steps within the booking funnel). A tap on it will scroll the users to the dedicated section within the page.
The accordions evolved into composition cards, providing the most looked features and facilities by the users in a quick access, and more details informations when extend.
Based on the users feedback, we provide those informations straight on the page instead of hiding them in a modal, to help users finding it more easily.
Final render of the new product page, can also be seen live.