Getting agile with atomic design systems in AEM as a Cloud Service

Getting agile with atomic design systems in AEM as a Cloud Service
By Michael Paull
Oct 20, 2021

As customer expectations of great digital experiences scale, so are organizations moving towards more flexible, responsive ways of working. Looking to a continuous stream of innovation to meet rising expectations, many organizations are optimizing their approach with a well-designed combination of Atomic Design and Agile methodology. Adobe Experience Manager (AEM), specifically Adobe Experience Manager as a Cloud Service (AEMaaCS), is especially suited for this integrated approach to new CMS workflows—delivering value to product owners faster while supporting Agile processes for defining and designing solutions.

The building blocks

At their core, all digital experiences and products are made up of the same basic building blocks. Whether the workflow tools that back them reflect it, or the design considered it, a digital experience is built by assembling these common elements—text, images, form components, links, etc.—into more complex solutions.

Atomic design describes a process of both designing and building an experience that focuses on these basic elements, referred to as atoms, as the core components of your design. These atoms can be used directly throughout the design of a solution, or combined into molecules to be utilized as their own reusable elements. This approach offers both increased efficiencies, as reusable elements are built and tested only once, and maximum flexibility, as the information architecture and layout of a content piece can change without requiring code changes to singular components.

AEM’s atomic design in action

AEM’s Core Components offers a full library of atoms and molecules specific to AEM that meet these goals. This includes a complete set of basic elements for building web experiences, as well as a set of AEM containers that provide functionality and complexity. For those site experiences requiring custom elements that go beyond what core components can provide, the design system built for the core components will work to speed the development of these, while ensuring consistency, accessibility, and fidelity.

For developers looking for a simple way to leverage the common components across a complex set of design requirements, AEM offers the Style System as a vehicle to supercharge the Core Components. In practice, the same underlying Core Component will fill the role of multiple atoms and molecules within a design, and components can be repurposed in this way through styling and policy updates alone.

Atomic content

AEM and its Core Components also support the principles of atomic content. Just as atomic design implies an experience made of small, reusable design elements, atomic content also implies the use of small elements of reusable content across a business’ omnichannel solutions. AEM’s Content Fragments (CF) and Experience Fragments (XF) are solutions designed for this purpose, giving site authors the ability to reuse elements and content to build targeted, responsive, and accessible experiences in real time.

These atomic content tools seamlessly dovetail into your testing and analytics strategy, as AEMaaCS includes Adobe Target out of the box. Combine this tool set with Adobe Analytics to achieve a robust framework of design atoms and molecules, atomic content fragments, and advanced testing and measuring capabilities that can enable teams to design and build products and experiences iteratively and in response to real-world data at each step.

Delivering on this concept

Moving away from big-bang design handoffs and deployments is certainly an enticing concept. Because atomic design integrates real-world data into design decisions, reduces risk, and allows organizations to better respond to change, the case for making a switch is strong. But you still need to get it into production.

This is where an Agile workflow can take your atomic design strategy to the next level. An Agile workflow is more than daily meetings and two-week sprints. It’s about harnessing DevOps and CI/CD pipelines to be ready to deploy after each sprint, and to make doing so smooth and painless.

Agile development workflows help teams build products more efficiently and respond better to change. These workflows allow the team to personalize and test the experience iteratively, and expand the scope to integrate feedback and include real-world data in real time.

Kicking off a new project on AEMaaCS with this framework of tools is easy. Automatic deployments between environments are built right in, as are Analytics and Target, which means your AEMaaCS can be as agile as you want it to be. The toolset supporting Core Components and the Style System are built with atomic design’s principles in mind and can be further superpowered with pattern library tools such as Storybook and the Tailwind CSS framework.

How to get started

Are you looking to add the flexibility of Agile workflows to your design approach to meet the ever-evolving expectations of consumers? If these concepts and tools are completely new to your organization, there are two key components to consider as you look to incorporate this powerful combination.

  • Start small. Build an Agile team and start delivering value. Begin with a smaller project the team can deliver quickly, within a scope they control. Don’t make your first project a complete redesign and replatform; instead, deliver a new feature, deploy a new campaign, or integrate a new channel into the strategy, and build from there.
  • Follow the “campsite rule.” This dictates that your team follow their own principles and leave everything they touch better than they found it. Set up the CI/CD pipeline to allow for iterative deployments, gather real-world data quickly and share it with whole team—then design and build atomically to deliver more value with greater ease and speed.

Remember to define your atoms as small as you can and be ready to deploy after each sprint, and you’ll be ready for production faster than you may think possible. If the design workflow is focused on crafting experiences from the same set of basic elements, an Agile team can provide site authors with a well-stocked toolbox within just a few sprints.

Bringing these concepts together can be powerful—if executed well. Starting small, delivering iterative improvements, and optimizing on the simplicity of the atomic design framework can lay the foundation for delivering a holistic, but adaptive, approach to new CMS workflows.

ICF’s global marketing services agency focuses on helping your organization find opportunity in disruption.
Go to ICF Next
Meet the author
  1. Michael Paull, Director, Experience Technology Solutions

The latest marketing trends, uncovered.

Subscribe to get insights, commentary, and news sent straight to your inbox.