Elevating the Xtra Toolkit into a safe and seamless web experience
After working intensively with Colruyt Group for several years on the Xtra project, In The Pocket enhanced the Xtra toolkit, a customer profile system for their stores. Ensuring future-proof security and privacy measurements and improving user experience and accessibility, they created a seamless, secure, and visually consistent web platform. The revamped Xtra toolkit now offers customers an effortless way to access Colruyt Group's diverse commercial services with a single login.
The Short Story
Enhance Xtra toolkit's security and user experience for Colruyt Group.
Make the security watertight, while optimising UX, accessibility, and visual consistency.
Implement an ingenious design system to cater to the various brands, refine UX flows, and prioritise inclusivity.
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.
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.
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.
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.
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.
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.