The Short Story

Challenge
Enhance Xtra toolkit's security and user experience for Colruyt Group.

Solution
Make the security watertight, while optimising UX, accessibility, and visual consistency.

Approach
Implement an ingenious design system to cater to the various brands, refine UX flows, and prioritise inclusivity.

Outcome
A fortified, user-friendly Xtra toolkit, offering seamless access to Colruyt Group's services with enhanced safety and satisfaction.

‍

Colruyt Group, a famous Belgian retail company, has a lot of different brands in their ecosystem. Naturally, these brands also have a digital presence to maintain. As you navigate through Colruyt Group’s retail landscape, a question pops up: do you really need separate profiles for each store’s website to access their services? Well, you don’t - all thanks to the ingenious Xtra toolkit. And we’re proud to be part of that story.

The Challenge

Xtra is your all-in-one customer profile for the various stores under the Colruyt Group umbrella. With Xtra, you can easily manage your customer data, including vouchers, payments, and loyalty programs, streamlining your experience across the Colruyt Group. Basically, the Xtra login is your key to effortless access on all Colruyt Group websites.

But, here’s the twist: the earlier version of the Xtra toolkit had a slightly different appearance in some of Colruyt's stores. Beyond that, the Colruyt team was on a mission to provide an unrivalled user experience while ensuring best-in-class privacy and security for their customers. Naturally, that got our fingers itching to go to work.

The Solution

Our first priority was to make Xtra up to terms with the highest security and privacy standards. Not only for now, but for many years to come. After a thorough analysis, together with the people from Colruyt Group, we spotted possible improvements and incrementally applied them to the Toolkit, one by one. First mission accomplished: the Xtra toolkit became industry-standard safe and secure for each and every user. 

A sturdy Toolkit needs a fitting face and a seamless user experience, of course. So, while delving into the Xtra Toolkit, we gradually started improving the allround consistency, user flows and even imported necessary accessibility features into it. Addressing these areas significantly enhanced the overall user experience. Not only making the Xtra crew happy but also putting a smile on the users’ faces. 

The Approach

So how did we go about it? Mainly, we worked on 2 major aspects to improve the customer’s experience.

Setting up a design system 

Amidst Colruyt Group's diverse services, each with its own brand colours (like orange for Colruyt, blue for Dreamland, and green for DATS...), our team collaborated with Colruyt's designers to create a smart design system. This system allows us to set up core components that adapt to each subbrand’s look and feel, without having to design & code every single button or menu for every different brand in the Colruyt Group. This way, we save time and effort on repetitive tasks and guarantee brand consistency all over the various websites. Pretty neat, right?

Improving UX flows and accessibility 

With minor tweaks in the user flows, we significantly enhanced the user experience of Xtra. Moreover, by making the platform usable for voice assistance and providing the option to use different font sizes, it is now much more accessible to people with (temporary) limitations. Kudos to Colruyt for considering the accessibility of their platform for all their customers.

Technical choices

Some of our technical decisions were heavily influenced by our goal, much like Colruyt, to deliver an exceptional user experience. To achieve this, we chose Remix as our framework for its high interactivity. By sticking to the web standards, Remix enables automatic data updates on form submissions without requiring page refreshes or additional development time. This allowed our development team to dedicate more time to focus on elements like pending and optimistic UI, making the user experience even better.

‍

‍

Thanks to sticking to the web standards, Remix also excels in progressive enhancement, enabling interaction with the website as soon as HTML and CSS are loaded and parsed. This feature offers the added advantage of maintaining functionality even if JavaScript is disabled or absent, or if there are issues with external scripts like analytics or monitoring tools. This means that users can interact with the web application even if they have a slow internet connection, are using an older device or even if ISPs or corporate firewalls block certain aspects of the application. These performance improvements are another reason why we’re big fans of this framework.

The Outcome

Our collaboration with Colruyt Group successfully transformed the Xtra toolkit. Prioritising security, we elevated it to industry standards, ensuring a safe experience. The design system unified brand visuals, saving time and ensuring consistency. Improved user flows and accessibility features enhanced overall user experience. 

Technical choices, including the use of Remix, optimised interactivity and adhered to web standards. The result: a streamlined, secure, and user-friendly Xtra toolkit, reflecting Colruyt Group's commitment to an exceptional customer experience.