Challenge Statement
Culture Trip is on a mission to become a major player in the e-commerce travel market. In 2019, it dipped a toe into the online travel agent waters, and offered users the ability to book hotel rooms. A standard 'template' hotel page was created for the 350,000 hotels Culture Trip had to show, hosting basic hotel information. However, as the commercial needs of the business became more important, so did the success of these hotel pages, which meant a re-design of both the entire page itself, as well as the booking flows within it.
Understanding the Problem
Our current offering
Below shows what we'd launched in 2019. The hotel page was designed to satisfy a lot of editorial needs, hence having separate tabs for the 'overview' and 'rooms' aspect of the page. This tabbed format kept the curated, article style reading experience separated from the practicalities of searching for rooms.
Changing business needs
Towards the middle of 2020, the business began leaning much more aggressively towards e-commerce and less towards editorial in order to keep afloat during a pandemic. Therefore, the hotel pages needed stronger visual cues to indicate to the user that this is a page you can book through.
What did previous user research tell us?
After analysing previous user research carried out on both prototypes and live versions, the following 3 takeaways emerged:
1. It's not easy to compare room options, as every different 'package' is listed as a separate room
2. Information on hotel and room amenities are difficult to find
3. Multiple images of the hotel as well as an interactive map are two crucial elements (somewhat lacking in current page)
What did data tell us?
- Of those that land on a hotel item page from an article, only 7% of users click on the 'rooms' tab.
- Just under 40% of users begin an availability search on the page. A great statistic, but considering this is a core gate which a user must pass through to convert, we should constantly improve and iterate the 'checkability' of this page.
- 43% of searches return no availability. We know that this is due to the way we break down our room and guest picker.
- 5% of our users click the 'reserve' button which takes them to the checkout.
Plan of Action
With all of the above in mind, design and product paired up to discuss timelines and possibilities, and prioritised the following focuses for the upcoming quarter:
- How might we allow users to seek all important information around booking a hotel with ease?
- How might we display hotels in an engaging and persuasive manner?
- How might we create an effortless checking moment and channel high intent users into availability checking?
- How might we create confidence in trusting the Culture Trip brand and subsequently booking with us?
Below shows mapped out sections of the page, prioritised against quarterly timeframes. From this prioritisation session, it made sense to tackle designing this page step by step.
Step 1/6: Merging the Tabs
From data and user research, it was clear the tabbed approach was problematic. It made sense to tackle the format of this whole page before designing elements within it. Therefore, I started exploring ways to merge the two tabs together effectively. Firstly, I conducted benchmarking on how others tackle dense information on a page.
Competitor analysis into Airbnb item page format on responsive and app
Looking at e-commerce sites outside of the travel field for inspiration
Next up came design exploration. I'd noticed a trend in benchmarking of competitors using a 'jump bar' either at the side or top of the page to allow a user to jump easily from section to section. This also prevented the page from getting too long. I'd proposed three recommendations to the team:
1. A 'jump bar' to get from section to section without endless scrolling
2. Accordions which expand and collapse to show and hide each section
3. MVP of simply every section one underneath each other on the page
In the essence of development time, it was decided to go with option 3: the MVP recommendation.
Option 1: The 'Jump Bar'
Option 2: Accordions
Option 3: Linear MVP (The one we went with ⭐)
Step 2/6: Availability Checker
Now we had our merged page sorted, it was time to tackle checking availability. From user research and benchmarking, we wanted to tackle two important areas:
1. Making sure the component is sticky. A user should be able to check availability from any point in the page.
2. Removing disabled states from the flow. We had these in our current offering and they were proving confusion in user research.
Mapping out interaction flow options for whether or not we retain user inputs on their next session, and how the CTA will work with this
I began constructing flows with a CTA always enabled. The button styles, colours and form field formats had been directly influenced from our design system. Above shows the responsive web mobile flow.
Above shows the many different ways a user can trigger opening the calendar and date picking, from the checker itself, or in the room module.
Step 3/6: Rooms Section
The room section needed to be visually flexible enough to work both before and after a user has inputted dates, as different information (such as inclusions, price and the ability to reserve) would change the aesthetic of the component. Below shows design exploration and iteration of this component, before landing on a list format pre date checking, and a table layout for optimum 'scannability' and comparison checking post date checking.
Options for showing all available rooms, pre date picking on desktop
Options for showing available rooms post date picking on desktop
Step 4/6: Property & Room Amenities
User research has informed us that finding property and room amenities was proving difficult for users on the current hotel item page. Taking this on board, and working closely with developers to understand the amenity taxonomy we were pulling in through our API, amenities were not only listed clearly and marked with relevant icons on the page, but also user researched to understand which ones users valued the most important when staying at a hotel. These were then pulled out into a 'highlights' section to aid the user in their decision making.
Step 5/6: Page Header & Overview
Another key point from user research was how important it was to have imagery of the hotel. Users mentioned wanting to see multiple images at once, and many competitors also offer these multi-image galleries. We also wanted to get key snippets of information such as reviews, star rating, location and share functionalities above the fold, as these feel like industry standard places for these features to live.
Different header explorations for responsive web
The team had a few concerns with the interaction pattern on the image gallery, so I took this to usability testing to see if there were any issues to iron out. Fortunately there were no problems, all 15 users located the carousel arrows and used these with ease. 🎉
A brief glimpse at some raw user research on the interaction pattern of the header
Overview
Rather than simply pulling in a generic description of the hotel from our API, we wanted to create more of a brand moment within the overview section. We had a vast inventory of many different types of property, from houseboats to capsule hotels, and so I'd carved out some time to illustrate all 30 different property sets which Culture Trip offered in a signature Culture Trip style. I'd then teamed up with the editorial team to write some quirky one liners to accompany these.
Overview section working responsively with bespoke illustrations & one liners
All 30 spot illustrations and one liners in all their glory! 🏡
Step 6/6: Location & Additional Information
Lastly, the location of the hotel needed to be added to the page as well as additional information about hotel policies. I had some bigger ideas for location, including using the map to showcase things to do or hotels near by (chance to cross sell and up sell), however for MVP and for the sake of time, we simply included the location of the hotel and some basic text which states what is nearby to start with.
Aligning with Squads & Parallel Projects
The 'Shop Front' Squad
Throughout this whole process, I had kept in close communication with our dedicated 'shop front' designer, who was working on designing the section of the site which holds all the hotels for a specific location. It was extremely important we synced up regularly on our work to ensure a consistent end to end journey for the user. Below is an example of the calendar, an integral component to be aligned across the journey.
The App Team
This same process of transforming hotel item pages was being carried out in parallel on our app team, so the app designer and I were in regular communication.
The 'Check out' Project
Alongside work on the hotel item pages, another designer in the team was designing the check out flow. We kept in regular communication about progress on each section of the bookable journey to allow for modifications to be reflected consistently.
Spot the difference! These calendars were built across two different code bases, so it was integral for myself and the shop front designer to keep in constant communication 📞
How Are We Measuring Success?
Referring back to the 'How Might We's' outlined at the beginning of this process, the page now:
• Shows all necessary information about a hotel up front (bye tabs! 👋)
• Surfaces content in a more branded manner
• Uses a sticky availability checker which is more intuitive, and an excellent visual cue that this page has something a user can book
• Listens to user feedback and now has more imagery, an interactive map, comparable room options and scannable amenities
As this project has launched recently (February 2021), new data around increases in conversion are yet to be tracked, but hope to increase!
Next Steps & Involvement
If you would like to see a hotel page live in action, please head here.
Next steps:
1. Live testing with users
2. Add recirculation, reviews and ratings to the hotel item page.
3. Apply this thinking for hotel item pages to tours & packages, with the possibility of adding a basket checkout functionality.
Involvement: Lead designer throughout whole process, with help and support from peers both in immediate design team and cross-discipline.
