Moderne Shopping Experience dank umfangreicher Neuausrichtung

Die Zusammenarbeit von C&A und DEPT® begann Mitte 2020. Initial wurden wir damit beauftragt, die Frontend-Maintenance des bisherigen Online-Shops zu übernehmen und diesen weiterzuentwickeln.

Die monolithische E-Commerce-Plattform schränkte das digitale Wachstum aber leider ein – und stand so im Widerspruch zu den Unternehmenszielen. Denn in einer digitalen Welt, in der sich die Erwartungen der Nutzer:innen, die Technologien, der Markt und die Gesellschaft so schnell verändern, ist ein flexibles und in allen Bereichen skalierbares System ein Schlüsselfaktor für Unternehmen, um nicht nur reagieren, sondern auch agieren zu können.

C&A hatte bereits ein innovatives Architekturkonzept erarbeitet, mit dem Ziel, die Legacy IT-Plattform durch eine edgebasierte Headless-Microservice Architektur mit SPA-Frontend abzulösen.

Die neue Customer-Experience-Plattform soll neben einer Grunderneuerung der Architektur auch als zentraler digitaler Touchpoint die Omnichannel Consumer Journeys unterstützen, eine nahtlose Shopping Experience gewährleisten und C&A als moderne Brand positionieren.

Die Erarbeitung einer agilen Produktstrategie und Roadmap, den Aufbau eines produktübergreifenden Design-Systems und die Entwicklung von neuen Front- und Backend-Komponenten, sowie einer grundlegend neuen, technisch modernen Architektur übernahm DEPT® in enger und partnerschaftlicher Kooperation mit C&As spezialisierten Teams.

Um den gewünschten Fokus in der Weiterentwicklung des Online-Shops zu gewährleisten und Ziele der C&A Digitalstrategie sowie der übergreifenden Business- und Markenstrategie effektiv zu verfolgen, erarbeitete DEPT® gemeinsam mit C&As Produkt- und UX-Team eine mittelfristig angelegte, agile Produktstrategie für den neuen Online-Shop.

Wir entwickelten zunächst datenbasierte Customer Value Propositions für die Zielgruppen des Online-Shops. Darauf basierend wurde ein ambitioniertes Webshop Vision Statement 2024 als Nordstern für das Produktteam formuliert. Gemeinsam mit C&A steckten wir strategische Etappenziele und definierten damit verbundene Key Results. Der Erfolg des Online-Shops ist so fortlaufend messbar und kann jederzeit sichtbar gemacht werden. Um die Strategie darüber hinaus weiter greifbar zu machen, wurden Initiativen als neue Ebene in der Produktplanung eingeführt, welche fortan regelmäßig aus Consumer Insights (Jobs-to-be-done) gespeist werden – und somit als kontinuierlicher Innovationsmotor für eine problembasierte Produkt- und Service-Entwicklung des Online-Shops funktionieren. Um die Online-Shop-Strategie zum Leben zu erwecken, wurde anschließend ein agiler Flow of Work aufgesetzt, der unmittelbar in eine dynamische, strategische Product-Discovery und Roadmap mündet. Da sich Erwartungen und Impulse rund um digitale Produkte heutzutage in Windeseile ändern, wird die Online-Shop-Strategie als „Living Strategy” gehandhabt und in Zukunft in regelmäßigen Alignments strategisch überprüft.

Von Anfang an wurde seitens DEPT® eine breite Zusammenarbeit mit diversen Stakeholdern bei C&A herbeigeführt – von Brand & Marketing über IT bis hin zu Research: Eine wichtige Grundlage für den Projekterfolg, denn so wurde frühzeitig ein gemeinsames Verständnis dafür entwickelt, wie Brand Purpose und Brand Value Propositions digital übersetzt werden können. Mögliche Lösungen auf Basis von Consumer Insights wurden mithilfe kollaborativer Ideation und Co-Creation Sessions erarbeitet und die Ergebnisse mittels interaktiver Prototypen getestet. Um künftig routiniert Ideen für neue Funktionen und Dienstleistungen zu generieren, wurde die Zusammenarbeit zwischen dem C&A User Research Team und dem Product Management integriert und intensiviert – eine neue Powerforce, die ab sofort den Online-Shop nicht nur nutzerzentriert weiterentwickeln, sondern auch innovativer gestalten wird.

Die von C&A in ihren Grundzügen erdachte und zusammen mit DEPT® weiter ausgearbeitete und implementierte technische Lösung: ein Microservice-Ansatz. Diese skalierbare und flexible Infrastruktur ermöglicht u.a. eine optimale Time-to-Market-Performance. Mit dieser Lösung können den Nutzer:innen personalisierte Angebote, Inhalte und Services geliefert werden; gleichzeitig kann die Lösung nahtlos mit den künftigen Anforderungen wachsen.

Aufgrund der Komplexität des Projekts und der damit einhergehenden kompletten Erneuerung der Architektur wurde die Entwicklung des neuen Online-Shops in mehrere Stufen aufgeteilt. Stufe 1 sah die Neuentwicklung des Shop-Frontends für die Customer Journey bis zum Warenkorb, sowie das Einführen eines neuen Backends für das zu entwickelnde Shop Frontend vor. Beide Bestandteile werden auf einer hochperformanten und skalierbaren serverless Infrastruktur von Cloudflare „on the edge” gehostet. Die Generierung und Auslieferung der Inhalte an Nutzer:innen erfolgt dann über ein weltweites CDN (Content Delivery Network) mit Tausenden von Knotenpunkten.

