Het bouwen van een moderne winkelervaring voor C&A

De samenwerking tussen C&A en DEPT® begon medio 2020. In eerste instantie kregen we de taak om de front-end van de vorige webwinkel te onderhouden en verder te ontwikkelen. Het monolithische e-commerce platform waarop het was gebouwd, beperkte helaas de digitale groei van de retailer. In de huidige digitale wereld waar gebruikersverwachtingen, trends, technologie en andere marktfactoren in hoog tempo veranderen, is een flexibel en schaalbaar systeem essentieel voor bedrijven die proactief willen handelen in plaats van reageren.

Voor een naadloze winkelervaring had C&A een digitaal platform nodig dat als centraal contactpunt fungeert en de customer journey via alle kanalen ondersteunt. De retailer had al een innovatief architectuur concept ontwikkeld en was van plan om over te stappen naar een headless microservice-architectuur met edge-hosted SPA-frontend. Samen met de interne teams van C&A, heeft DEPT®:

• een agile productstrategie en roadmap ontwikkeld;
• een productoverstijgend design systeem opgezet;
• nieuwe front- en backend componenten ontwikkeld;
• een nieuwe, moderne technische architectuur geïmplementeerd.

DEPT® werkte samen met het product- en UX-team van C&A om een middellange termijn productstrategie te ontwikkelen voor de nieuwe online winkel, die aansluit bij de digitale strategie van C&A en de overkoepelende bedrijfs- en merkstrategie.

We zijn gestart met het ontwikkelen van customer value propositions voor de doelgroepen van de webwinkel, gebaseerd op data. Vervolgens hebben we een ambitieuze Webshop Vision Statement 2024 uitgetekend als overkoepelend doel voor het productteam. Samen met C&A stelden we strategische mijlpalen en bijbehorende KPI’s vast. Zodoende werd het succes van de webshop continu gemeten en waren de belangrijkste resultaten op elk moment in te zien voor de belangrijkste stakeholders.

Vanaf begin af aan heeft DEPT® een brede samenwerking gestimuleerd door contact te zoeken met verschillende belanghebbenden bij C&A – van merk- en marketingteams tot IT- en onderzoeksafdelingen. Dit vormde een belangrijke basis voor het succes van het project, omdat hiermee een gemeenschappelijk overeenstemming ontstond over het vertalen van de merkdoelen en waardeproposities.
Door middel van gezamenlijke brainstorms en werksessies kwamen mogelijke oplossingen tot stand op basis van consumenteninzichten. De oplossingen werden getest met interactieve prototypen.
Om in de toekomst op routinebasis ideeën te blijven genereren voor bijvoorbeeld nieuwe functies en diensten binnen de webshop, werd de samenwerking tussen het user research team van C&A en de productmanagers geïntegreerd en geïntensiveerd – een nieuwe, gebundelde kracht die zorgt voor innovatie en een hogere gebruiksvriendelijkheid.

De door C&A bedachte technische oplossing werd samen met DEPT® verder uitgewerkt en geïmplementeerd met een ​​microservice-benadering. Deze schaalbare en flexibele infrastructuur zorgt voor optimale time-to-marketprestaties en maakt het mogelijk om gepersonaliseerde aanbiedingen, content en diensten aan de gebruikers te leveren. Tegelijkertijd kan de oplossing naadloos meegroeien met toekomstige eisen.

Vanwege de complexiteit van het project en volledige vernieuwing van de architectuur, is de ontwikkeling van de nieuwe webwinkel in verschillende fasen opgedeeld. Fase 1 omvatte enerzijds de herontwikkeling van de frontend van de shop, van de customer journey tot aan de winkelwagen, anderzijds de introductie van een nieuwe backend. Beide componenten worden “on the edge” gehost op een krachtige en schaalbare serverloze infrastructuur van Cloudflare. Het genereren en leveren van content aan gebruikers gebeurt via een wereldwijd CDN (Content Delivery Network), met duizenden knooppunten.

Een nieuw, modern headless CMS werd de centrale tool voor contentmanagement via meerdere kanalen, zoals de online winkel en de C&A-app. Omdat de draaiende motor achter de backend en commerce omgeving in fase 1 ongewijzigd bleef, werden in samenwerking met softwarebedrijf novomind interfaces naar het oude systeem gemaakt op basis van GraphQL. Dit zorgde voor een parallelle werking van oude en nieuwe technologie en voert bovendien doorlopende A/B-tests uit op 10% van de gebruikers. De koppeling van deze API’s en alle andere third party systemen zoals Reco-Engine, PIM, etc. vindt plaats via een nieuw ontwikkelde gateway, die de gegevens in geconsolideerde vorm aan de frontend levert; een moderne en hybride gerenderde (zowel op de server als in de browser) single-page applicatie op basis van ReactJS.

Het hele customer journey tot aan het afrekenen is opnieuw ontworpen. Een uitgebreide set van content modules biedt ruimte voor inspirerende, frisse en moderne inhoud. Grote afbeeldingen en sterke portretten in combinatie met close-up beelden roepen emotie op, terwijl opvallende typografie de relevante inhoud voor de gebruiker laat zien.

De header is minimalistischer en duidelijker; er is een nieuw navigatieconcept voor zowel de mobiele en de desktopversie. De nieuwe productoverzichten zijn beter in balans, bieden een prettig overzicht en ondersteunen de gebruiker om een ​​weloverwogen aankoopbeslissing te maken.

Met intuïtieve labels en een focus op duurzaamheid worden de merkbelofte en een goede prijs-kwaliteitverhouding gecommuniceerd. Een gebruiksvriendelijke filter geeft klanten de belangrijkste opties direct binnen handbereik. De producten op de detailpagina hebben nu een nieuwe indeling, met een duidelijker koopvenster en geïntegreerd advies over de maat, waardoor de moderne look en feel van het nieuwe platform wordt benadrukt.

Het nieuwe design systeem van C&A is helemaal vanaf nul opgebouwd en is een levend digitaal ecosysteem dat groeit en verandert in symbiose met de e-commerce-producten. Als de nieuwe ‘single source of truth’ voor een gemeenschappelijke digitale taal stelt het teams in staat om een ​​consistente gebruikerservaring te creëren. Dit verhoogt de efficiëntie en versterkt de samenwerking tussen verschillende functies, dat geldt ook voor externe partners. Ons product design team werkte nauw samen met de klant om heldere richtlijnen te definiëren, zoals de basisprincipes van de digitale doorvertaling van het merk en bijbehorende contentprincipes. De fundamenten specifiek voor deze webshop, componenten en user experience-patronen zijn allemaal voorzien van richtlijnen om de best mogelijke en meest consistente ervaring te bieden.