Explore
de
Partner

Care On Skin GmbH

Verwendete Technologien

Python, Redis, Amazon Web Services, React, GraphQL, Apollo

Industrie
Kosmetika
Leistungen

Responsive Progressive Web App, Saleor Admin Panel, e-Commerce Backend, Scalable Cloud Infrastructure

Der Hintergrund

Dermalogica ist die Nummer 1 unter professionellen Hautpflege Therapeuten. Sie produzieren und verkaufen ihre Produkte in 106 Ländern. Das Unternehmen arbeitet weltweit mit 100’000 Therapeuten zusammen und hat bis heute über 300 Auszeichnungen erhalten. Das Unternehmen wurde 1986 mit dem alleinigen Ziel gegründet, innovative und professionelle Hilfe für die Hautpflege anzubieten. Obwohl die Marke Dermalogica auch offline sehr beliebt und anerkannt ist, war ihre Schweizer Online-Präsenz nicht optimal. Der Webshop wurde mit veralteter Technologie, Konvertierungstrichtern und einem überholten Erscheinungsbild aufgebaut.

Schon vor diesem Projekt war Dermalogica Schweiz ein treuer Kunde von uns, der hauptsächlich unsere Digital Marketing Skills nutzte. Daher entschied sich das Unternehmen, unsere volle Kompetenz auszunutzen, indem es uns beauftragte, dessen E-Commerce-Präsenz in das nächste Zeitalter zu bringen.

Die Herausforderung

Dermalogica stand vor mehreren Herausforderungen, die es gemeinsam zu meistern galt. Einerseits hatten sie umsatzstarke Verkaufsstellen im Schweizer Markt aufgebaut, andererseits wurde ihre Marktposition durch Grauimporte angegriffen und Low-Price Webshops konkurrierten mit ihren Preisen. Der Webshop schien damals der Nebendarsteller in einem Film zu sein, in dem er der Protagonist hätte sein sollen. Statt einer vollständig digitalisierten Erfahrung mit Schwerpunkt auf Leistung und User Experience war die Website ein blosses Abbild ihres Offline-Geschäfts. Da es an klaren Conversion Funnels fehlte, stellte die Navigation durch den Shop eine grosse Herausforderung für die Benutzer dar und machte zudem eine angemessenes Tracking des E-Commerce nahezu unmöglich.

Angesichts dieser Herausforderung haben wir uns gemeinsam auf Folgendes geeinigt:

  • Der neue Shop muss neue Massstäbe setzen. Wie die Inhaltsstoffe der Dermalogica-Produkte muss der Shop „nur das Beste“ enthalten.
  • Wir müssen den sauberen, professionellen, aber frischen und jungen Look & Brand von Dermalogica annehmen.
  • Botschaft des Designs: We’re the experts.

 

Die Lösung

Aufgrund der Herausforderung war es klar, dass kein Plug & Play-Shopsystem wie Magento, Prestashop oder gar Shopify eine geeignete Wahl ist. Wir müssen die Plattform unter voller Kontrolle haben, um die besten Ergebnisse zu erzielen. Langsam aber sicher waren die ersten Pioniere in der Schweiz mit PWA (Progressive Web Apps) auf dem Markt – deshalb haben wir uns für den Aufbau einer zukunftsweisenden PWA entschieden. Um von Grund auf die beste Leistung zu erzielen, beschlossen wir, dass Backend und Frontend voneinander getrennt werden mussten. Das Backend sollte Produktdaten, Bestellungen und Kategorien verwalten, und das Frontend sollte diese Daten schnell sichtbar machen. Wenn eine PWA gut implementiert ist, ist es auch möglich, die “Offline First Methodology” zu implementieren, die bei Google sehr beliebt ist, und dies sollte sich auch in den organischen Rankings widerspiegeln: Offline First. Wir haben uns für das Open-Source-Framework „Saleor“ entschieden, weil diese neue Lösung all unsere hohen Erwartungen erfüllen konnte und wir bereits ein vergleichbares E-Commerce-Projekt erfolgreich abgeschlossen haben.

Beim visuellen Design hatten wir den Schwerpunkt auf Conversion-Optimierung und Upselling gelegt, also haben wir mehrere Eecommendation Engines, dynamische Filteroptionen und ein Rabattmodul implementiert, das die Aufmerksamkeit auf sich zieht. Wir haben ein vollständig interaktives visuelles Design entwickelt, mit dem sich der Benutzer einfach, intuitiv und nahtlos durch den Shop bewegen kann.

Die Wahl der richtigen Technologie

Aufbauend auf einem Offline-First-Ansatz können die Nutzer nun auch mit langsamer oder gar keiner Internetverbindung bequem auf dermalogica.ch surfen. Die Optimierung der Seitengeschwindigkeit hält die Ladezeiten gering und erhöht die Wahrscheinlichkeit von Conversions. Dank modernster Technologie, geringer Ladezeiten, dynamischer Meta Descriptions und der Möglichkeit, SEO-Beschreibungen vom Dashboard aus vollständig anzupassen, kann Dermalogica nun auch von einer deutlich höheren Positionierung in den organischen Suchergebnissen profitieren.

Steigerung der Conversions

Wie bereits erwähnt, war eines unserer Hauptziele die Steigerung der Conversions, die wir mit verschiedenen Ansätzen in Angriff nahmen.

Recommendation engines: Im gesamten Shop platzierten wir Produktempfehlungen auf jeder Seite, auf der wir für den Kunden einen Mehrwert schaffen und so die Wahrscheinlichkeit einer Conversion erhöhen konnten. Produktempfehlungen passen sich folgenden Elementen an:

  • Bestseller-Section: Dieser Abschnitt verfolgt die Gesamtverkaufszahlen jedes einzelnen Produkts im Shop und wird ständig aktualisiert, um dem Benutzer die acht meistverkauften Produkte auf einen Blick zu präsentieren. Darüber hinaus werden die Produkte auch mit einem animierten Sticker hervorgehoben, um sicherzustellen, dass die Top-Shots zu jedem Zeitpunkt gefunden werden.
  • Der Experte wählt aus: In diesem Abschnitt können wir die Benutzer für ausgewählte Produkte begeistern. Der Bereich kann mit einem Klick mit Produkten gefüllt werden, die am meisten Aufmerksamkeit benötigen. So erhalten verborgene Schätze ihren grossen Auftritt.
  • „Das könnte dir auch gefallen“ Teil 1: Auf jeder Produktdetailseite werden dem Kunden ähnliche Produkte aus verschiedenen Produktlinien vorgeschlagen. So kann der Benutzer zu Alternativen Produkten wechseln, ohne grosses Hin und Her.
  • „Das könnte dir auch gefallen“ Teil 2: Während er den Einkaufswagen betrachtet, schlagen wir dem Benutzer weitere tolle Produkte vor, die perfekt passen, um seine Einkaufserlebnis optimal zu vervollständigen.

Strictly above the fold: Für die beste Performance, haben wir sichergestellt, dass alle wichtigen Elemente wie Call to Actions „above the fold“ liegen, unabhängig von der Grösse des Bildschirms.

Die USPs sichtbar machen: Durch eine progressive Darstellung der wichtigsten USPs von Dermalogica sowohl auf der Produktkategorie als auch auf der Detailseite. Wir stellen sicher, dass wir den Wert, den der Kunde erhält, ohne jegliche Suche kommunizieren.

Premium – Auch Online

Eine der Herausforderungen, vor denen wir standen, war es, die Conversions voranzutreiben und gleichzeitig die Premium-Markenidentität von Dermalogica zu bewahren. In mehreren Design-Iterationen haben wir Lösungen entwickelt, um die besten Praktiken zur Verbesserung der Conversions zu implementieren und gleichzeitig dem Benutzer ein schönes Erlebnis zu bieten. Wir entwarfen ausschliesslich animierte Störer für Werbezwecke, die durch eine sorgfältig ausgewählte Farbcodierung und die perfekte Balance zwischen „Push“ und künstlerischem Design sowohl Aufmerksamkeit als auch Erstaunen hervorrufen.

Unser Ansatz

Zu Beginn unserer Reise vertieften wir uns in die UX-Forschung mit dem Ziel, die Personas, die User Journey und den allgemeinen Umfang des Projekts zu definieren. Ein wichtiger Teil dieses Schrittes war auch, die Werte von Dermalogica vollständig zu verstehen.

Von dort aus begannen wir mit dem Prozess des Wireframing, der nach mehreren Iterationen mit dem Kunden schliesslich zu Design-Mockups führte, die später, mit Zustimmung von Dermalogica, in das endgültige Designkonzept umgewandelt wurden. Dieses Konzept wurde noch einmal mit allen Beteiligten besprochen, um die endgültige Zustimmung aller zu erhalten. Zu diesem Zeitpunkt starteten wir offiziell die Entwicklungsphase mit einem sechsköpfigen Scrum-Team.

Insgesamt haben wir die Entwicklung der Progressive Web App in 4 Sprints abgeschlossen. Nach jedem Sprint wurde dem Kunden ein weiteres Puzzleteil geliefert, damit er uns sein Feedback dazu geben konnte. Da Transparenz ein wichtiger Teil unserer Kultur ist, war es klar, dass der Kunde während des gesamten Prozesses vollen Zugang zur Staging-Umgebung hatte und den Fortschritt seiner Lösung rund um die Uhr mitverfolgen konnte.

Das Resultat

Seit wir am 21. Oktober 2019 den neuen Dermalogica Webshop live geschaltet haben, können wir bereits einen sehr positiven Trend bei den Umsätzen und dem Gesamtumsatz beobachten. Darüber hinaus hat die Platzierung der Website und ihrer Unterseiten einen deutlichen Sprung in den organischen Suchergebnissen gemacht und ist nun vor den Mitbewerbern gelistet.

Mit dem neuen Shop setzt Dermalogica Schweiz neue Massstäbe für die gesamte Marke und ist den Mitstreitern einen grossen Schritt voraus.

+ 83.5% Verkäufe

im Vergleich zum gleichen Zeitraum des Vorjahres

+ 78% Transaktionen

Anzahl der Transaktionen pro Monat

6% Conversion Rate

grösser als der Branchendurchschnitt 2,63 %

The minds behind

Benedict von-Hoffmann
Jakob Kaya
Vadim Kravcenko
Ruslan Botnar
Aleksandar Petrovic
Bogdan Djukic
Oleksandr Roshchupkin
Marijana Vukovic
Anton Evidenov
Borko Mitrovic