Cruyff - Commerce Cloud van design tot go-live | Gen25
Commerce Cloud UI / UX Design Front- & Backend Development

“Quality without results is pointless.
Results without quality is boring.”

- Johan Cruyff

Cruyff is een lifestylemerk en grondlegger van Football Luxury. Als onderdeel van de Premium Inc. groep creëert het merk hoogwaardige, modieuze schoenen en kleding met een luxueuze uitstraling, die je het gevoel geven dat je al 1-0 voorstaat. Premium Inc. omvat naast Cruyff ook andere sportieve kwaliteitsmerken als Touzani, Robey, Off the Pitch en Meyba, waarmee het wereldwijd vertegenwoordigd is. Voor de ‘Up Social Club’, een stichting die dagbesteding verzorgt voor mensen met een verstandelijke beperking, ontwierp het sneakers met een minimalistisch ontwerp, vervaardigd uit milieuvriendelijke materialen.

De groep streeft naar internationale groei voor alle merken in portefeuille. Vanuit die doelstelling was er behoefte aan een schaalbaar, direct inzetbaar e-commerceplatform met een geoptimaliseerde kant-en-klare conversietrechter en mobile first-functionaliteiten. Salesforce Commerce Cloud was de oplossing.

Modified Image New
Original Image Old
Salesforce Commerce Cloud
Cruyff koos Gen25 als projectpartner voor dit project, van de creatieve aspecten van alle ontwerpen tot het uiteindelijke eindresultaat: een e-commerce website op maat. Daarbij was het doel om een meer luxegeoriënteerd modemerk neer te zetten en een platform te creëren voor het faciliteren van internationale groei. Gen25 mocht het ontwerp, de back-end en front-end ontwikkeling en het projectmanagement van dit project voor zijn rekening nemen. Een mooie opdracht om onze tanden in te zetten.
Het begin

De meeste problemen konden worden opgelost door het ontwerp en de code te baseren op de SFRA-template. Maar er was ook een aantal zaken waarvoor een meer specifieke aanpak nodig was. Bijvoorbeeld een goede analyse van de gebruikerservaring. Samen met Premium Inc. stelden we vast waar hun klanten precies behoefte aan hebben en hoe daar het beste in kan worden voorzien.

Met de SFRA-template als uitgangspunt konden we vervolgens aan de slag met de blauwdruk van de website in wireframes. Dit is de fase waarin je je echt in de functionaliteit van de website kunt verdiepen en de tijd kunt nemen om ervoor te zorgen dat deze ook echt werkt zoals de gebruikers verwachten.

Blauwdruk
Met de SFRA template als basis, konden we beginnen met het opmaken van de blauwdruk van de website in wireframes. Hier is het echt mogelijk om de functionaliteit van de website in te duiken en tijd met de klant te nemen om ervoor te zorgen dat deze werkt zoals de gebruiker zou verwachten.
Modified Image New
Original Image Old
Ontwerpkeuzes

Om Cruyff de allure van een luxemerk te geven, stelden we een zuiver, open kleurenpalet samen, om de webshop een meer ruimtelijke, rustige uitstraling te geven. De hoofdkleur zwart werd afgeleid van Cruyffs legendarische rugnummer 14.

Primary Black
#141414
Background White
#FFFFFF
Main Gray
#E8E8E8
Accent Cruyff Orange
#FF4100
Secundary Gray
#F8F8F8

Met dezelfde uitgangspunten in gedachten werd ook een nieuw lettertype gekozen. Dit nieuwe lettertype heeft dezelfde toon als het oude, maar met een meer geraffineerde en tegelijk vriendelijke uitstraling, voor gebruik op de hele website. Duidelijk leesbaar, maar met een tikje karakter, als afspiegeling van de essentie van het Cruyff merk.

Mobile first
Net als de meeste webshops van tegenwoordig, wordt de webshop van Cruyff Classics vooral bezocht door klanten die surfen met een mobiel apparaat. Daarom was het van essentieel belang dat we de website ontwikkelden met mobiele gebruikers als belangrijkste doelgroep. Op die manier zorgen we voor een optimale gebruikerservaring en - het allerbelangrijkste - dat de gebruiker de aangeboden producten ook wil kopen.
Zuivere vormgeving voor desktop
Toen het mobiele ontwerp een feit was, ontwikkelden we ook een gebruikersinterface voor desktop, met dezelfde stijl en toon. Door te zorgen voor ‘ademruimte’ tussen de items op de pagina, werd de luxe-uitstraling van het merk versterkt en konden we een eindresultaat leveren dat de naam Johan Cruyff waardig is.
Technische architectuur
De algehele architecturele integratie omvat ACA - het nieuwe ERP-systeem, DIVIDE-middleware bovenop het ERP-systeem (voor de uitwisseling van data) en Commerce Cloud. Aangezien Commerce Cloud data (catalogus, prijzen, voorraad, etc.) in een specifiek formaat vereist, was er een systeem nodig voor het omzetten van de gegevens vanuit de DIVIDE-middleware. Voor dit doel werd een nieuw op AWS gehost transformatiesysteem geïntroduceerd. Deze applicatie zorgt ervoor dat de via DIVIDE uitgewisselde gegevens in het vereiste formaat worden omgezet. De omzetting van data tussen systemen gebeurt asynchroon met een mechanisme voor opnieuw proberen in geval één of meerdere systemen op een specifiek tijdstip niet beschikbaar zijn.
De toekomst
Cruyff maakt deel uit van de Premium Inc portefeuille. In de toekomst zullen nog drie merken overgaan op het Salesforce Commerce Cloud platform. Ook hier zal de implementatie door Gen25 worden verzorgd.

Gen25 heeft zich bij dit project een deskundige partner getoond met veel kennis van zaken. Het hele project, van projectbeheer tot ontwerp en implementatie, is uitstekend verlopen, resulterend in een prachtige, kwalitatief hoogwaardige website, die als basis kan dienen voor de toekomstige ontwikkeling van onze merken.

Rogier Anink - Product Owner E-commerce bij Premium Inc. / Cruyff Classics
Find out what we can do for you!

Want to find out how this would work for your business?
Leave your details below and we will get back to you as soon as possible!

Bedankt voor uw bericht

Wij nemen zo snel mogelijk contact met u op

This field is required
This field is required
Dit veld is verplicht
Dit veld is verplicht Gelieve een geldig e-mailadres in te vullen
This field is required
Dit veld is verplicht