Blog Javascript Design einer einfachen Such-Erfahrung für ein komplexes Produkt mit einer luxuriösen OberflächeDesign einer einfachen Such-Erfahrung für ein komplexes Produkt mit einer luxuriösen Oberfläche
Eres Yachting, ein Luxus-Bootbuchungsservice, wandte sich an Boldare, um ihr Verkaufssystem zu revolutionieren und ihren gesamten Katalog auf ein neues Online-Buchungssystem für ihre wohlhabende Zielgruppe zu verlagern.
Table of contents
Zusammenfassung
Als Eres Yachting sich an Boldare wandte, hatten sie ein erfolgreiches Geschäft als vermittelnde Agentur, die begeisterten Segelenthusiasten dabei half, Luxusyachten in den schönsten Orten der Welt zu mieten. Sie boten über 13.000 luxuriöse Yachten in 475 Destinationen zusammen mit zusätzlichen Annehmlichkeiten an, die für ihre gehobenen Kunden benötigt wurden. Boldare stellte ein Team zur Verfügung, das das Problem schnell erfasste und eine state-of-the-art Buchungserfahrung mit einer einfachen Kundenreise und einem stilvollen Design schuf, das zu den wohlhabenden Buchungsinteressenten passt, die Eres anvisiert.
Problem: zu viel Auswahl und die Kriterien können überwältigend und erschöpfend für Benutzer sein
Eres sah eine Gelegenheit, in einem neuen Markt zu wachsen, aber zuerst mussten sie ihren gesamten Buchungsprozess online verlagern. Sie benötigten Experten, die ihr gesamtes Angebot in eine Premium-Digitalerfahrung verwandeln konnten. Im Gegensatz zu traditionellem E-Commerce war ihr Buchungssystem komplex und erforderte von Benutzern, aus über 10 Kriterien zu wählen, um ein Boot zu buchen. Sie wussten, dass dies ein potenzielles Problem sein könnte und benötigten Experten, die eine einfache Kundenreise designen konnten, die den Benutzer nicht mit einer stilvollen Oberfläche für den gehobenen Zielmarkt überwältigen würde.
Lösung: ein Team von Experten, die das Angebot und den Zielmarkt analysieren und eine luxuriöse, aber einfache Buchungserfahrung bieten können
Boldare stellte ein Team mit UX/UI Fähigkeiten zur Verfügung, fließend im Aufbau von Anwendungsarchitektur. Teammitglieder hatten in der Vergangenheit zusammengearbeitet und waren erfahren im Design komplexer Buchungssysteme und auffälliger Websites. Sie hatten alle notwendigen Fähigkeiten, um das Angebot online zu übersetzen und eine benutzerzentrierte Web-Erfahrung mit einer einfachen Buchungsreise zu designen, sowie ein stilvolles Design zu liefern, das zur Produktpersona passt.
Schritt 1: Produktvision Workshops
Das Boldare-Team führte einen Produkt-Canvas-Workshop mit dem Kunden durch. Dies ermöglichte es Eres Yachting, ihre Vision zu klären und sie mit dem Boldare-Team zu teilen. Nach dem Sammeln aller Informationen war das Team in der Lage, Benutzer-Geschichten zu erstellen, die die Funktionalitäten des Produkts umrissen.
Der Workshop führte auch das Team und den Kunden dazu, eine Systemgeschichte zu erstellen, die später das gesamte Design des Produkts leitete. Die Elemente der Systemgeschichte umfassten Antworten auf eine Liste von vier Fragen - was, wie, wer und wofür.
Schritt 2: Moodboards
Das Boldare-Team sandte dem Kunden eine Auswahl von drei Moodboards - eine Momentaufnahme von Bildern, Farben und Schriftarten, die einen Geschmack davon gaben, wie das Design sein würde. Nach der Auswahl des gewinnenden Moodboards konnten die Designer den Designprozess beginnen.
Schritt 3: Anwendungsarchitektur
Danach erstellte das Boldare-Team die App-Architektur, ein Werkzeug notwendig, um die Struktur der Anwendung mit all ihren Komplexitäten zu verstehen und zu erklären. Dies ermöglichte eine einfache Erklärung der Beziehungen zwischen fast 50 Elementen, die in der App enthalten sind.
Schritt 4: Wireframes
Das Boldare-Team erstellte mehr als 50 Wireframes - ein Werkzeug, das verwendet wird, um die App-Features und -Komponenten (ohne die grafischen Elemente) sowie die Benutzerreise durch den gesamten Buchungsprozess zu kartieren. Es ermöglichte eine klare Erklärung der Logik und Features des Produkts.
Schritt 5: Eine einfache Such-Erfahrung auf der Homepage
Eines der kritischen Features für den Verkaufsprozess war eine Suchleiste, die es Benutzern ermöglicht, durch die 13.000 verfügbaren Boote zu filtern. Die neue Homepage-Suchleiste umfasste zwei Hauptkriterien (Standort und Daten) anstatt der zuvor verwendeten zehn, die Benutzer überwältigen würden.
Schritt 6: Der Buchungsprozess
Der nächste Schritt war die Konstruktion einer benutzerfreundlichen App-Erfahrung. Basierend auf Benutzer-Geschichten entwickelte Boldare einen vierstufigen Buchungsablauf: Zeit und Standort, Erweiterte Filterung (mit 10 Kriterien), Yacht auswählen und Buchung.
Schritt 7: Ein Premium-Design für einen Premium-Benutzer
Schließlich waren die Boldare-Designer bereit, ein Premium-Aussehen für das Produkt zu erstellen, das sowohl mit der wohlhabenden Zielgruppe übereinstimmen würde, die Eres anvisiert, als auch mit der Markenidentität des Kunden.
Von Anfang an war sich das Boldare-Team vollständig der Produktzielpersona bewusst. Kurz gesagt war er ein relativ reicher Mann, über 40, mit Familie und einer Liebe zum Reisen, Segeln und Natur. Das wissend konnte das Team etwas erstellen, das genau zu diesem Profil passte.
Um ein Premium-Aussehen zu schaffen, verwendeten die Designer stilvolle helle Schriftarten, gedämpfte Farben und elegante goldene Details. Ein weiterer sehr wichtiger Faktor war die Verwendung spezifischer Sprache, die zur Zielgruppe passte.
Das Vergnügen am Segeln ist eng mit Gefühlen und Erfahrungen verbunden, also schlug Boldare ein Grafikdesign vor, das genau das widerspiegelt. Um dies zu erreichen, verwendeten die Designer hochwertige Marinefotos und Details sowie helle, raffinierte Schriftarten. Sie beschlossen auch, eine spezifische Farbpalette zu erstellen, völlig anders als die Konkurrenten des Kunden. Diese Entscheidungen führten zu einem völlig frischen und attraktiven Grafikstil.
Die Zusammenarbeit: iterative Lieferung und häufige Kommunikation waren kritisch
Von Anfang an arbeiteten das Boldare-Team und der Eres Product Owner in einem Scrum-Framework mit einem dedizierten Scrum Master, der für den Prozess und die Transparenz des Projekts verantwortlich war. Das Team traf sich zu täglichen Meetings, um Pläne für den Tag und alle Hindernisse zu diskutieren, die das wöchentliche Sprint-Ziel bedrohten. Einmal pro Woche hielten sie ein Review- und Planungsmeeting zusammen mit dem Product Owner ab, wo sie gelieferte Inkremente diskutierten und den nächsten Sprint planten. Wöchentliche Retrospektiven ermöglichten die Diskussion von Hindernissen, zukünftigen Verbesserungen und guten Praktiken.
“Boldare hielt sich an unser Budget und Zeitplan. Wenn etwas länger dauerte als erwartet, wurde es uns sofort mitgeteilt. Sie waren immer transparent.”
Die konstante Kommunikation war kritisch für den Erfolg des Produkts. Das Team hatte über 20 Remote-Meetings mit dem Product Owner, der in der Schweiz ansässig war, über Skype. Sie schrieben Hunderte von Basecamp-Posts, um den Kunden über den Fortschritt und die Kompatibilität des Projekts mit den vereinbarten Richtlinien auf dem Laufenden zu halten. Zusätzlich waren Teammitglieder in ständigem Kontakt über Slack.
Ergebnisse
Wir glauben, dass die Kunden selbst über die Ergebnisse sprechen sollten, also hier ist ein Zitat von Eres:
“Das Feedback von Kunden und allen anderen, denen wir die Website gezeigt haben, war, dass die Website außergewöhnlich ist… Kunden und Partner haben hauptsächlich die Website als Grund für die Wahl von uns genannt. Sie fanden sie professionell, schön und elegant.”
Share this article:
