Putting Atomic Design into Practice on Code42​.com
May 31st | 2017

If you’ve been paying attention to the world of design lately, you’ve likely heard designers and developers discuss the issue of systems design.

It’s a bit of a hot topic right now — and for good reason. As more of our lives are lived digitally, designers have to learn to build complex interfaces that age well. That’s why companies like Airbnb , Salesforce and Etsy are investing heavily in building thoughtful design systems, and why there’s a lot of thinking out there right now on the importance of designing systems for participation. One of the frameworks we love for this kind of work is called Atomic Design, from web designer Brad Frost.

Atomic Design was born from the idea that interfaces aren't built out of pages or screens – that they’re built out of components with varying degrees of complexity. In searching for a way to think about these components more methodically, Brad turned to the world of chemistry:

“The thought is that all matter (whether solid, liquid, gas, simple, complex, etc.) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.”

Distilling design elements into varying levels of complexity creates a foundation for how to think about designing systems, from the smallest component to the most robust interface.

Atomic Design structure, icons by Brad Frost.

Putting atomic design to work for Code42

When Minneapolis-based Code42 needed a new website, our friends at Straight Line Theory brought us in to help translate their site strategy into design. With a customer list nearly 40,000 strong, Code42 is a major player in the endpoint data protection and security industry. You may not have heard of them, but they provide backup software for a lot of companies you have heard of (Adobe, Square, Patagonia and Samsung to name a few).

As successful as Code42 is, their industry changes so rapidly that they have to adapt their communications on a monthly (or sometimes weekly!) basis. Their previous site and CMS were preventing them from being as nimble as they needed to. Since we’d recently solved a similar problem for ourselves by redesigning our own site and CMS, we saw their situation as an opportunity to take our approach even further and to put Atomic Design into practice.

Pairing Atomic Design with a familiar approach

A module-based site made the most sense to support Code42’s ever-changing content needs. We’d created similar solutions for cheerios.com, purina.com, and zeusjones.com, and were confident it would help alleviate their team’s frustrations.

This modular approach to web design (also referred to as layer-cake ) builds pages using stackable, repeatable content blocks (or modules), rather than using fixed elements that can’t be restructured or easily edited.

We worked closely with Straight Line Theory to translate their wireframes into a library of modules that would support the new Code42.com strategy. Once we had a rough idea of the site’s content needs, we distilled those modules into a series of inputs. Working closely with Code42’s development team, we made sure each of these inputs could connect to the CMS they were building.

Breaking the wireframes down into individual modules with their respective inputs

To give our work for Code42 a longer lifespan, we knew we’d also need to create some kind of design system that they could use to guide the creation of new modules in the future. And that’s where Atomic Design came in.

Bringing Atomic Design into our process

Code42 had recently gone through a brand refresh with Little, but the new brand language they’d developed hadn’t yet been applied to digital. To get a handle on what felt right, we took two key pages — the home page and a feature page — and began to explore how Code42’s new brand elements would work on the web.

Early design directions for code42.com

Even though we were using Atomic Design, it was important to treat the methodology as a framework rather than as a design process. Atomic Design is great way to think about the complexities of interfaces, but it doesn’t provide much of an opportunity to make those interfaces inspiring. Treating it solely as a linear process can result in experiences that are functional and utilitarian, an outcome that wasn’t right for Code42.com, which needed to inspire users and, ultimately, bring in sales.

We continued to play with various elements and layouts to see what felt right, stretching and breaking the wireframes to explore different approaches to the modules. We continuously evaluated our designs through the lens of Atomic Design, which forced us to think through the various levels of complexity we were creating.

Once we had a design direction that both we and the team at Code42 felt good about, we applied it to our evolving module library. To do it, we broke the design elements down into their various levels of atomic hierarchy and made sure each one functioned for every module’s needs.

Code42.com Atomic Design Structure

Using Invision worked great for reviewing overall design directions with the team, but we knew we needed to move into code as quickly as possible. Design doesn’t end with a Sketch file, and hundreds of design decisions needed to be made in code to bring it all to life. So throughout the design process we were writing the code for how all of the modules would behave.

By reviewing all of our modules in live code we could interact with the real thing as we designed, including each module’s own responsive behaviors, variations and flexibilities. That way, we could answer any questions around how certain modules would behave just by playing with them in a browser window.

Working closely with Code42’s developers meant that our code was easily implemented with their CMS and any issues could be dealt with right away. Their team was super collaborative, so we were able to work together to create the best possible product. We can’t overstate what an amazing group they’ve got, and how smoothly the process went.

By the end of it all, we wound up with a flexible library of modules for any page. That means new pages can be built with just a few clicks, and Code42 can respond to industry changes immediately.

Using Atomic Design to future-proof the site

As robust and flexible as the modules were, we knew that eventually new types of content would come into the site that we couldn’t have accounted for. At a certain point, revisions would need to be made to the modules and we had to ensure that our designs would hold up when new ones were created or when existing ones were changed.

By using the Atomic framework, we’d created a design system that was easy to break down into atoms and molecules, making it easy to explain to future creators. To help with this, we built a style guide page where every element is laid out and annotated so that anyone working on the site has all the tools they need to build something new.

It was a big task to pay off Code42’s new site strategy, support their constantly-changing communication efforts, and apply their new brand language to the web in way that felt right. But, in the end, looking at the micro level to inform the macro ensured that we built their site right – down to every last atom.

Now we’re using Atomic Design to tackle even more complex problems. By bringing this new methodology into our process, we’re continuing to close the gap between design and the end product.