Website-Redesign UXR | UX

Vintage Winery – mit UUX Methoden zum Redesign für ein neues Websitekonzept

Vintage Winery Header

Die Vintage Winery ist ein Start-up, welches aus einem Crowd-Founding Projekt entstanden ist. Deren Ziel ist es, Menschen in den Prozess der Weinherstellung vom Anbau bis zur Abfüllung zu integrieren.

Das Hochschul-Projekt startete mit dem Auftrag einen Onlineshop für Wein zu entwickeln, den man zu diesem Zeitpunkt nur über das Kontaktformular bestellen konnte.

Meine Rolle

In diesem Projekt war ich unter anderem für die UX und den Usability Test zuständig.

Konkret unterstütze ich bei der Desktop Recherche, entwickelte die Benchmarkanalyse und führte Kontextinterviews mit der Zielgruppe. Ich entwickelte die Personas und Informationsarchitekur und Wireframes. War Testleiter während der Usability Tests, des Klick Prototyps.

Die Gruppe umfasste insgesamt sechs Personen aus dem Bereich Online-Marketing und Informationsdesign. Die Methoden Affinitätsdiagramm, Card Sorting führten wir als Gruppe gemeinsam durch. 

PROZESS //

Desktop Recherche, Benchmark Analyse, Competition Map, Usability Test, Kontextinterview; Affinitätsdiagramm, Persona, Card Sorting; Informationsarchitektur; Wireframes, Mockups; Usability Test

ZEITRAUM //

Von April 2019-Juli 2019

SOFTWARE //

Adobe Xd

Ziele

Onlineshop //

Einen Onlineshop für Wein entwickeln, den man zum Zeitpunkt des Auftrags nur über das Kontaktformular des Start-ups bestellen konnte.

Separate Bereiche für Privat- und Firmenkunden //

Unterschiedliche Darstellung zum Mitmachangebot für Privatkunden und das Angebot der Teamevents für die Firmenkunden.

Buchungsfunktion & Terminkalender //

Eine fehlende Buchungsfunktion für eine Teilnahme an einer Veranstaltung sowie einen Terminkalender für Feste waren weitere Wünsche der Gründer.

UX DESIGN PROZESS

EMPATHIZE

Was macht die Konkurrenz?

Zunächst führte ich eine umfassende Desktop Recherche durch und hielt die Ergebnisse in einer Benchmarkanalyse fest.

Dabei ging es vorwiegend um konkurrierende Weingüter und wie diese im Gegensatz zur Vintage Winery einzuschätzen sind. Die Ergebnisse visualisierte ich danach in einer Competition Map. 


Competition Map

Wo liegen die Usability Probleme der bestehenden Website?

Um die Probleme der bestehenden Website zu ermitteln, führten wir einen Usability Test mit sieben potenziellen Kunden durch. Setzten den VisAWI und SUS ein, um die quantitativen Daten zur Gestaltung, zu erhalten. Der SUS Score erhielt einen durchschnittlichen Wert von 55,0/100 der VisAWI erzielte einen Gesamtwert in Höhe von 4,0/7,0

Um die bestehenden Kunden kennenzulernen führte ich zusätzlich eine Kontextanalyse, während eines Firmenevents im Weinberg durch.

Dadurch konnte ich mir nicht nur ein Bild vor Ort und zu der Veranstaltung machen. Sondern die Kunden, deren Bedürfnisse, Emotionen, Wünsche und Herausforderungen in Bezug zur Website kennenlernen.

Alte-Website-VW
VW-Affinitätsdiagramm

ITERATE

Zielanpassung

Usability Probleme

Die Ergebnisse des Usability Tests zeigten schwere Probleme bei der bestehenden Website. Deshalb veranstalteten wir mit den Gründern einen Workshop, in dem wir gemeinsam die Ziele anpassten.

Usability Optimierung //

Augrund der Vielzahl bestehender Usability Probleme.

USA stärker hervorheben //

