iA


IdleRocks.com

by Shareef Ayyad. Average Reading Time: almost 2 minutes.

For a hotel like The Idle Rocks, it was important to extend the guest experience onto the web so that all brand touchpoints remain consistent. The hotel positions itself as your home away from home which is why the system needed to feel familiar, simple and calming – all of which I believe are successfully executed.

idlerocks-macbook_mini

Photography and art direction play a significant role in selling the interior of the hotel – particularly the rooms – as well as the building’s exterior and surrounding village. The home page sits uncluttered, with only the navigation at the foot of the full screen hero image.

ux-desk-shot_mini

Several attempts were made at using a parallax effect to gently glide the content over the hero image when scrolling, but this was ultimately abandoned due to the complexities of mixing parallax scrolling with a responsive website design.

ux-desk-shot-2_mini

Thumbnail wireframes served as a good way to exhaust all layout possibilities before larger and more detailed wireframes were produced.

The client’s choice of hotel booking system prevented a full integration with the website, but care and attention was placed in designing customer journeys that accounted for those users that check room availability before reading room descriptions, and also accounted for those that prefer to check the quality of a room type first, before seeing which dates they are available. The user is then taken off-site to confirm and complete the transaction.

idlerocks-stay-iphone_mini

idlerocks-about-ipad_mini

A mobile-first approach to development was adopted to produce a fully responsive, device-agnostic layout. Testing was performed on an array of smartphones and tablets to ensure an optimum customer experience is delivered.

To inject a little delight into the design, a couple of Easter eggs were hidden for users to find. A tide table is included to appease the sailing enthusiast, which features a gently bobbing buoy when the user hovers with the mouse. Similarly, when hovering over the weather forecast widget, a friendly message appears that is contextual to the time of day and outdoor conditions.

The photo wall is another hidden Easter egg, activated by clicking a button at the top right of the page. This Instagram-powered image feed gives the holiday planner insight into the guest experience. By showing the hotel’s finest touches, and attention to detail, it serves as the gentle nudge that some users need to commit to a reservation.