Webdesign: So entstand die Landingpage »Flowers for Society
«

Wer hätte gedacht, dass sich die Sammelleiden­schaft für seltene Turnschuhe und Nachhaltigkeit so gut vereinen lassen? Flowers for Society (FFS) heißt sowohl die neue Marke als auch das dazugehörige »Metaverse für Sneakerheads und NFT­-Sammler« der Flowers for Society GmbH, die Till Jagla zusam­men mit Cong Le Tran und Enrico Mickan vor einem Jahr in Hamburg ins Leben rief.

1 Jahr Flowers for Society

Was das Web3-Start-Up innerhalb nur eines Jahres auf die Beine stellte:

• Die erst physische Sneakermarke, die seit Tag 1 auf NFT-Nutzungsrechten und auf einem nachhaltigen Geschäftsmodell und Produktdesign basiert; Produktion nur auf Anfrage, ergo keine Überproduktion, kein Müll, auch kein Tierleder und Mustereffizient in der Herstellung.
• Dabei beträgt die Vorlaufzeit für ein “totally new” Produkt nur sechs bis acht Monate (große Marken 12-18 Monate), die Vorlaufzeit für ein Farb-/Material-Update nur drei Monate.
• Flowers for Society hat bisher drei Sneakermodelle und drei Kleidungsstücke produziert und in seiner treuen FFS-Community vertrieben. Die besteht aus über 10.000 Markenbotschaftern; davon sind 50 Prozent Sneaker-Fans, die andere Hälfte begeisterte WEB3-Nutzer:innen. Mit seinem Discord-Support hat das Start-Up über 1.000 Personen in den Krypto/NFT-Commerce eingeführt.

Jagla war zuletzt als Global Head of Energy bei adidas über ein Jahrzehnt lang selbst Teil des schar­fen Wettbewerbs und ermüdenden Hype­Marketings konkurrierender Weltkonzerne, die ihre begehrten Produkte in Schwellenländern zu niedrigsten Kosten und unter teils fragwürdigen Bedingungen produ­zieren lassen. Dazu wollte der passionierte Sneaker­sammler einen Kontrapunkt setzen: »Statt auf hohe Margen und künstliche Verknappung setzen wir mit Flowers for Society auf ein nachhaltiges Geschäfts­modell und produzieren nur das, was vorher verbind­lich bestellt worden ist«, erklärt Till Jagla.

Playground Sneaker-NFT

So konnte man letzten November über die Website https://flowersforsociety.com für rund 200 Euro den Seed.One kaufen, einen seltenen, fair produzierten Sneaker, und bekam als Geschenk den sogenannten OG – wie »Original« – FFS NFT mit exklusiven Zu­gangs­ und Nutzungsrechten und Vorteilen für die Käufer:innen.

Denn das ausgegebene Token diente nicht nur als Eigentumsnachweis für den Turnschuh im Kryptonetzwerk Polygon, sondern auch als Ein­trittskarte in den virtuellen Sneaker Club »Garden of Comfort«. Hier bekommen Mitglieder Zugang zu neuen Drops und Capsule Collections und können sich untereinander vernetzen und austauschen.

Für Design und Umsetzung der Mobile­-First­-Pre­sale­-Landingpage wandte sich das Trio Anfang Au­gust 2021 an Johannes Aufermann von Astral in Mün­chen. Mit seinen Partnern Hagen Fiedler und Malte Bender arbeitet er für globale Brands wie BMW, Proc­ter & Gamble und MINI, aber auch für aufstrebende Start­ups wie das Seed-­Stage­-Investmentkollektiv Su­perlyst oder innovative mittelständische Unterneh­men wie die Patisserie Walter in Kleinheubach.

• PROJEKT Immersive Brand Experience für die D2C-Sneakermarke Flowers for Society
• KUNDE Flowers for Society GmbH, Hamburg
• DESIGN Astral, München
• TOOLS WebGL, Three.js, Blender, JavaScript, Nuxt.js, Play.ht, Shopify
• ZEITRAUM August bis September 2021

Kreation und Technik für immersive Brand Experience

