Projektbeschreibung
Im Rahmen der Lehrveranstaltung „Prototyping & Implementierung“ im 2. Semester meines Masterstudiums war es meine Aufgabe eine vorhandene Website eines realen Unternehmens neu zu gestalten. Hierbei wurden diverse Schritte des Prototyping- und Gestaltungsprozesses durchgeführt um am Ende ein optimales Ergebnis zu erreichen.
Meine Wahl traf auf das Unternehmen „Destillerie Urban“, welches als Einzelunternehmen von Christian Urban geführt wird und sich auf die Herstellung und den Verkauf von Edelbränden, Likören und weitere Raritäten spezialisiert hat. Endergebnis dieses Projekts war ein klickbarer Prototyp (Clickdummy), welcher bereits einen sehr guten Eindruck der fertigen Website vermittelt.
- Understand the Brand, Business and Users
- Define the Goal and plan the Website
- Plan the Brand Experience
- Plan the User Experience
- Idea Generation
- Design the User Experience
- Design the User Interface
- Testing
- Design the User Interface II
Recherche
Zu Beginn des Projekts war eine gründliche Recherche notwendig, um sich ein Grundverständnis des Unternehmens, der Marke und der Zielgruppe zu verschaffen.
Somit wurde zuerst die Website der Destillerie Urban selbst und in weiterer Folge drei Websites von Konkurrenzunternehmen aus der gleichen Branche auf positive als auch negative Aspekte, hinsichtlich der Inhalte, der Funktionen und dem Design analysiert. Diese Analyse hat gezeigt, dass die Website durch veraltete Gestaltungselemente sehr altmodisch wirkt, Probleme bei der Barrierrefreiheit auftreten, Inhalte teilweise doppelt vorhanden sind und die Website nicht über eine responsive Ansicht verfügt.
Mittels einer Produktanalyse wurde die Unique Selling Proposition, also das Alleinstellungsmerkmal des Unternehmens definiert. Dieses lautet „Wir sind die einzige Destillerie, die über eine reichhaltiges Angebot aus handgemachten Edelbränden aus der Region verfügt.“ Außerdem wurde eine Secondary Research durchgeführt, dabei wurde über die Website hinweg geschaut, um herauszufinden, ob die Destillerie Urban noch weitere Kanäle betreibt. Danach folgte ein Corporate Check, bei dem das bestehende Design der Marke genauer unter die Lupe genommen wurde. Aus all den Erkenntnissen dieser Recherche wurde schlussendlich die Markenpersönlichkeit definiert, also die Marke als Person, mit all ihren Hobbys, Zielen und Charaktermerkmalen.
Planung
Im nächsten Schritt folgte die Planung der neuen Marke, sowie der neuen Website.
Es wurden zwei User Personas entwickelt, welche der Zielgruppe der Destillerie Urban entsprechen. Für jede Persona wurde auch der Grund, warum sie die Website aufruft, definiert. Basierend auf den erarbeiteten Personas wurden dann Use Cases, User Stories und User Journeys erstellt. Der Use Case beschreibt einen gewöhnlichen Anwendungsfall, den die NutzerInnen mit der Website durchführen. Mittels User Stories werden die Rahmenbedingungen gesteckt und Anforderungen an die Website gestellt. Und die User Journey beschreibt die Erfahrung, inklusive den Wünschen und den Herausforderungen, die Nutzer*innen machen, wenn sie mit der Website interagieren.
Als nächstes wurden sich über den Aufbau der neuen Website Gedanken gemacht, hierfür kamen Card Sorting, Sitemaps und User Flows zum Einsatz. Card Sorting ist eine gute Möglichkeit, um alle Inhalte einer Website aufzulisten und logisch zu gruppieren. Somit lässt sich in weiterer Folge etwa eine Menüstruktur einfacher entwerfen. Bei der Website der Destillerie Urban war es mir besonders wichtig, die bestehende Navigation zu vereinfachen, da viele Inhalte thematisch auf einer Seite zusammengefasst werden können. Die Sitemap ist quasi die logische Weiterführung des Card Sortings. Hierbei handelt es sich nun aber schon um die eigentlichen Seiten der Website und wie sie zueinanderstehen. User Flows zeigen im Detail welche Seiten NutzerInnen vom erstmaligen Aufrufen der Website besuchen, bis sie schlussendlich ein vordefiniertes Ziel erreicht. Weiters werden Schritt für Schritt alle Entscheidungsmöglichkeiten und auch mögliche Ausstiegsszenarien dargestellt
Design
Nun war es an der Zeit, der neu definierten Marke ein Gesicht zu geben. Hierfür wurde zuerst ein Moodboard kreiert, welches bereits das generelle Look & Feel des neuen Markenauftritts vermittelt, ohne dabei konkrete Designelemente zu zeigen. Dabei war es mir sehr wichtig, durch eine stimmige, aber vertraute Bildsprache den Bezug zur Regionalität und der Liebe zum Handwerk beizubehalten. Bei der Farbwahl zielte ich auf einen edlen, hochwertigen Look ab. Das Stylescape (siehe oben) hingegen zeigt bereits wie Elemente des User-Interface, wie beispielsweise Überschriften, Fließtexte und Buttons aber auch andere Gestaltungselemente des Markenauftritts aussehen könnten.
Im Redesignprozess hat sich beinahe alles an der Marke verändert, nur das Logo nicht. Bei diesem wurde nur die Farbe an das neue Design angepasst, da ich vom Design und vor allem vom Sinn und Zweck der Gestaltung des Logos überzeugt war. Die Siegelform wurde nämlich nicht zufällig ausgewählt, das Logo dient zugleich auch als Stempel. Erst wenn sich der rote Stempel auf dem Etikett befindet, darf das abgefüllte Destillat den Hof von Christian Urban verlassen, denn erst dann ist er von der Qualität seines Produkts überzeugt.
Prototyping
Nach all der vorgeleisteten Arbeit wurden schlussendlich Scribbles und Skizzen der Website, sowie zwei unterschiedliche Arten von Prototypen der Website angefertigt.
Aus den Scribbles wurde zunächst ein klickbarer Low Fidelity Prototyp erstellt. Low Fidelity bedeutet das hier noch nicht das fertige Design vorliegt, aber schon der generelle Aufbau und die Struktur der Website ersichtlich ist. Mit diesen klickbaren Wireframes lassen sich beispielsweise die User Flows von Anfang bis Ende durchnavigieren und es können noch eventuelle Fehler ausgebessert werden.
Auf Basis der Low Fidelity Prototypen wurden im nächsten Schritt High Fidelity Prototypen entwickelt, welche bereits die zuvor definierten Designelemente enthalten. Hierbei handelte es sich um einen iterativen Prozess, was bedeutet, dass diese Prototypen dann evaluiert wurden und das Feedback der Evaluierung in einer nächsten, verbesserten Version eingebaut wurde. Mit dem Feedback des Usability-Tests konnten die High Fidelity Prototypen nochmals verbessert werden und liegen nun so weit in der derzeit finalen Form vor.
Fazit
Abschließend lässt sich sagen, dass ich im Rahmen dieses Projekts im Bezug auf Prototyping eine Menge dazulernen konnte. Die eingesetzten Methoden haben mir nochmals verdeutlicht, wie wichtig es ist, sich schon zu Beginn umfassend mit der behandelten Marke beziehungsweise dem Unternehmen und dessen Zielgruppe auseinanderzusetzen, um am Ende ein gelungenes Design zu entwickeln, welches für die Zielgruppe im Gegensatz zum bestehenden Design auch wirklich einen Mehrwehrt bietet.
Ich konnte mit dem Redesign der Website schlussendlich auch den Auftraggeber überzeugen und darf mich nun in weiterer Folge um die tatsächliche Umsetzung der Website kümmern.
Christian Urban, Inhaber Destillerie Urban