Applying atomic design principles to content design
A lot of my clients are talking about ‘scaleable’ systems. This is often a development term, used to describe a way a system can grow depending on traffic or workload that is required of it. It’s also used to describe:
Being able to scale work, systems and processes up and down without compromising on quality is a pretty handy. But it’s more than just a development term; a scalable approach is an age-old tool for user centred designers.
I love this concept because it lends itself so beautifully to what we do and supports stronger, more consistent designs. And if experience has taught me anything, its that consistency breeds familiarity; and familiarity nurtures trust from your users.
Atomic design is one method used to create scalable design. Of all the UCD disciplines, atomic design is principally used in UI design. It’s a simple concept, mirroring chemical equations from the structures of life itself. You start with the smallest thing (atoms), then two or more of those atoms join together in a certain way to create molecules, which are entirely different from the individual atoms that created them. These molecules then scale up again into something bigger and more complex, but fundamentally, everything has been designed from the same simple atomic building blocks.
When I’ve previously worked on design systems, we started with the most basic element needed to design a webpage. If we could not break that ‘thing’ down any further, we deemed it an ‘atom’.
Things like fonts, spacing, grids, colours and voice* were considered the ‘atoms’; they had their own rules, their own guides and styles and could not be broken down any further. Once these were set, they formed the basic building blocks for every page on a site. Working in this way meant we had total control over things like accessibility, interaction and of course, look and feel.
Then, you have atoms like radio buttons. Its look, feel, interaction and behaviour are unique. But when you add label text, it becomes something slightly different. Then, when you add a header, it morphs again into something that now has a more specific function and purpose.
When creating these patterns, it became obvious that the more complicated the organism (or ‘patterns’), the more rules and stipulations were required, specifically around the content.
As I was working with a large organisation, the ‘voice’ of the company had already been set. Again, this provided the fundamental guidelines on how we should write. However, as more and more unique patterns were created, we started to see discrepancies in the way content was written. That’s when I began developing the content design guidance of the design system, from the molecular level up.
Working with the interaction designer, we designed, tested and developed every single pattern. It seemed sensible to being user research with the patterns and not at the atom level, because:
Patterns were things like date of birth entry fields, name fields or adding addresses. Each defined pattern had a single purpose. They comprise atoms like defined headers, hint text, input fields and labels.
These patterns had defined content, which was completely fit for the single purpose of the pattern. If the purpose of the pattern evolved or morphed in certain instances, we then looked at the wider user cases and the potential to create a band new pattern. This meant that, throughout the entire site, the address input pattern would always remain the same, no matter which team in the organisation was designing it.
This isn’t new stuff. Scaleable designs and design systems have been around for a while. But after a decade of working with words and tech, I can tell you that content often comes last. It’s the little brother to UI and is often overlooked (or not invited at all) to the ‘big table’. So by embedding content design principles into the very foundations of design systems, it protects the often under-appreciated discipline of content design and ultimately, creates a much more user focused starting point for companies.
