Kaya.
Luxury for the soul.
Kaya is an award-winning 5-star luxury hotel on Santorini, that places the utmost emphasis on the relaxation of mind, body and soul of its visitors. It's concept is to convey pure wellness and luxury through every aspect of their brand, from the visuals and architecture to the various services they offer visitors - everything amidst the breathtaking landscapes of Greece.
Project Scope
In the context of my studies, Kaya was our final submission for the 'Screen Design' module, which was carried out in teams of two. Our task was to create a digital brand identity and a responsive website for a self-developed hotel concept, taking into consideration our identified target audience.
Roles
Collaboratively, my partner and I developed the initial concept, scribbles, and information architecture of the website. While my partner refined high-fidelity wireframes, I led the design decisions for the digital brand identity and final UI design. We completed the prototyping phase together, with me handling the desktop version and my partner focusing on the mobile aspect.
01
Digital Brand Design
As the initial step of our project, the development of the digital brand design for 'Kaya' involved creating a Moodboard to visualize the hotel's essence, appearance, and overall emotional tone. Alongside this, we developed a style guide in alignment with the Moodboard's tone, outlining consistent design elements.
02
Website Structure
Next, we developed high-fidelity wireframes based on preliminary sketches to establish the website's structure and translate the original design concepts into a functional layout. A strong focus on Information Architecture ensured a user-friendly structure and smooth navigation.
03
UI-Design and Prototyping
In the project's final phase, we combined the visual design elements outlined in the style guide with the wireframes in order to create a captivating responsive Interface Design. This design came to life through a high-fidelity prototype, providing an interactive preview of the website's functionality.
Developing the Brand Identity
Visual Narrative - Moodboard
One of the initial steps in creating the website for our hotel involved designing a moodboard and selected design components. This was done to convey the overall aesthetics, atmosphere, and emotional feel of the hotel-brand. It visualizes wellness, luxury, and the minimalist elegance that defines Kaya. The moodboard served as both an inspiration for the website's design and a foundation for defining our target audience clearly, as it already included the audience description. It also served as a consistent visual guide in addressing our target audience.
Corporate Design Guidelines - Styleguide
We developed the guidelines for Digital Brand Design in the form of a style guide, aligning them with the target audience to ensure a consistent visual identity. The described design elements have been carefully chosen to collectively reflect Kaya's intended image, atmosphere, and values. This includes the logo we designed, the color scheme, as well as specifications for using primary and accent colors, various button styles, and typography.
Wireframing & Information Architecture
In order to develop a detailed Information architecture of the Website, we first created rough sketches with minimal detail to identify the required pages and the necessary and the essential connections between them. With this approach, we only needed to further refine the initial sketches. By following this approach, we only needed to fine-tune the initial sketches into high-fidelity wireframes, to come up with a detailed information architecture of our website. The result served as the basis for our final website design and is shown in the graphic below.
Responsive User Interface Design
This section presents the mockups of the final User Interface Design along with accompanying explanations for each of the website's subpages, both for the desktop and mobile versions. The only difference lies in the arrangement and visual representation of the content.
Home - Landingpage
The homepage primarily serves the purpose of branding and acts as a user-friendly entry point with all important information. Notably, the most important call to action, the booking function, is prominently placed in the header and is accessible at all times through a Call-to-Action Button in the scrolled navigation menu as well. Further down, the user will encounter a gallery of images, general details about the hotel, Kaya's core values, reviews and links to the suites in the form of images that display essential suite-specific information on hover.
Wellness offers
All wellness offerings (fitness center, sauna, spa, and massages) can be found on the Wellness page. To enhance clarity, organization, each wellness area is accessible through an internal sub-navigation, where titles are complemented by descriptive icons. The subpages follow the same structure for the sake of consistency: Commencing with an image gallery accompanied by a description of the area, followed by specific information, presented in either an overlapping card design or a 1x3 grid layout in the desktop version, depending on the type of information being conveyed.
Additional Services
Since Kaya offers not only wellness services but also a restaurant, professional photoshoots, weddings, and sightseeing tours, these additional services are logically integrated into separate subpages distinct from the wellness offerings, while adhering to the same structural layout. These can be accessed through the "Services" menu item. Here, too, information is presented in the form of a 1x3 grid" or overlapping cards, contributing to a cohesive design, especially within the subpages of the wellness- and additional offerings.
About
The About page provides users with insights into the overall experience, Kaya's values, and the company's policies. From a user perspective, it serves purely informational purposes, while from a company standpoint, it fulfills the objective of establishing a consistent brand image. This page is entirely dedicated to conveying the hotel's ambiance, capturing its essence and atmosphere, thus enabling a consistent storytelling approach. The text is complemented by imagery in the same minimalist, elegant style, which convey the narrative embodied by the company.
Suites
The individual suites can be accessed through the clickable images within the Suite section of the homepage. For the sake of consistency, all these subpages follow an identical structure: Initially, an image gallery is displayed, featuring essential information in the description, identical to the details visible when hovering over the suite image on the homepage. Following this, the user will find a more detailed description and a booking widget that allows direct booking of the respective suite if it's available. An image-carousel of the other suites marks the end of each subpage.
Booking
The booking process is initiated by the user through the booking widget in the homepage header or, alternatively, by visiting the page of a specific suite. This process includes selecting a suite (already made when booking through a specific suite's page), optionally adding services, completing a data form, reviewing the details, and proceeding to the payment stage. The standard menu is replaced by a progress menu where the current step is highlighted, as this constitutes a distinct, self-contained dialogue separate from the rest of the website.
Conclusion
Reflexion:
Our team delivered a coherent digital experience that successfully translates a fictional luxury wellness brand's promise of elegance, calm, and indulgence into a responsive design—earning the module’s highest grade and exclusively positive feedback.
In hindsight, the project remains an excellent foundation with clear indicators for the next design iteration. Specific UX gaps—such as redundant navigation prompts in the booking flow and an undefined purpose for the profile feature—are exactly the details iterative design and user testing would resolve. Additionally, while initial testing praised the usability, our high-fidelity prototype does not yet cover the full interaction depth of an MVP.
Outlook & next steps
The design system is highly adaptable for existing premium brands with a similar aesthetic. Launching for a real audience requires three targeted steps: user research to identify actual target group needs, a complete content overhaul, and comprehensive user testing with live performance metrics.