»Uns war bei der Zusammenarbeit mit Astral die Augenhöhe während des gesamten Kreationsprozes­ses aus Brand-­Sicht sehr wichtig«, sagt Cong Le Tran. »Ein klassisches Briefing mit One­Pager und Kon­zeptentwurf gab es nicht. Was aber existierte, war ein FFS-­Manifest, das die Haltung des Brands wider­spiegelte.« Mit ihm nahm Le Tran das Team mit in die Entstehungsgeschichte der Meta­ und Brand Identity, was den Designern wichtige Einblicke in das für die Gründer sehr persönliche FFS-­Metaverse, ihre Werte, Haltung und Visionen ermöglichte.

»Wir wollten, dass Astral fühlen kann, wer wir sind. Der Kopf war zunächst Nebensache.«

Le Tran hatte wäh­rend des Prozesses auch die Direktion der Brand Ex­perience inne und arbeitete in dieser Hybridfunktion zwischen Kreation und Technik eng mit der Agentur zusammen, um das perfekt abgestimmte Kunden­erlebnis zu schaffen: »Make people feel again« lau­tete von Beginn die Maxime der Kreativen.

FFS-NFT: Designing the Non-Existent

Eine große konzeptionelle Herausforderung bestand darin, einen Sneaker zu präsentieren, der physisch noch gar nicht vorhanden war. »Wir mussten über­legen, wie wir das Produkt erklären und sichtbar ma­chen, ohne es wirklich im Detail zeigen zu können«, sagt Astral­-CEO Johannes Auffermann.

So entstan­den nach den gemeinsamen Workshops in Mün­chen im ersten Schritt eine inhaltliche Struktur für die Website sowie erste Wireframes, die mit einer poetischen, etwas mystischen Einleitung beginnen und das Brand und seine Mission dann immer kon­kreter vorstellen: Es folgt ein Abschnitt über den Schuh und seine bedarfsdeckende und umweltscho­nende Herstellung, und am Ende des One­-Pagers an­ gelangt, sollte man den Seed.One natürlich vorbe­stellen können – ein On­-Demand­-Prinzip, das Kon­sument:innen von Fundraising-­Kampagnen schon bekannt ist, aber dabei besonders auf Nachhaltig­keit zielt.

Den Schuh konnte man über bekannte Bezahlmöglichkeiten in Euro bestellen und erhielt anschließend den FFS­-NFT über ein Metamask-­Wal­let und die NFT­-Plattform OpenSea. Auf diese Weise lassen sich beide Dinge auch separat verkaufen, der physische Schuh einerseits und den NFT mit Zugang zum Garden of Comfort andererseits.

3D-Scans für erste Styleframes

Im nächsten Schritt sammelten die Gestaltenden Moods und Ideen zum Thema Blumen. »Wir haben hier in München einen wunderschönen botanischen Garten, da lag es nahe, sich bei einem Spaziergang inspirieren zu lassen und gleichzeitig den LiDAR­ Scanner am iPad für eine interessante Visualität aus­zuprobieren«, berichtet Auffermann.

Am Ende des Prozesses entstanden erste Styleframes, auch ließ sich das Look­and­feel der Website bereits gut erah­nen – auf dieser Basis wollten die Beteiligten die Ex­perience der Site weiter vorantreiben.

Storytelling: Defeating Sneaker Scripts

Ende September 2021 trafen sich die Teams zu ei­nem gegenseitigen Update auf Zoom wieder. Auf der Agenda standen nicht nur die ausgearbeiteten Wire­frames sowie das Storytelling und die Experience, sondern auch die Entwicklung der knapp 30 digita­len Assets.

Unter anderem war noch immer nicht klar, was man vom Schuh sehen würde. Auch muss­ten die Teams beim Meeting den Start der Kommunikationsmaßnahmen, die NFT­-Erstellung des von Loopinglovers in Berlin geschaffenen Artworks und alle damit verbundenen rechtlichen Schritte koor­dinieren, um dann gemeinsam die nächsten Ent­wicklungsstufen bis zum Website­-Launch und dem Vorverkauf zu planen.

»Wir hatten das Gerüst für eine Roller­Coaster­ Animation entwickelt, die 3D­-Scans aus dem Botani­schen Garten als 3D­-Modelle in Blender importiert, und damit begonnen, eine grobe Experience zu er­ stellen. Zudem stand das Wording für die Erzählung, die wir später als zusätzlichen Sound mit einer künst­lich generierten Stimme produzieren und einbinden wollten«, erklärt Hagen Fiedler.