Die Benutzer forderten, dass die besonderen Merkmale des Weinguts und seine Geschichte stärker betont und emotionaler präsentiert werden sollen.

Buchungsfunktion & Terminkalender //

Eine fehlende Buchungsfunktion für eine Teilnahme an einer Veranstaltung sowie einen Terminkalender für Feste bleiben wichtige Vorgaben, der Onlineshop hat durch die Zielanpassung eine geringere Priorität. 

Persona Andrea Schmidt

DEFINE

Persona (Businesskunde) Andrea Schmidt 

Personas Lukas Fischer

Persona (Privatkunde) Lukas Fischer 

DEFINE & IDEATION

Card Sorting & Informationsarchitektur für das neue Website-Konzept

Durch die Usability Tests stellten wir fest, dass die Teilnehmer Probleme mit der Orientierung auf der Website hatten.

Außerdem wird das neue Konzept mehr Informationen zum Startup beinhalten. Deshalb war es notwendig, eine neue und vor allem eine strukturierte und benutzerfreundliche Informationsarchitektur zu schaffen. Dafür nutzten wir die Methode des Card Sortings, mit dessen Hilfe wir Oberbegriffe entwickelten. Als Grundlage für die Oberbegriffe dienten uns die Ergebnisse der Recherche-Phase. 

 

Ergebnisse-des-Card-Sorting-Workshops
Workshop-Ergebnisse-des-Card-Sorting-Workshops-Gruppierung-
Card-Sorting
Informationsarchitektur

PROTOTYPE

Wireframes für die neue Website

Zunächst fingen wir grob mit den ersten Scribbles der künftigen Website an. Die folgenden Wireframes visualisieren neben der entwickelten Informationsarchitektur, die als Megamenü dargestellt wird weitere Navigationskonzepte  (Akkordeon, Slider und Filter-Buttons).

Für eine konsistente Gestaltung wählten wir einheitliche Elemente, wie Kacheln in unterschiedlicher Größe, in der sich die Fotos und Texte der Website befinden werden.

ITERATION | Die Wireframes testeten fünf Personen aus der Zielgruppe. Die uns wertvolle Tipps zur Überarbeitung an die Hand gaben. Anschließend gestalteten wir den Slider und die Coverbilder breiter, platzierten im verwendeten Raster abwechselnd Text- und Foto-Kacheln. Dadurch wirkten die Wireframes übersichtlicher und dynamischer. 

Wireframe-2

Das fertige Website-Konzept

Die konzipierte Medium-Fidelity Website ist heller, strukturierter und schafft dem Nutzer Orientierung. Dies erzielten wir durch den Einsatz eines Rasters, welches auf alle Unterseiten und im mobilen Endgerät Verwendung fand.

Jede Seite besteht aus einem Header, in dem das Logo, die Haupt-Navigation, die Bestandteile des Onlineshops in Form einer Weinkiste als Einkaufswagen und der Login sowie die jeweiligen Inhaltselemente der Seite zu finden sind. Persönliche Zitate der Gründer unterstreichen den Charme des Start-ups.

 

Mockup-VW-verkleinert

Die Haupt-Navigation als Megamenü

Das Megamenü ist beim Aufruf der Website geschlossen und öffnet sich beim Klick auf die erste Ebene der Menüstruktur, ist wieder geschlossen wenn die aufgerufene Seite erscheint.

Diese Art der Darstellung verschafft dem Nutzer einen schnellen Überblick über den Inhalt der Website, um schnell sein Ziel erreichen zu können. Die Anordnung der Menüpunkte unterliegt dem Hintergrund, dass die besondere Entstehungsgeschichte des Startups in den Vordergrund gerückt werden soll.

Home

Das Mitmach-Angebot für alle Weinbauinteressierten

Das Mitmach-Angebot befindet sich unter dem Menüpunkt Mitmachen.

An dieser Stelle kann sich der Nutzer zwischen verschiedenen Angeboten entscheiden, an welcher Stelle im Weinberg er die Gründer unterstützen möchte.

