webdesign • branding • 2024
Erika lobnig
Viele Beauy-Salons haben eine Website. Doch nur wenige haben eine, die ihre Marke wirklich widerspiegelt. Wie gelingt es, aus einem simplen Online-Auftritt ein exklusives Markenerlebnis zu machen?
Der Prozess
Im Rahmen meines Studienschwerpunkts wurde mir die Aufgabe gestellt, ein bestehendes Webdesign zu verändern und eine Desktop- sowie eine Mobilversion zu gestalten. Ich entschied mich für die Website eines Friseurbetriebs in Kärnten. Für die Umsetzung des Projekts wurde das untenstehende Prozessmodell angewandt.
Verstehen
Aufbau der bestehenden Website
Zunächst habe ich den Aufbau der bestehenden Website analysiert. Dabei habe ich sowohl optische Verbesserungspunkte als auch Fehler im User-Flow entdeckt, die behoben werden sollten. So wechselte beispielsweise das Menü die Position am Viewport und in der mobilen Version waren die Inhalte nicht an die schmalere Bildschirmbreite angepasst, sodass sie nicht lesbar waren. Außerdem waren Abstände, Schriftgrößen und Textlängen inkonsistent. Im Rahmen dieser Recherche erschlossen sich ebenfalls relevante Menüpunkte und Inhalte, die erhalten bleiben sollten.
Konkurrenz und Produkt
Im Anschluss wurde eine umfassende Konkurrenzanalyse durchgeführt. Dabei wurden das Design, das Leistungsangebot und das Webdesign anderer Friseurbetriebe in der unmittelbaren Umgebung beleuchtet. Es zeigte sich, dass diese Salons ein konsistenteres Markenbild und Webdesign aufweisen und ihr Team und ihre Leistungen stärker präsentieren. Im Rahmen der Produktanalyse wurden die Dienstleistungen näher betrachtet, Trends und Chancen erfasst, eine SWOT-Analyse durchgeführt und ein USP formuliert.
Die Marke
Nach der Konkurrenz- und Produktanalyse wurde die bestehende Marke näher betrachtet. Hierzu wurde eine aktuelle Markenpersönlichkeit erstellt, um die Marke bildlich darzustellen. Zudem wurden Bestandteile des Corporate Designs wie das Logo, die Farbpalette und die Bildwelt analysiert.
Kombinieren
Zielgruppe
Im Anschluss erfolgte die Zielgruppenanalyse. Dabei wurden demografische Daten, Eigenschaften, Werte und Motive für den Besuch im Friseurstudio ermittelt. Auf dieser Grundlage wurden drei Personas erstellt, die neben demografischen Daten auch UX-Anforderungen, Use Cases und User Stories umfassen. Auf Basis dieser Ergebnisse wurden anschließend Anforderungen für Nutzer*innen, das Unternehmen und die Marke definiert.
Neue Markenpersönlichkeit
Auf Basis der Ergebnisse aus der strategischen Planung wurde eine neue Markenpersönlichkeit entwickelt. Sie wirkt etwas moderner und trendbewusster, der Wohlfühlfaktor bleibt jedoch erhalten.
Markenessenz
Aus den Ergebnissen der vorgegangenen Analysen wurde eine Markenessenz festgelegt, die sich auf drei Werte fokussiert: Vertrauen, Exklusivität und Entspannung.
Gestalten
Logo
Anschließend wurde das Corporate Design entsprechend der neuen Markenpositionierung angepasst. Zu diesem Zweck wurde zunächst ein Moodboard erstellt, um eine gestalterische Richtung festzulegen. Im nächsten Schritt wurde das Logo umgestaltet. Hierzu wurden die Buchstaben des Schriftzugs „Erika Lobnig“ als Custom Font entworfen. Dadurch wirkt das neue Logo exklusiver und durch die runden Formen in den Buchstaben auch entspannter.
Farbwelt
Neben dem neuen Logo-Schriftzug wurde auch eine neue Farbpalette erstellt. Diese umfasst eine größere Farbauswahl, zu der neben entspannenden Grüntönen auch ein aktivierendes Orange gehören.
Typografie
Die Schriftarten sollten den exklusiven Charakter unterstreichen und dennoch gut lesbar sein. Hierzu wurde für Headlines die Schriftart „Swear Display“ und für Fließtexte die geometrische Schriftart „Satoshi“ ausgewählt.
User Experience
Im Rahmen der Planung der User Experience wurden zunächst eine Card-Sorting-Analyse durchgeführt, eine Sitemap erstellt und ein User Flow generiert. Anschließend wurde der Aufbau der Website mithilfe von Scribbles geplant. Aufbauend auf diesen Scribbles wurden Papierprototypen erstellt, die in Figma getestet wurden.
Prototyp
Gemäß dem Motto „Mobile First“ wurde zunächst ein mobiler Prototyp in Figma erstellt und anschließend getestet. Hierbei entstanden zunächst Scribbles und ein klickbarer Papier-Prototyp, der getestet wurde. Danach wurde auch ein Desktop-Prototyp erstellt.
Umsetzen
Komponenten
Auf Basis des neuen Brand Designs und der Anforderungen an die User Experience wurde anschließend ein Set an Komponenten gestaltet, das Navbars, Footer, Buttons, Labels, Links, Farbpalette und weitere wiederkehrende Elemente umfasst.
Finales Design
Die Website umfasst insgesamt eine Startseite, eine „Über uns“-Seite, auf der das Team und der Salon vorgestellt werden, eine Seite mit den angebotenen Leistungen inklusive der aktuellen Preise sowie ein Tool zur Terminbuchung.