Parallel hatten die Kreativen mit der Performance­optimierung der mobilen Experience und den Sicher­heitsvorkehrungen gegen Bots noch alle Hände voll zu tun. Diese sogenannten Sneaker Bots oder Snea­ker Scripts sind dafür programmiert und von ihren Anwender:innen entsprechend konfiguriert, beim Release von limitierten Turnschuhen anzuspringen, binnen wenigen Sekunden ein Paar Sneaker in den Warenkorb zu legen und sie zu kaufen.

»Da der Kauf­prozess über die Shopify­-API stattfinden würde, nah­men wir zwei verschiedene Protection-­Plug­ins unter die Lupe. Aufgrund der nahtlosen Integra­tion entschieden wir uns damals für Shop Protector«, erzählt Malte Bender. Außerdem implementierten die Entwickler später noch ein Orderlimit von drei Paar pro Bestellung.

3D-Animation und Shopify-Anbindung

Nachdem sie Feedback und neuen Input zu ihrem Prototyp bekommen hatten, mussten die Kreativen in den letzten Wochen vor dem Launch noch einmal Gas geben und die 3D­-Animation für das Frontend final umsetzen. Die Entwürfe für den Seed.One waren endlich eingetroffen und konnten eingebunden werden, ebenso die feinen Linien, die sich durch die gesamte Experience ziehen.

»Wir wa­ren wirklich erleichtert, als die 3D-­Modelle vom Schuh vorlagen, sodass wir etwas zeigen konnten«, erinnert sich Johannes Auffermann. Die Kreativen integrier­ten die Bilder in die 3D­-Komposition, und die Expe­rience war somit vollständig.

Parallel zum finalen Design liefen die Shopify-­An­bindung sowie die Finalisierung der Text­ und Sound­inhalte. Als Mitte Oktober eine lauffähige Anwen­dung stand, konnte das Team endlich testen und op­timieren und nach einer letzten Feedback­ und Frei­gabeschleife Ende Oktober die Landingpage und den Presale im Shop am 6. November 2021 live stellen. Die Auslieferung der ersten begehrten Sneakers er­ folgte im Juni 2022, zusätzlich erschienen zwei FFS­ Capsule­-Kollektionen, die in der Fangemeinde be­reits ausverkauft sind.

Produktentwicklung: Power to the Community

»An oberster Stelle stehen für uns die Communi­ty und die Kultur, in der wir uns bewegen. Ohne sie gäbe es Flowers for Society in dieser Form nicht. Natürlich wird es in Zukunft weitere Sneaker-­Re­leases, NFT-­Drops und Kollaborationen geben«, so Le Tran. Ihre Mitglieder will FFS auch zukünftig an der Entwicklung und Entstehung weiterer Produkte teilhaben lassen und explizit einbinden.

»Ebenso ist uns die Beziehung zu unseren OGs – also unseren Mitgliedern der ersten Stunde – äußerst wichtig. Un­sere Community auf Discord hat die allererste Kol­laboration mit uns gemeinsam abgestimmt und ist bis jetzt superaktiv in der Beteiligung an neuen Krea­tionen. Da kommen täglich richtig gute Ideen, neuer Input und viel Zuspruch«, sagt Cong Le Tran, dessen Mantra auch in der Zukunft lauten wird: »Power to the Community!«

Weiterführende Links zum Thema

• Für den Zugang zur FFS-Community muss man die Discord-App installiert haben
• »Drop Flowers. Not Bombs«. Wir sprachen mit Cong Le Tran über die Mission von Flowers for Society
• PAGE Story »Interaktives Musikvideo mit WebXR«: Making-of mit Jono Brandel und Three.js-Erfinder mr.doob
• Umfangreiche WebGL-Projekte: PAGE eDossier »WebGL: Making-ofs und Workshops«

Das gesamte Projekt »Flowers for Society« finden Sie in PAGE 9.2022

PDF-Download: PAGE 9.2022

Produkt-Details anzeigen

Demokratie gestalten ++ Werkschau-Brandings ++ ENGLISH SPECIAL Kingdom & Sparrow ++ Ukrainische Kreativszene ++ Typo für komplexe Daten ++ Webdesign: Flowers for Society ++ Social Design: Branding für WashKing ++ Offices für New Work

9,90 €

AGB