Dafür liest er die einzelnen Beschreibungen der Angebote, klickt auf Jetzt teilnehmen. Dann öffnet sich das Popup Anmeldung, bei dem sich der Nutzer mit seinen Daten und einem Wunschdatum anmelden kann.

Mitmachen-Anmeldung3

Veranstaltungen für Privat- & Businesskunden

Events für die Privat- und Businesskunden erscheinen unter dem Menüpunkt Wein erleben.

  • Für Privatpersonen: Verschiedene öffentliche Veranstaltungen, die im Weinberg stattfinden.
  • Für Businesskunden: Diese können bspw. eine Hütte zum Arbeiten mieten, oder als Team im Weinberg arbeiten.

Dazu wird auf Material anfordern geklickt. Das Popup Kontakt erscheint, in dem sämtliche Daten wie Name, E-Mail, Wunschdatum und Text hinterlegt werden.

Kontakt

Der Onlineshop für den Weinkauf

Unter dem Menüpunkt Weine erscheint der Handel, in dem die Weine zu finden sind sowie der Onlineshop.

Kauft ein Nutzer den Wein online, klickt er auf den gewünschten Wein, dann öffnet sich ein Popup in dem Angaben zum Wein stehen. Klickt der Nutzer auf den Button in den Warenkorb erscheint das Popup Meine Weinkiste.

An der Stelle kann sich der Nutzer entscheiden, ob er den Einkauf fortsetzen oder den Bestellprozess abschließen möchte. 

Onlineshop-1-1
svg-image

Wir sind begeistert von dem Ergebnis, dass es soweit über der Ausgangssituation ist: Von den knapp über 50 zu insgesamt 93,5 Rating, fand ich schon echt krass. Ich finde auch, dass dieser Schritt von einer dilettantischen Website zu dem sehr strukturierten, durchdachten Aufbau schon ein großer ist. Ich finde das Ergebnis super.


Gründer der Vintage Winery

USABILITY TEST

Feedback durch die Nutzer

Aus dem entwickelten Konzept erstellten wir einen Klick-Prototyp, mit dem wir einen Usability Test und einem Fragebogeh durchführten.

Im Rahmen eines Szenarios führten sieben Personen diesen Test durch, in dem sie verschiedene Aufgaben zu lösen hatten.

Onlineshop und Informationen zum Wein fallen positiv auf //

Der konzipierte Onlineshop und die Informationen zum Wein wurden sehr positiv bewertet. Das Klicken auf die Weinflasche ist möglich. Im ersten Usability-Test waren die Nutzer verwirrt, dass das Klicken auf eine Weinflasche nicht möglich war. 

Alleinstellungsmerkmal gekonnt in Szene gesetzt //

Der gesetzte Fokus auf das Alleinstellungsmerkmal des Startups wurde in diesem Usability Test positiv bewertet.

Terminvereinbarung ist gut gelungen //

Die Möglichkeit eine Buchung für eine Veranstaltung vorzunehmen standen alle Teilnehmer positiv gegenüber. Auf der bestehenden Website gab es diese Möglichkeit nicht, hier wird die Buchung über das Kontaktformular durchgeführt.

Verbesserter SUS auf 93,3 //

Der SUS Score erhielt einen durchschnittlichen Wert von 93,3/100. Auf den VisAWI wurde verzeichtet, weil ein ausgearbeiteter Design-Vorschlag nicht Gegenstand des Projektauftrags war.

Rückblick &
Resümee

Iteration des Konzepts und Übergabe //

Nach der Auswertung des zweiten Usability Tests verbesserten wir die angemerkten Verbesserungsvorschläge und übergaben das Konzept für die Implementation den Gründern.

Zielanpassung war überraschend aber notwendig //

Von den negativen Ergebnissen des ersten Usability Tests waren wir so überrascht, dass wir das Arbeitsziel mit den Gründern anpassen mussten. 

© Yvonne 2021

Back to top Arrow