Kaya.
Luxus für die Seele.
Kaya ist ein preisgekröntes 5-Sterne-Luxushotel auf Santorini, das höchsten Wert auf die Entspannung von Geist, Körper und Seele seiner Besucher legt. Das Konzept besteht darin, reines Wohlbefinden und Luxus in jedem Aspekt ihrer Marke zu vermitteln, angefangen bei der visuellen Gestaltung und Architektur bis hin zu den vielfältigen Dienstleistungen, die den Besuchern geboten werden – und das alles inmitten der atemberaubenden Landschaften Griechenlands.
Projektumfang
'Kaya' war die finale Abgabe für das Modul 'Screen Design' innerhalb meines Studiums, die in 2er-Teams durchgeführt wurde. Unsere Aufgabe war es, unter Berücksichtigung unserer identifizierten Zielgruppe eine digitale Markenidentität sowie eine responsive Website für ein selbst entwickeltes Hotelkonzept zu erstellen.
Aufgabenbereiche
Das anfängliche Konzept, Scribbles und die Informationsarchitektur der Website wurde gemeinsam im Team entwickelt. Die Aufgabenteilung bestand darin, dass der Fokus meines Teampartners auf der detaillierte Ausarbeitung der wireframes lag woraufhin ich die finalen Designentscheidungen für die digitale Markenidentität sowie das UI-Design übernommen habe. Die Prototyping-Phase haben wir gemeinsam abgeschlossen, wobei mein Schwerpunkt auf der mobilen Version und der meines Partners auf der Desktop-Version lag.
01
Digitales Markendesign
Der erste Schritt unseres Projekts umfasste die Entwicklung des digitalen Markendesigns für 'Kaya', wobei die Erstellung eines Moodboards zur Visualisierung des Wesens, des Erscheinungsbildes und des allgemeinen emotionalen Tons des Hotels diente. Parallel dazu haben wir im Einklang mit der Stimmung des Moodboards einen Styleguide entwickelt, der konsistente Designelemente festlegt.
02
Website-Struktur
Als Nächstes entwickelten wir high-fidelity Wireframes und eine detaillierte Informationsarchitektur, basierend auf den vorher angefertigten Scribbles, um die Struktur der Website zu definieren und das ursprüngliche Designkonzept in ein funktionales Layout umzusetzen. Besonderes Augenmerk auf die Informationsarchitektur gewährleistete eine benutzerfreundliche Struktur und reibungslose Navigation.
03
UI-Design und Prototyping
In der abschließenden Phase des Projekts wurden die visuellen Designelemente aus dem Styleguide mit den Wireframes kombiniert, um ein ansprechendes responsives Oberflächendesign zu erstellen. Dieses Design wurde durch einen high-fidelity Prototypen zum Leben erweckt, der eine interaktive Vorschau der Website-Funktionalität bietet.
Entwicklung der Markenidentität
Visuelles Konzept - Moodboard
Einer der ersten Schritte bei der Erstellung der Website für unser Hotel bestand darin, ein Moodboard to erstellen - eine Kollage aus Farben, Bildern, Typographie, und bereits einzelnen Designelementen, um die generelle Ästhetik, Atmosphäre und emotionale Stimmung des Hotels zu kommunizieren. - Im Fall von 'Kaya' visualisiert es Wellness, den Luxus und die minimalistische Eleganz, die das Hotel ausmacht. Das Moodboard diente uns sowohl als Inspirationsquelle für das Websitendesign als auch als Fundament für eine klare Zielgruppendefinition, da es die Zielgruppe bereits mit einschließt. Es fungierte für uns ebenfalls als konstante visuelle Orientierungshilfe an der Zielgruppe.
Corporate Design Richtlinien - Styleguide
Die Guidelines für das Digital Brand Design wurden von uns in Form eines Styleguides im Einklang mit der Zielgruppe erstellt, um ein konsistentes Erscheinungsbild sicherzustellen. Die beschriebenen Designelemente sind so gewählt, dass sie in ihrem Zusammenspiel das beabsichtigte Image, die Atmosphäre und die Werte von Kaya wiederspiegeln. Er beinhaltet das von uns entworfene Logo, das Farbschema sowie die Spezifikationen zum Gebrauch von Primär- und Akzentfarben, verschiedenen Arten von Buttons und der Typographie.
Wireframing & Informationsarchitektur
Um eine detaillierte Informationsarchitektur der Website zu entwickeln, haben wir zunächst grobe Skizzen ohne Details erstellt, um die benötigten Unterseiten und die notwendigen Abhängigkeiten zwischen ihnen zu identifizieren. Mit diesem Ansatz mussten wir die ersten Skizzen nur noch weiter verfeinern zu High-Fidelity-Wireframes, die bereits das allgemeine Layout und die interne Struktur der Website-Inhalte vordefinierten, um um eine detaillierte Informationsarchitektur unserer Website zu erhalten. Das Ergebnis diente als Grundlage für unser endgültiges Website-Design und ist in der untenstehenden Grafik dargestellt.
Responsive User Interface Design
Diese Section beinhaltet die Mockups des finalen User Interface Designs und dazugehörige Erklärungen für die einzelnen Unterseiten der Website sowohl für die Desktop- als auch für die mobile Version, da lediglich die Anordnung der Inhalte variiert.
Home - Landingpage
Die Homepage dient primär dem Branding und als benutzerfreundlicher Einstiegspunkt, wobei der wichtigste Call-to-Action, die Buchungsfunktion, im Header prominent platziert ist. Im weiteren Verlauf der Homepage findet sich eine Bildergallerie, allgemeine Informationen über das Hotel, die Werte von Kaya sowie Links zu den Suiten in Form von Bildern, die bei Mouseover suitenspezifische Informationen anzeigen (Quadratmeteranzahl, Verfügbarkeit eines Pools, etc.), sowie Rezensionen.
Wellness offers
Alle Wellnessangebote (Fitnessstudio, Sauna, Spa und Massagen) sind auf der Wellness-Page zu finden. Für eine bessere Übersichtlichkeit & Struktur werden die einzelnen Wellnessbereiche über eine seiteninterne sub-navigation erreicht, innerhalb der der Titel durch deskriptive Icons ergänzt wird. Zu Konsistenzzwecken sind alle Subpages gleich aufgebaut: Eingeleitet durch eine Bildergallerie mit Beschreibung des Bereichs, gefolgt von spezifischen Informationen, in der Desktopversion je nach Informationsart stets im überlappenden Kartendesign oder in Form eines 3er-Grids.
Additional Services
Da Kaya nicht nur Wellness, sondern auch ein Restaurant, professionelle Fotoshootings, Hochzeiten und Sightseeing-Tours anbietet, sind diese zusätzlichen Services logisch in von den Wellnessangeboten separierte Subpages integriert, die über den Menüpunkt "Services" erreichbar sind, aber demselben Aufbau folgen. Auch hier werden die Informationen in Form des 3er-Grids oder überlappenden Karten dargestellt, wodurch das kohärente Design besonders innerhalb der Angebots-Unterseiten entsteht.
About
Die Über uns Seite bietet Nutzern Einblicke in das Gesamterlebnis, Kayas Werte und die Unternmehmenspolitik. Aus der Perspektive des Nutzers hat sie so lediglich informative Zwecke, während aus Unternehmenssicht das Ziel besteht, ein konsistentes Markenbild zu etablieren. Die Seite widmet sich vollständig dem Vermitteln der Stimmung des Hotels und fasst dessen Essenz und Atmosphäre für ein konsistentes Storytelling in Worte. Der Text ist durch Bilder im selben minimalistischem, eleganten Stil ergänzt, wodurch auch das Design das von Kaya verkörperte Narrativ vermittelt.
Suites
Die jeweiligen Suites werden über die Bildlinks in der Suite-section der Homepage erreicht. Die Subpages für jede Suite sind exakt gleich aufgebaut für consistency zwecke: Initial wird eine Bildergallerie mit den essentiellen Informationen in der Beschreibung gezeigt, die auch auf der Homepage on Hover über das Bild der Suite gezeigt werden. Es folgt eine detaillierte Beschreibung und ein Buchungswidget, über das direkt die jeweilige Suite gebucht werden kann, falls verfügbar, sowie Bildlinks zu den restlichen Suiten.
Booking
Durch das Buchungswidgets im Header der Homepage, oder alternativ über die Seite einer spezifischen Suite, initiiert der Nutzer den Buchungsprozess. Dieser besteht aus der Suiten-Auswahl (beim Buchen über die Seite einer spezifischen Suite bereits getroffen), dem optionalen Hinzubuchen von Services, einem Datenformular, einem Gesamtüberblick, sowie dem Zahlungsprozess. Das Standardmenü wird durch ein Fortschrittsmenü ersetzt, bei dem der aktuelle Schritt gehighlighted ist, da es sich um einen eigenen, vom Rest der Website abgekapselten Dialog handelt.
Fazit
Reflektion:
Unser Team hat ein konsistentes digitales Erlebnis geschaffen, das das Markenversprechen einer fiktiven Luxus-Wellnessmarke aus Eleganz, Ruhe und Genuss in ein responsives Design übersetzt – ausgezeichnet mit der Bestnote des Moduls und exklusiv positivem Feedback.
Rückblickend bietet das Projekt ein exzellentes Fundament für die nächste Design-Iteration. Spezifische UX-Lücken, wie redundante Navigationshinweise im Buchungsflow und der noch undefinierte Zweck der Profilfunktion, sind genau die Details, die durch iteratives Design gelöst werden. Zudem deckt unser High-Fidelity-Prototyp trotz positivem Usability-Feedback noch nicht die volle Interaktionstiefe eines MVPs ab.
Ausblick & nächste Schritte:
Das Designsystem lässt sich hervorragend auf bestehende Premiummarken mit ähnlicher Ästhetik übertragen. Ein Launch für echtes Publikum erfordert drei gezielte Schritte: User Research zur Ermittlung realer Zielgruppenbedürfnisse, eine vollständige Content-Überarbeitung sowie umfassendes User Testing.