Applying Atomic Design principles to create a modular content Strategy. Modern platforms rely on content to provide a great digital experience, However, pushing relevant content consistently can be expensive and thus creating modular content can ensure scalable delivery of reliable personalized content.

I recently came across this methodology of creating design systems and the overall process of creating modular, scalable, and consistent designs. Atomic Design

Can the same methodology be replicated for Content Modularity?

Let’s take a look at the basics of Atomic Design Methodology and draw parallels with Content Structuring.

Atomic Design Basics

There are 5 different levels:

1. Atom – The smallest possible element that can exist.
   Example: a Button
2. Molecule – Combination of Atoms to create another element
   Example: a Profile Card
3. Organism – Combination of Atoms and Molecules
   Example: Profile Header that is a combination of a Button and a Profile Card
4. Template – Breaking the chemistry analogy Templates are a combination of organisms that looks more like a wireframe/template and act as a guiding principle to build pages
   Example: Profile Template
5. Page – At the page level, everything combines, various organisms combined together to create a template now come together with real content.
   Example: Profile Page

Atomic Content Basics

The same can be applied to content as well with the following different levels that can come together and be mapped one to one with the atomic design methodology

1. Element – The most basic form of content, the smallest possible asset that can exist on its own.
   Example: Text, Image, Audio, Video
2. Fragment – Combining Fragments to create fragmented pieces that complement multiple elements and can be used to provide meaning to a topic that an element on its own cannot. Presentation agnostic
   Example: Banner (Image+Copy), Video (Image+Audio), Layered Image
3. Template – Adding structure and relation to Fragments and Elements thus creating reusable outlines.
   Example: Presentation Template, Article Template
4. Content – Template with context combined can result in varied content types
   Example: Blog, Articles, Videos, Infographics
5. Interactive Content – Adding an element of interactivity to static content can be the next level in delivering the best digital content experience.
   Example: Quiz, Survey, Polls, Calculators

Managing and Using Atomic Content

Atomic Content can creation and utilization can be expensive thus it is important that appropriate tools are used to ensure faster delivery of digital experiences at scale.

The following principles should be followed in order to manage content efficiently:

1. Tag everything
2. Maintain relationships
3. Maintain versions in a contextual manner – an image is an element that can be used in various fragments and thus

Know that barriers to creating Atomic Content are most often cultural rigidity among teams, however, once organizations overcome the challenges they can benefit from the full potential of Atomic Content.

Once the desired content is ready an important part is the delivery of content. Sitecore Content Hub includes various modules that can be leveraged in order to create, manage and deliver atomic content.

Sourcing elements and delivering content to various channels, Content Hub becomes the central repository to store and search for content and thus ensuring reusability.