A case study
Cosmopolitan Suites case study
DESIGNED FOR DESKTOP, TABLET & MOBILE
With an ideal location right on the edge of the volcanic Caldera in Santorini, Cosmopolitan Suites offers guests astonishing sea views during their stay in Santorini’s vibrant and exciting capital, Fira. As a member of The Small Luxury Hotels of the World, Cosmopolitan Suites needed a website that mirrored their luxury status, with a clean, minimal & subtly elegant design that featured large scale photos to showcase Santorini’s natural beauty in all its glory. Our development team implemented the design using the latest web development technologies to guarantee a fluid User Experience across all devices by making the website a fully responsive design. The Cosmopolitan Suites website has been built with the Wordpress CMS, which provides an easy-to-manage backend with a logical layout and streamlined workflow, making life much easier for regular administrators of the website. We have comprehensively Search Engine Optimised the Cosmopolitan Suites website to maximise its visibility to search engines.
You can see from the website screens that the design we produced for Cosmopolitan Suites is built around the hotel’s prestigious status as a member of The Small Luxury Hotels of the World, and as such, is incredibly understated and refined. Every detail of the design was carefully thought out in order to fit the hotel’s image - from the thin, modern sans serif font to the neutral white background lending the website a light and airy feel. Our meticulous attention to detail extended to the promo buttons and accents throughout the website, which are picked out in a blue turquoise hue. This hue perfectly fits with the Cosmopolitan Suites brand image, as turquoise has connotations of calmness and reinvigoration, and also happens to be the colour of the beautiful Aegean sea which guests can admire from their room in Cosmopolitan Suites. The turquoise promo buttons undergo a very subtle colour change on a mouseover, helping to make the site more responsive to users and encouraging clicks and interaction with the website.
A menu bar hangs from the top of every page of the Cosmopolitan Suites website, providing easy navigation options wherever users are on their journey through the site. In keeping with the hotel’s luxury image, the menu bar features a semi-transparent frosted glass effect, allowing the full browser page width photo slides to show through as they scroll beneath the menu bar. As the user moves down the page, the menu bar ‘floats’ at the top of the page as the content scrolls beneath, and the menu bar changes from a transparent to an opaque white in order to increase legibility. On the far left of the menu bar is the Cosmopolitan Suites logo, which reinforces the hotel’s brand image throughout the website. Mirrored on the far right of the menu bar is a ‘Book Online’ button, which takes site users straight to the Cosmopolitan Suites online booking engine in a single click to make the booking process as direct as possible. Users are reminded of Cosmopolitan Suites status by a little Small Luxury Hotels of the World logo which hangs off the right of the menu bar and floats as the page scrolls beneath it.
Photos form an integral part of the user experience on the Cosmopolitan website, with full width photo slides at the top of each page designed to immerse users in the Santorini experience, and photo thumbnails used as promos throughout the website to encourage user navigation to other pages. Many of these photo thumbnail promos change with a mouseover, producing a semi transparent page title label overlay to make site navigation as clear and easy and possible, and encourage click throughs. At the very bottom of each page the website footer provides a plethora of options for contacting the hotel, with emails, phone numbers, all the hotel’s social media channels, and a submission box for users to join the hotel’s email mailing list.
Because we built the Cosmopolitan Suites website from the ground up to be a fully responsive design, it does not require a separate mobile specific version. Using its responsive design framework, the whole website is able to scale automatically according to the width of the browser window of the device used to access it. All content is rearranged accordingly, guaranteeing a great browsing experience for all users, no matter what the size of their device screen. With this structure, one single source of content and one website front end can serve all users of the website, no matter what their device or operating system. On a mobile device screen, the menu bar shrinks to a fully drop down menu, with just the hotel logo and book online button remaining at either side of the display - reinforcing the Cosmopolitan Suites brand identity and retaining the all-important single click to the online booking engine. The smaller mobile screen sized responsive site pages are optimised for easier mobile cellular data browsing, with minimised bandwidth usage to speed up downloads.