Rexel Style Guide — James Wash

As with most UX teams, early in our team's journey we were short on time and resources. The team was small and extremely busy collaborating with users, product teams, and dev teams. As we began to scale our team, we knew maintaining consistency would be a challenge. In order to meet the challenge of time and consistency, we knew one of our first steps in maturing the team would involve creating a design system.

This is a very normal initial step in evolving a team early on, but the circumstances we faced were far from normal. Upon my arrival to Rexel, the company was in the initial stages of migrating to a new platform. What made this circumstance unique was the amount of sites and brands involved in the migration. Due to Rexel's global presence, the company has over 50 different brands and sites in its network.

So where does a small UX team begin with so many different brands preparing to migrate to a single platform?

We began by taking a visual inventory of the first 10 brands prioritized for migration. Some brands and countries had existing documentation to pull from, but many did not. For those who didn't we either color matched digital marketing materials or dug through css to identify hex codes.

After taking inventory, we then identified color patterns and gradients. We discovered the use of 59 different blues and grays. Through this analysis, we extracted a secondary color palette that would work with Rexel's global palette and also compliment each brand's unique colors.

In the example above, one of Rexel's brands, Storel, was able to use nearly all of Rexel's brand colors while retaining a few colors unique to their brand. By absorbing some of Rexel's brand colors and using a complementary secondary palette, we reduced the number of custom css needed for this brand. This adds up when eventually migrating over 10 brands into a single code base. It also facilitates a visual design governance that require far less overhead.