Step inside The Old Clare's world of unique style, and experience their stunning website.

We helped enhance their User Experience (UX) through the methodology of the gods: Jakob Neilsen's 10 Usability Heuristics, HotJar recordings, Google Analytics data, and an unmoderated usability test. Feast your eyes on a small selection of our results in this case study.

The website was originally designed by SCCO Studio, but even a beautiful piece of art can benefit from a bit of UX love. The Old Clare understood the importance of maintaining their unique brand identity while improving the website's user experience to increase engagement and bookings. Our team worked closely with The Old Clare to identify and address usability issues while preserving the website's original design aesthetic. Through a comprehensive UX audit using a variety of methodologies, we were able to deliver adjustments to site so that it not only looks stunning but also functions seamlessly for its users.

↑       Original Menu Designs      ↓

The Menu

Users are not finding the menu easily

During the UX audit, it became clear that many users were struggling to find the menu and navigate to other pages on the website. The Google Analytics data showed that less than 40% of users were able to successfully access subpages.

The original menu design featured links for "HOTEL" on the left and "CLARE" on the right, which caused confusion and frustration for users. Many users were observed clicking around the screen multiple times before finally discovering the top menus, and then switching back and forth between the left and right menus before finding the relevant link.

These behaviours strongly suggested that users were struggling to locate the menus and were unsure which one contained the information they were searching for.

The menu became difficult to see at times

Due to the menus floating appearance with a 'difference' blending mode effect, the menu links became extremely difficult for users to see when certain images were scrolled behind it. The below screenshots illustrate the virtually invisible text seen at some times, reducing the websites accessibility.

The New Menu

Keeping true to the existing website layout, the two top menu links were altered to read MENU on the left and BOOK on the right.

When clicked the new menu slides out from the left side of the screen with all links displayed against a contrasting background colour for improved visibility.

Additionally to this, a transparent background was added behind the primary header, where the menu, logo and booking link sit, to further improve visibility while retaining the websites unique aesthetic.

The Arrow

Users assume the arrow shaped cursor means click

Upon arrival at The Old Clare Hotel website, visitors are greeted with a single image at the center of the screen and a large arrow cursor (as shown in the image below).

However, the usability study revealed that users were clicking multiple times on the right side of the screen before realizing the need to scroll down to view the rest of the page. This trend was also observed on the single room pages presented in the same way.

As a solution, it was suggested to replace the custom cursor with a more stylised version of a standard pointer cursor. However, after careful consideration, the decision was made to opt for standard cursors instead.

Room Information

The room information tab was going completely unseen

It was observed in majority of the HotJar videos that the “Room Information” tab was going unseen and unclicked. The links sit in a new position on the page, which is inconsistent with other menus and user expectations already laid out by the website.

The text itself is often missed when overlapping photographs and therefore the information contained within is not read by users.

New Room Information

As part of the user experience audit, it was recommended to put all of the room information directly on the page so the user will naturally scroll through the section while viewing the room, without the need to open any additional tabs.

Call To Actions

The booking button wasn't getting much love

After analyzing the HotJar heat map data, it was discovered that the booking button at the bottom of each page was situated in a relatively inactive area. To increase visibility and encourage more bookings, we recommended moving the primary BOOK button to the top right section in the header.

Additionally, we suggested adding a call to action at the end of each room page, along with a small amount of text alongside the booking or check availability button. This makes it easier for users to identify what to do next and prompt them to take the desired action.

The Results

These updates were taken live at the end of 2022, with a complete website re-development by Fellow Agency. The Old Clare Hotel website is yet to be reassessed to measure the outcome of the changes.