🔍 Reduce friction while using searching for a room
The Search bar is at the center of the whole website experience and needs to provide a smooth and straightforward experience to the user. I quickly started to identify some major friction points when starting to use it in several different scenarios and watching users interact with it:
To solve these various friction points, I started working on a redesign of the whole component for screens wider than 768px. For mobile, budget limitations for this phase will only allow us to add a clear CTA in Front-End.
The goal for this redesign was to provide a consistent component through across the website, on the homepage, hotel landing pages, results page, and at all different screen sizes, by working on:
Rules and constraints depending on the screen size, for smoother interactions with the component on tablets and smaller widths.
Making the time selection blend within the date picker, to highlight it more while keeping it a secondary action.
This is a decision we were able to A/B test with the current design, and proved to provide a better experience for more than 80% of user, the rest not minding either.
A better display of the time when selected, making it last in hierarchy to not have it displayed when the width doesn’t allow it.
Rethinking hover/focus and active states to create slicker and easier interactions for the user.
After completing the UI specifications sheet, I started to work on a prototype to highlight the component’s behavior, with 3 objectives in mind:
Making the client review process easier, by letting them play with the component before it is signed off and goes to development
Simplify the front-end handover, by highlighting states and micro-interactions
Have a tool ready for further user testing of the solution (whiwh is planned to happen in phase 3 of the project)
👇 Have a play with the search bar prototype, press R to come back to start
🥞 Make Extras an independent feature of checkout
Yotel is slowly starting to incorporate extras into its bookings, such as breakfast or insurances. At the moment, they are incorporated by default within certain rates or room types. The requirement that came from Yotel was to have them independent from now on, meaning every room type and rate could have optional extras included, and sit just after the room selection.
For commercial purposes, we decided to create a dedicated page as part of the checkout, to highlight the new feature and increase conversion. In terms of user experience, this also fits in the idea of an enclosed booking process, where each item and feature has its own space, making the journey more streamlined and easy to navigate for the user. We iterated on two different versions of the extras page:
A version displaying each extra in individual pages, making room for more content. This still carries the layout from the room results page, making it blend into the journey, with the drawback of introducing a lot of extra clicks for the user in the case where several extras are available. For commercial reasons and despite pushing for the first option for UX reasons, the client decided to move forward with this option.
This was also an opportunity to have a look at the summary card that sits at the right, redesigning it to be more versatile, include the new extras and present a better hierarchy by increasing the weight and highlight the items selected by the user throughout the journey.
