Kosmetikstudio Ivko

Einführung

Kosmetikstudio Ivko, ist ein Unternehmen welches regional agiert. Es wurde bereits 2013 eine Website erstellt, welche jedoch nicht weiter gepflegt wurde. Die damalige Seite wurde mittels eines Homepage-Baukasten erstellt.

Vorgehensweise

Nach der Aufnahme der Anforderungen und Wünsche des Kunden, wurde zunächst die bestehende Website auf deren Elemente, Inhalte und Designentscheidungen untersucht. Hierbei fiel sofort das non-responsive Verhalten der Seite, als auch fehlende Inhalte auf. In diesem Zuge wurden auch verschiedene Webseiten anderer Kosmetikstudios untersucht. Im nächsten Schritt wurden User Personas erstellt, um potenziellen Kunden eine bestmögliche User Experience zu ermöglichen. Anschließend wurde mit einem Konzept für das Redesign der Website mittels Figma begonnen. Aufgrund der Hauptzielgruppe wurde mit einem mobile-first Ansatz gearbeitet. Bevor mit der Entwicklung begonnen wurde, wurde das Konzept in mehreren Iterationen mit dem Kunden abgestimmt. Während der Entwicklung wurde regelmäßig die Kommunikation mit dem Kunden gesucht, um so frühzeitig Feedback zu sammeln und ggf. Anpassungen durchzuführen. Die Umsetzung des Projekts fand hierbei in React inklusive Next.js und Tailwindcss statt. Nach finaler Abnahme und Onlinestellen der Webseite finden immer noch kontinuierliche Anpassungen statt, wie zum Beispiel das Hinzufügen einem Element zu Corona Sicherheitsmaßnahmen.

Herausforderungen

• Kein Responsive-Design
• Veralteter Kontent
• Fehlende Mediadateien

Design

Aufgrund der Hauptzielgruppe und auf Wunsch des Kunden wurde mit hellen Farbtönen gearbeitet. Als Hauptton wurde die Farbe der Wisteria-Pflanze ausgewählt.

Um die Überschriften aufzuwerten, wurde ein Pinseleffekt hinzugefügt, welcher thematisch gut zu einem Kosmetikstudio passt. Die Farbe der Überschriften ist weiß.

Die Schriftart Montserrat wurde entsprechenden dem bestehenden Logo ausgewählt. Hierbei wurde sowohl mit der Regular als auch der Light Variante der Schrift verwendet.

Das Logo war nur in einer schlechten Qualität vorhanden. Deshalb wurde im ersten Schritt das vorhandene Image mittels Inkscape zu einem SVG verwandelt. Hierdurch konnte das prägnante Icon des Logos auch in der Navbar verwendet werden.

Kosmetikstudio

Parfümerie

Vera Ivko

User Journey

Auf der Landingpage soll dem Kunden ein schneller Überblick über das Unternehmen und dessen Leistungsumfang geboten werden. Neben einer allgemeinen Beschreibung und dem Leistungsumfang wurde ein Element erstellt, in dem der User auf einen Blick wichtige Informationen über das Unternehmen erhält. Auch sollen regelmäßige Kunden schnell auf die einzelnen Inhalte der Seite zugreifen können, deshalb wurden weitere Seiten für die Behandlungen, die Preisliste, das Studio und den Kontakt angelegt. Die Navigation findet hierbei durch eine sticky Navbar statt. Um einen positiven ersten Eindruck zu gestalten wurde ein Hero mit einem Video entschieden, in den der Titel einfaded. Bei der mobilen Ansicht nimmt der Hero 50% und in der Desktopansicht 100% des Screens ein.

Im nächsten Element wird dem User das Unternehmen vorgestellt. Darauf aufbauend gelangt der Kunde über ein kurzes Faktenelement zu den angebotenen Dienstleistungen des Unternehmens. Da es bei den Leistungen um Behandlungen handelt, welche einen französischen Namen besitzen, gelangt der Kunde mittels eines Klicks auf diese zu der Behandlungs-Seite, in der die jeweiligen Behandlungen genauer beschrieben werden. Auf der Studio-Seite wird in der mobilen Ansicht die einzelnen Räumlichkeiten beschrieben und Bilder in Form eines Grids angezeigt. Bei der desktop Ansicht handelt es sich um ein fullscreen Grid, bei dem die Bilder beim Hovern den Opacity Filter triggern.

Anschließend wird der Inhaber genauer beschrieben. Nach der Behandlungsseite, auf welcher die einzelnen Dienstleistungen genauer beschrieben werden, kann der User auf die Preisliste gelangen. Hier wird mittels hover die jeweilige Zeile hervorgehoben. Auf der Kontaktseite findet der User neben den Kontaktdaten auch eine Google-Maps Karte um seine Anreise zu planen.

Sitemap

Die Seite wurde in 6 verschiedene Seiten unterteilt. Neben der Startseite existiert eine Page für das Studio, die Behandlungen, die Preisliste, den Kontakt und das Impressum.

SEO

Anschließend an die Entwicklung wurde eine SEO-Analyse durchgeführt und entsprechende Maßnahmen eingeleitet. Neben Meta-Descriptions wurden auch Rich-Snippets für SERPs erstellt. Ebenfalls wurden Open Graph Tags für die einzelnen Social-Media-Kanäle generiert. Nach einer Keywords-Analyse wurde der bestehende Content angepasst und gezielt Keywords positioniert. Um die Performance der Seite zu verbessern wurden die gelieferten Media-Dateien in die richtigen Dateiformate gebracht und in der Größe reduziert. Die Lighthouse Performance Indikatoren sehen wie folgt aus: