Ziel war es, für sleep.ink eine flexible, moderne E-Commerce Seite zu erschaffen, die der steigenden Aktivität im Onlinemarketing gerecht werden kann. Insbesondere sollten Mitarbeiter des Marketingteams eigenständig in der Lage sein, Landingpages für Kampagnen zu gestalten und zu veröffentlichen.
Eine moderne E-Commerce Webseite, die schnell und nutzerfreundlich ist und gleichzeitig den Anforderungen eines modernes Marketingteams gerecht wird.
sleep.ink ist ein Start-Up aus Berlin, das ein wachsendes Sortiment an innovativen, schlaffördernden Produkten anbietet.
Unser Ziel war es, für sleep.ink eine flexible, moderne E-Commerce Seite zu erschaffen, die der steigenden Aktivität im Onlinemarketing gerecht werden kann. Insbesondere sollten Mitarbeiter des Marketing-Teams eigenständig in der Lage sein, Landingpages für Kampagnen zu gestalten und zu veröffentlichen. Die existierende, mit dem Start-Up gewachsene WooCommerce-Seite, konnte diese Anforderungen nicht mehr erfüllen.
Da sleep.ink keinen traditionellen, großen Produktkatalog anbietet, sollte die E-Commerce Funktionalität passgenau auf die Eigenschaften der angebotenen Produkte abgestimmt werden.
Um diese Anforderungen zu erfüllen, haben wir für sleep.ink ein individuelles CMS auf Basis der Sanity.io Headless CMS Plattform entwickelt. Das CMS bietet einen Page Builder, mit dem eigens designte und entwickelte Blöcke ausgefüllt und zusammengesetzt werden können. Alle Seiten und alle Elemente werden mit diesem Page Builder erstellt, sodass das Marketing-Team die volle Kontrolle über alle Aspekte der Seite übernehmen kann, ohne sich in ein kompliziertes technisches System einzuarbeiten. Auch die Daten für die E-Commerce Funktionalität werden hier verwaltet. So können auf die Produktpalette abgestimmte Informationen einfach und strukturiert verwaltet werden. Dadurch können Elemente wie eine Nutrition Facts Tabelle oder eine Slideshow zu einzelnen Zutaten gespeist werden.
Die E-Commerce Funktionalität des CMS und der Seite ist zur Bestellabwicklung mit Shopify und WooCommerce integriert. Dabei müssen Kunden, die ein Abo abschließen möchten, über WooCommerce statt über Shopify geleitet werden. Durch das eigene CMS für die Produktverwaltung ist diese Komplikation kein Hindernis für Editoren. Der Einkaufswagen ist als interaktives Element direkt in die Seite integriert. Beim Checkout wird der Kunde auf das passende externe Formular weitergeleitet.
Die Website haben wir als statische JAMStack Seite mit dem Gatsby.js Framework umgesetzt. Dadurch ist sie sicher, schnell und kann überall gehostet werden. Im CMS ist eine Echtzeitvorschau mit einem eigenen Gatsby Preview Server integriert.
Um die Zusammenarbeit zwischen Entwicklern und Designern zu stärken, haben wir Storybook in das Projekt integriert. Durch die Kombination aus Storybook und der modularen, komponentenbasierten Arbeitsweise von React.js und Sanity.io konnten wir eine sehr gute Developer Experience schaffen. So können mehrere Entwickler gleichzeitig über CMS und Frontend hinweg einzelne Blöcke entwickeln und testen, ohne dass sie sich um Konflikte sorgen müssen.
Insgesamt haben wir eine flexible Plattform entwickelt, die nun vom Entwicklungs- und Marketingteam von sleep.ink selbständig genutzt und erweitert wird.