lfonso morenoValspar's Atomic Design Pattern Library
Challenge
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.
Approach
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.
Results
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.
WHAT
Atomic Design Pattern Library
(single UX resource: research + strategy + execution)
WHO
Valspar
(via Slalom Consulting)
WHEN
2016
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.
