
Making-of: E-Commerce- und Aboplattform Outlines
Badezimmer-Accessoires zum Nachfüllen: Wir zeigen, wie Work & Co die E-Commerce- und Abonnement-Plattform für das nachhaltige New Yorker Start-up Outlines entwickelte
Dazu mussten die beiden zunächst ihre Zielgruppe ganz genau verstehen und sich tief in das große Thema Recycling einarbeiten. Ihnen wurde schnell klar, dass Plastikverpackungen für viele amerikanische Durchschnittskunden zum Alltag gehören – sie kümmern sich nicht ums Recycling, sind sich des Plastikproblems aber inzwischen doch sehr bewusst und würden es wirklich gerne besser machen. »Und weil es eben kein tief verwurzeltes Verhalten ist, muss Recycling für uns sehr, sehr bequem gestaltet sein und sich supereinfach in den Alltag integrieren lassen, damit es funktioniert«, erklärt Megan Murphy.
Vom Einweg- zum Austauschmodell
Nachdem Murphy und Young sich über Materialien und Verwertung schlau gemacht hatten, entwickelten die beiden ihr erstes Modell Steamy, das statt aus PVC aus Polyethylenvinylacetat, kurz PEVA, bestand. PEVA dünstet im Gegensatz zu PVC keine giftigen Gase oder krebserregenden Phthalate aus und ist sowohl recycel- als auch biologisch abbaubar. Auf Instagram und Facebook bewarben sie Steamy dann mit Slogans wie: »Want to use less plastic? Change your shower liner, don’t change your routine« oder »We can’t control bacteria, but we do make a non-toxic shower liner that is neither a computer nor a toilet seat«. Das Modell entwickelte sich zum Verkaufshit mit tausenden verkauften Stücken. Es gab den Steamy portofrei im Multipack, und trotz holpriger Corona-Monate konnte das Gründer:innenduo genug neue Kund:innen gewinnen, um den nächsten Schritt zu wagen und zu wachsen.

Zu diesem Zweck firmierten die beiden um – aus der Firma Dripp wurde im Januar 2022 Outlines mit einem ganz neuen Konzept, das ein ganzes Sortiment an nachhaltigen, partiell auswechselbaren Badezimmeraccessoires im Abomodell umfasst. Zunächst konzipierten Murphy und Young den Duschvorhang neu: Er besteht nun aus einem zweiteiligen System, bei dem man lediglich das große Kunststoffteil (»Replen«) austauscht und die waschbare, baumwollene Befestigungskomponente (»Keep«) behält. Zudem richteten sie ein Rücksendesystem für den Replen ein: Jedem neu erworbenen Duschvorhang liegt ein frankierter Rücksendebeutel bei. Die Reststoffe übergibt Outlines dann einem zertifizierten lokalen Recyclingunternehmen.
»Wir hatten schon einen großen Kundenstamm im ganzen Land und konnten daraus interessante Rückschlüsse ziehen«, berichtet Megan Murphy. Die beiden hatten vermutet, dass ihr typischer Kunde ein Urban Millennial sei – doch weit gefehlt: »Die meisten unserer Kunden sind eher weiblich und älter als 45 und weder irgendeiner Partei noch Region zuzuordnen, sondern überall im Land verteilt«, erklärt Luke Barkley Young.
Transparente UX gegen Abonnementmüdigkeit
Mit diesen interessanten Fakten und der Idee für einen neuen Badezimmerartikel – einem zweiteiligen Schwamm für die Körperpflege – wandten sich Murphy und Young im Frühjahr 2022 an einen befreundeten Kollegen vom New Yorker Agenturbüro Work & Co, und es kam zu einem Treffen mit dem Designdirektor Calvin Teoh.

Typischerweise arbeitet die Agentur für große bekannte Marken wie Aesop oder IKEA, aber die Zusammenarbeit mit Outlines reizte sie trotzdem: »Die Start-up-Atmosphäre bei Outlines und ihr großes Designverständnis gefielen uns, und wir sahen großes Potenzial im Redesign der Website. Die Herausforderung bestand darin, der Subscription Fatigue der Nutzer eine Experience entgegenzusetzen, die volle Kontrolle und Transparenz über das Abonnement verschafft«, so Teoh.

Zu Beginn des Prozesses erinnerte er sich an einen Satz seines Kollegen Felipe Memoria, Mitgründer von Work & Co: »Der Kern unseres Designprozesses ist die Definition von Proportionen und Beziehungen.« – »Also debattierten wir: Was ist groß und was klein? Und stellten uns ein paar Fragen: Was ist einzigartig an Outlines, welche Details unterscheiden die Marke von anderen, was wollen die Nutzer:innen auf der Website, und was macht bisher niemand in diesem Bereich?«, erklärt Calvin Teoh.
Interface für Kundenaccount: Der Plan ist der Held
An erster Stelle stand also die persönliche Austauschfrequenz jedes Users, die ihm oder ihr das Gefühl gibt, gerade so viel zu bekommen, dass man kein schlechtes Gewissen hat, aber auch kein unhygienisches Zuhause aushalten muss. Zudem sollten das mögliche Überspringen, Anpassen oder Pausieren von Auffüllaktionen im Vordergrund stehen. »Jeder kennt die Dark Patterns bei Aboangeboten für Haushaltswaren, aber wir glauben, dass Menschen sich eher für ein Abonnement anmelden, das sie verstehen, und dass sie es länger behalten, wenn sie es einfach und schnell managen können«, erklärt Luke Barkley Young. Angelehnt an das Prinzip der Musiksteuerung mit ihren Play-, Skip- und Pause-Buttons, entwickelten die Designer ein Interface für den Kundenaccount, bei dem Nutzer:innen die Auffüllfrequenz per Klick einfach überspringen, anpassen oder pausieren können, damit sie nur das zugesandt bekommen, was sie wirklich benötigen.

Visuelle Elemente: Wurmförmige Nummern
Um den persönlichen Nachfüllplan in Szene zu setzen, wählte Teohs Team ein ganz besonderes visuelles Element: »Wir wollten die Zahlen hervorheben und damit das Interesse der Kunden am Replenishment-Ansatz wecken. In einer sehr frühen Phase entwickelten wir mit GSAP und D3.js eine dynamische Glyphe, um die variable Natur der persönlichen Frequenzen widerzuspiegeln«, berichtet Teoh. In einem Interface-Prototyp neben den klar und clean designten Produkten erschien das Element jedoch zu groß, zu chaotisch. »Aber so seltsam und unförmig es auch war, wir hatten es liebgewonnen, es hatte Charakter und fühlte sich lebendig an.«

So blieb sein Team bei der merkwürdig wandlungsfähigen Ziffer, die sie »den Wurm« tauften, und begann, mit seinem Code herumzuexperimentieren, um die Ziffern etwas hübscher zu gestalten. »Wir haben mehr Kreise hinzugefügt, um die Abstufung zu verringern, oder mit ihrem Radius gespielt, um mehr Klarheit zu schaffen«, sagt Calvin Teoh. Zum Schluss fügten sie Filter für klare Umrisse hinzu, färbten die Zahlen in den Brandfarben und gaben den Ziffern konturierende Farbverläufe. Da sich in ihrem JavaScript-Tool die Pfade der jeweiligen Formen bearbeiten und als SVG exportieren lassen, war während des gesamten Prozesses eine nahtlose Übergabe an die Entwickler möglich, sodass die Designer die Zahlen weiter iterieren und verfeinern konnten.
E-Commerce-Plattform: Shopify ausreizen
Als E-Commerce-Plattform wählten Outlines und Work & Co schließlich Shopify. »Dank der einfachen Inhalteverwaltung, der Zahlungsabwicklung und der flexiblen Template-Sprache Liquid konnten wir zügig entwickeln und uns auf die wichtigsten Features konzentrieren«, erinnert sich Nemanja Nićiforović, Technology Partner bei Work & Co. Für den mehrstufig aufgebauten Abonnementassistenten, der ein kleines Quiz zum Duschverhalten sowie die angepassten Warenkorb- und Checkoutprozesse enthält, implementierte sein Team eine native Anwendung in HTML, CSS und JavaScript, die die Daten von Shopify übernimmt, den Nutzer:innen durch den Prozess führt und dann die Daten an die Plattform zurückgibt. Auf Basis der Designkomponenten in Figma entwickelten sie daneben von Grund auf ein individuelles Shopify-Theme in Liquid, das die Inhalte – Videos, Produktrenderings, Fotos – in Szene setzt und die komplexen Konfigurations- und Managementprozesse leicht verständlich verpackt.

Konversionsrate: Erfolg bestätigt Design
Seit dem Launch der neuen Website hat sich die Konversionsrate verdoppelt, und die Aboabschlüsse stiegen um mehr als zehn Prozent. Außerdem liegt die Rücksendequote der PEVA-Komponente bei 80 Prozent – viel höher, als die beiden Gründer:innen erwartet hatten: »Wir hatten uns gewünscht, dass mindestens die Hälfte ihren alten Duschvorhang zurückschickt. Das zeigt uns, dass unser Recyclingprinzip wirklich bequem ist und im Alltag funktioniert«, berichtet Megan Murphy – und Luke Barkley Young ergänzt: »Die neue Website von Work & Co hat enorm dazu beigetragen, einen einfachen und eleganten Prozess zu etablieren, der hilft, das Plastikmüllproblem in den USA zu lösen.«
Einbahnstraße Plastikrecycling
Reuse- und Refill-Systeme sind die Lösung
2021 fielen in US-Haushalten schätzungsweise 51 Millionen Tonnen Plastikmüll an, von denen lediglich rund 2,4 Millionen Tonnen (4,71 Prozent) recycelt wurden – der Großteil landet auf der Halde. Denn Kunststoffrecycling ist hochkomplex, je nach Zusammensetzung der Thermoplaste unterschiedlich effizient und verschmutzend. Darüber hinaus »ist das meiste Plastik einfach nicht recycelbar. Die tatsächliche Lösung besteht darin, auf Reuse- und Refill-Systeme zu wechseln«, erklärte US-Greenpeace-Aktivistin Lisa Ramsden anlässlich der Veröffentlichung des Reports »Circular Claims Fall Flat Again« im Oktober 2022. Aber nicht nur in den Vereinigten Staaten ist es um das Kunststoffrecycling schlecht bestellt. Die OECD berichtete im Februar 2022, dass 2019 weltweit lediglich 9 Prozent des Kunststoffmülls recycelt wurden, während 22 Prozent – fast ein Viertel! – unkontrolliert in der Umwelt landeten. Alles dazwischen wurde auf Deponien gesammelt oder verbrannt und bestenfalls energetisch genutzt.
Mehr Infos zum Thema Nachhaltigkeit und Design
- Schwerpunkt Sustainability und Design. In PAGE 02.23 dreht sich alles um nachhaltiges Design
- So funktioniert Circular Design. Karel Golta von Indeed Innovation erläutert den Nachhaltigkeitsansatz
- PAGE Connect »Sustainable Design bei der Peter Schmidt Group«. Cases für KfW, Mey und DB
Dieser Artikel ist in PAGE 04.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.