Yotel
Year:
2021
Duration:
1 month
My Role:
UX & UI Design
The Team:
Project Manager, Front-End, Back-End and QA developers
Most features in this case study are still waiting to be pushed live
Context
Yotel is a hotel group based in the UK that offers dozens of hotels across the world, in both airports and city centers. The company reached out to Catch Digital in early 2020 to start the process of delivering a new accessible website platform to increase conversion across each of YOTEL’s brands, while providing the scalability to accommodate the 60 hotels around the world the company plans to have open or in development by 2025.

After helping on the original MVP delivery in January 2021, I had the opportunity to become the lead designer on the second phase of the project, and supervise the design and improvements made to the booking journey, on both Desktop and mobile.

Process/Approach

🎯
Understand the problem
What is the Challenge ? What are the friction points ?
πŸ”
Research
Competitors analysis, surveys
πŸ’‘
Ideate
Crate task flows, letting ideas out
πŸ–
Design
Wireframing, UI Delivery
πŸ•Ή
Test & Review
A/B and gorilla testing, reviews with team and client
πŸ”‘
Handover
Prototyping, Communication with Front-End and Back-End engineers
The challenge
The goal of this project is to increase conversion for booking and extras.
‍
We started working on the website phase 2 in November 2021. The idea was to focus on improvements to the booking journey, rethinking the UX & UI for a smoother experience, streamlining the booking journey to reduce the number of clicks needed to reach checkout, making interactions more natural and straightforward as well as improving some visually heavy components and pages.
I started by running some quick internal testing sessions, the idea being to identify different pain points for users while going through the booking journey.
‍
πŸ”
Search bar usability is very poor on medium sized screens and mobile
πŸ₯ž
Extras are linked to specific room types, rather than being an independant option
🧩
3 different booking engines are used on the Yotel website, with some using older designs, making checkouts inconsistent
By tackling those issues, the goal was to improve conversion by offering a smoother checkout to the user. With the requirements layed out, I needed to start by quickly re-mapping the booking journey to include the new features and always have a quick overview of the whole journey.

πŸ” 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:
‍
After completing the UI specifications sheet, I started to work on a prototype to highlight the component’s behavior, with 3 objectives in mind:
‍

πŸ‘‡ 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:
‍
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.

🧩 Standardize the booking journey

There are currently 3 different booking engines used on the Yotel website : Synxis, SNT & Opera, with different journeys for each, some using the old UI. The challenge was to have better consistency between all 3, while keeping specificities of each (special codes, new features like extras or guest booking not available on all), in order to reduce friction points with different hotels having a different interfaces for booking.

From the search results all the way to checkout, we have also decided to go with an enclosed approach. This means the number of elements users interacts with is highly reduced, allowing them to focus on completing their journey, without being disturbed by anything else. Some UX research institutes such as Baymard highlight this type of best practice for increase in conversion rate.

To illustrate this, I re-mapped the booking journey to introduce the new features and showcase the new streamlined approach.

Takeaways & what I would do differently

Working on improving the Yotel booking journey has been highly rewarding, and allowed me to manage a project while always taking into consideration technical limitations (strong on that project, the budget only leaving us with a slim margin of changed to the back-end structure) as well as the clients requirements, highly focused around conversion rate and commercial aspects, while focusing on the primary goal to improve the user experience in a journey that contained lots of flaws.

Phase 3 will allow us to run more user-testing sessions, which were reduced here, as well as continue looking for friction points and improvements.
If it was to be done again, one thing I would probably try to make room for would be a redesign of the different rates selections. At the moment I feel like they are not integrated enough within the room card details on the results page, and I suspect this could lead to some frustration for some users.

Have a look at other projects πŸ‘‡