Redesign Desktop und Mobile Web-Anwendung für Berge&Meer.
Herausforderungserklärung / Problembeschreibung
Berge und Meer ist dafür bekannt, nachhaltige Reiseinhalte abseits der ausgetretenen Pfade zu produzieren. Ab 2022 produzierte das Unternehmen nicht nur weiterhin hervorragende Produkte zum Thema Städte- und Rundreisen, sondern begann auch, in die Welt der buchbaren Baustein-Reisen einzutauchen.
- Im folgendem Projekt galt es vor allem, ohne wesentlichen strukturellen Umbau des Backends, eine moderne und ansprechende visuelle Ansprache der User zu finden.
- Insbesondere waren die Themen wie „Mobile First“ und „Responsiveness“ wichtig.
- Die Notwendigkeit, bei einem relativ geringerem Screen Real Estate die allen relevanten Inhalte adäquat darzustellen, ohne möglichst das User-Fokus auf dem Produkt zu verlieren.
Die Ausgangssituation, Ursprünge der UI-Problematik
Die ursprüngliche Anordnung der Elemente und Strukturierung der Website wurden als veraltet und schwer nachvollziehbar empfunden. Die UX-Führung war inkonsequent, die visuellen Prioritäten unklar verteilt. Es gab einige inhaltliche und visuelle Lücken.
Benutzerbedürfnisse – Recherchen zur Produkt-Detailseite.
Der beauftragte Internet-Agentur führte ausführliche Interviews und A/B Tests mit 25 Teilnehmern, um Schwachstellen, Chancenbereiche und den Planungsbedarf im Bereich der Elemente-Verteilung und Strukturierung der Website zu verstehen. Zu den wichtigen Anforderungen, die aus dieser Studie hervorgehen sollten, gehörten:
- Verfügbarkeit: Anzeige der Produktauswahl, Verfügbarkeit sollte sofort erkennbar erscheinen.
- Karte: Anzeige der Karte mit der Location, um ein besseres Produkt-Info zu bekommen.
- Filter beides Desktop und Mobile leicht und intuitiv bedienbar: die Einträge sollten klar definiert und änderbar sein.
- Navigieren über einzelne Tabs: es sollte sofort sichtbar sein, welche Merkmale/Leistungen das ausgesuchte Produkt aufweist.
- Eine Art Produkt-Kurz-Info / Kartei sollte für den User in der linken Spalte möglichst prominent dargestellt werden – ggf. im Sticky-Modus an der oberen Browser-Kante hängen, um so dem User eine ständige Übersicht zu ermöglichen.
- Eine Info-Spalte sollte hinzugefügt werden, um dem User verschiedene Angebote, Aktionen, „Quick-Wins“ u.s.w. zu präsentieren.
Wireframe / Übersicht Elemente Produkt-Detailseite
Lösungsansatz UI UX Desktop
Lösungsansatz UI UX Mobile