Ein neues, modernes Headless CMS wird zentrales Tool der Inhaltspflege über mehrere Channels – beispielsweise Online-Shop und C&A App – hinweg. Weil das Backend und die Commerce Engine in Stufe 1 noch unverändert bleiben, wurden in Zusammenarbeit mit dem Hamburger Software-Unternehmen novomind Schnittstellen zum Legacy System auf Basis von GraphQL entwickelt. Sie ermöglichen den Parallelbetrieb von alter und neuer Technologie – und darüber hinaus den Livegang in Form eines A/B-Tests im ersten Schritt für nur 10 % der Nutzer:innen. Die Anbindung dieser APIs und aller weiteren Drittsysteme wie Reco-Engine, PIM, etc. erfolgt durch ein neu entwickeltes Gateway, das die Daten in konsolidierter Form dem Frontend – einer modernen und serverside gerenderten Single Page Application auf Basis von React – zur Verfügung stellt

Die gesamte User Journey bis zum Checkout wurde neu konzipiert. Ein umfassendes Set an Content-Modulen bietet Raum für fesselnde, inspirierende Inhalte, die Frische und Modernität verkörpern. Großflächige Bilder und starke Porträts, kombiniert mit Nahaufnahmen, schaffen eine emotionale Bindung, während plakative Typografie nutzerrelevante Inhalte prägnant auf den Punkt bringt. Der Header wurde cleaner und übersichtlicher gestaltet; sowohl mobil als auch in der Desktop-Version gibt es ein neues Navigationskonzept. Neue, ausgewogenere Product Listings bieten einen besseren Überblick und helfen, eine fundierte Kaufentscheidung zu treffen. Verständliche Labels und ein Fokus auf Nachhaltigkeit & Sale kommunizieren das Markenversprechen und das gute Preis-Leistungs-Verhältnis. Ein nutzerfreundlicher Filter gibt den Kund:innen die wichtigsten Optionen direkt an die Hand. Dank selbstbewusster Präsentation der Produkte auf der Detailseite – durch eine neue Anordnung, eine übersichtlichere Buybox und eine integrierte Größenberatung – wird das moderne Look & Feel der Plattform unterstrichen.

Das von Grund auf neu entwickelte C&A Design System ist ein lebendiges digitales Ökosystem, das in Symbiose mit den E-Com-Produkten wächst und sich verändert. Es ermöglicht den Teams, eine konsistente Experience für die Nutzer:innen zu entwickeln, als die neue Single Source of Truth für eine gemeinsame digitale Sprache. Dies erhöht die Effizienz und stärkt die funktionsübergreifende Zusammenarbeit – auch für externe Partner. In einem kollaborativen Ansatz hat unser Product Design Team in enger Zusammenarbeit mit dem Kunden die übergeordneten Leitlinien wie Digital Branding Basics und Content Principles entwickelt und definiert. Shopspezifische Foundations, Components und UX Patterns sind mit Richtlinien und zahlreichen Best Practices versehen, um die bestmögliche Orientierung und Guidance zu bieten: Für eine einheitliche Experience.

Gemeinsam mit DEPT® geht C&A einen Schritt in Richtung Web3 mit einer weihnachtlichen AR Aktion am POS.
In ausgewählten C&A Stores konnten sich Kund:innen auf eine digitale Weihnachts-Schatzsuche begeben. Durch das Scannen von QR Codes auf Bodenstickern wurde die Weihnachts-Schatzsuche mithilfe der Image Tracking Funktion gestartet. Canda, der durch DEPT® in 3D animierte C&A Weihnachtswichtel, erschien als AR Erweiterung auf den Smartphone Bildschirmen und forderte zur Schatzsuche auf. Mit Hilfe der Bodensticker führte die AR Animation die Kund:innen quer durch die Stores, um verschiedene Gutscheine für den POS und Online Einkauf, sowie ein Reisegewinnspiel zu entdecken. Das Erscheinen des Wichtels, das Hervorholen der Geschenke inkl. Gutscheinkarte und der damit verbundene Dancemove wurde individuell für die C&A Weihnachts-Schatzsuche in 3D designed.

Entdecken Sie die erfolgreiche C&A AR-Frühlingskampagne, die nahtlos an den Erfolg der AR-Weihnachtskampagne anknüpft. Wir haben den Frühling in die Stores gebracht und unseren Kund:innen eine interaktive Experience geboten. Mit dem C&A Frühlingsfilter konnten sie ihre Umgebung oder sich selbst per Selfie-Kamera mit animierten Schmetterlingen und Blumen verschönern. Zudem wurden Kund:innen mit Rabatten und Sofortgewinnen belohnt. Diese farbenfrohe Kampagne wurde sowohl am POS als auch im C&A Ecom Store integriert, um den Verkauf anzukurbeln. Als Ergebnis konnte eine beeindruckende Steigerung der App-Downloads um 400% während des Aktionszeitraums verzeichnet werden. Erfahren Sie mehr über AR Maßnahmen und wie sie diese gezielt zur Steigerung Ihrer KPI’s nutzen können.