Valspar's Atomic Design Pattern Library


At the time of the project, Valspar was a 200+ year-old international giant which possessed more than 70 sites between different subsidiaries and child-brands spread across 25 different countries and with more than 11,000 employees. Slalom had just sold them Sitecore as their main CMS, which Valspar wanted to leverage in every one of its sites, and use to normalize site offerings by creating a cohesive cross-brand experience. In order to do this, Slalom also sold them on a customized pattern library they could seamlessly apply to all of their brands, ensuring universal site-wide consistency and smart, structured re-use.


Knowing my past experience with pattern libraries, Slalom entrusted me with leading the design for the project. I started with some research to brush up on the subject and see what had changed since last I’d touched upon it. I decided on applying the concept of “atomic design” which is a metaphor coined by developer Brad Frost to explain modular design. Once the client was on board, I began auditing all of the sites and coordinating with the lead developer a gradual build for a live pattern library which was to be our main final deliverable, a working tool for Valspar’s technical team. We iterated on this and built a fully operating, flexible and customizable, brand-agnostic, component library within the deadline the account team had promised.


The customer was very pleased with the end-result, which, not only came in on time and within budget, but also ran the extra mile in virtually every one of the parameters outlined when we were entrusted with the project. Unfortunately, however, Sherwin-Williams acquired Valspar the very same week our deadline was due, and the library was shelved indefinitely whilst the fate of the Valspar brand was decided. We never did see it at work even though many of the sites which were audited are still live today. It was a great learning experience for me. Not only did it help me brush up on latest best-practices, but it came in quite handy when it came time to build the Polaris Pattern Library.

Atomic Design Pattern Library
(single UX resource: research + strategy + execution)

(via Slalom Consulting)


behind the scenes

Although the final deliverable for this was a working, live-code pattern library, much work was done beforehand to identify core patterns and establish the hierarchy of re-use, nesting etc. Here’s a sneak peak of what went down.

People at Slalom said

  • Good design relies on, and is shaped by experience. Alfonso has experience in spades; which comes in quite handy. He is equally adept designing a product, as he is with his team at a whiteboard or leading a client meeting. During my time working with Alfonso he was not only a great teammate and collaborator, but also part sage. Alfonso positively influenced our work and client relationships, but also my way of thinking. You can't ask for anything more than that.

    Josh Thompson Experience Strategy, Slalom Consulting
foxor5Alfonso’s Portfolio: Valspar Atomic Design Pattern Library