Cruyff - Commerce Cloud from design to 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 a lifestyle brand and the originator of Football Luxury. As part of the Premium Inc. group the brand creates high quality, fashionable shoes and clothing with a luxurious look that makes you feel like you’re ‘one ahead’. Next to Cruyff, Premium Inc. also houses other premium sports brands, like Touzani, Robey, Off the Pitch, Meyba, and more, with traction all over the globe. For the ‘Up Social Club’, a foundation which organizes daily activities for mentally challenged people, they designed sneakers with a minimalistic design and made of environmentally friendly materials.

Their goal of international growth with all their brands required a scalable e-commerce platform which offers an out-of-the-box optimized conversion funnel, mobile first functionalities and is ready to be implemented. Salesforce Commerce Cloud was the solution.

Modified Image New
Original Image Old
Salesforce Commerce Cloud
Cruyff chose Gen25 as their partner for this project, from the creative aspects of all the designs to the final result - the tailor made e-commerce website. The objective was to become more of a luxury oriented fashion brand and to create a platform to facilitate international growth. Gen25 was tasked with the design, back-end and front-end development and project management of this project. A fantastic job to sink our teeth in.
Getting started

Basing the design and code on the SFRA template gave us a handle to tackle most of the problems. For other issues a personal touch was needed. For example really looking into the user experience, deciding -together with Premium Inc.- what their customers’ needs are and finding the best ways to cater to them.

With the SFRA template at hand, we could start laying out the blueprint of the website in the wireframes. This is where you can really dive in the functionality of the website, and take our time to make sure it works like their user would expect.

Blueprint
With the SFRA template at hand, we could start laying out the blueprint of the website in the wireframes. This is where you can really dive in the functionality of the website, and take our time with the client to make sure it works like their user would expect.
Modified Image New
Original Image Old
Design choices

To give Cruyff the allure of a luxury brand, we developed a clean and open color palette, to give the webshop a more spacious and soothing tone. The main color of black was found with the help of his legendary jersey number, 14.

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

A new font was also set with the same outcome in mind. Staying true to the tone of the old font, but with a more sophisticated yet friendly type treatment for use throughout the website. Easy-to-read with a touch of personality, to help communicate Cruyff’ brand essence.

Mobile first
As it is with most e-commerce websites nowadays, the majority of Cruyff Classics’ customers tend to shop on a mobile device. For this reason it was absolutely crucial we developed the website with mobile users as the primary persona. Ensuring optimal user experience and -most important- making the user wants to purchase their products.
Desktop cleanliness
With the mobile design set, we created a user interface design for desktop, keeping the same style and tone. By giving the items on the page space to ‘breathe’, the allure of a luxury brand is enhanced and we were able to deliver a product worthy of carrying the name of Johan Cruyff.
Technical architecture
The overall architectural integration involves ACA - the new ERP system, DIVIDE - middleware on top of the ERP system (to transfer the data to & from) and Commerce Cloud. Since Commerce Cloud expects data (catalog, prices, inventory, etc) in a specific format there had to be a system which takes care of the data conversion from DIVIDE middleware. So a new transformation system hosted on the AWS platform was introduced. This application leverages the power of AWS Lambda and takes care of transforming data to and from DIVIDE in the expected format. The data transmission among systems takes place asynchronously with a retry mechanism in case any of the systems are not available at a particular point in time.
Looking forward
Cruyff is part of the Premium Inc portfolio. Going forward three other brand will move to the Salesforce Commerce Cloud platform, for which Gen25 will take on implementation again.

Gen25 has been a very qualified and knowledgeable partner to work with on this project. From project management to design and implementation they delivered a beautiful and high quality website which will help us build the future of our brands.

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!

Thank you for getting in touch

We've sent you a copy of your message and we'll get back to you as soon as possible.

This field is required
This field is required
This field is required
This field is required Please enter a valid email address
This field is required
This field is required