Contentful brings an atomic boost to your platform

We've been using Contentful for years at Reign because no matter the challenging nature, this content platform has the proven technology to meet it. Large enterprises have relied on our decoupled architecture and Atomic Design approach, where Contentful is the logistical hub of the digital experience.

Through Contentful APIs, we can create better digital experiences with our customers. Moreover, companies can incorporate this headless CMS quickly as it communicates easily with other systems.

What is Atomic Design?

Atomic Design is a methodology for developing web design systems. It means that it transforms all the components and content that your site needs (from images, text, buttons, or search engines) into modular units whose rules and relationships are defined by business needs, allowing brands to focus on content strategy.

Together with his team, Brad Frost, author of this methodology, developed an entirely different way of thinking about web content. Brad used the atoms, molecules and organisms analogy as a pedagogical resource to explain that a site construction can be done in a modular approach, where its components are mutually compatible modules. And the rules that mediate the relationships between the modules can be defined in advance, for example, content strategy, text and tone of voice.

To summarize, we can say that each component definition is as follows:

• Atoms: are basic units like buttons, labels or text entries. When they associate with each other, they form more complex organisms and structures.

• Molecules: are formed by atoms' interaction, creating more complex functionalities such as text input with a search button.

• Organisms: within the UI, organisms are autonomous and fully operational components. For example, a category panel or a contact form.

• Templates: are the complete prototype of the pages and incorporate all the content to be published and their respective functionalities.

• Pages: this is the name given to the result of combining atoms, molecules and organisms. When viewed from the design system, the pages can be welcome pages or a product with selection and payment functions in an ecommerce.

Creating your design system is the cornerstone in developing your platform. Thus, once established under this methodology, you fragment your site into a universe of pieces with great internal cohesion, which at the same time carry autonomous content. From here, you can take any atom or molecule and make them part of a new project.

From Atomic Design, you develop content thinking of your site as a mosaic or a tower of Lego Bricks, the classic philosophy of technological development, speeding up processes by using specific modules.

API-first: Modern content management

Likely, you're already guessing; with this universe of pieces, it's ideal to have some technology to manage them. So, when your design and content team requires an atom or a complete template, and they need to access it and deploy the result with the same speed — the solution is Contentful.

What Atomic Design meant to us at Reign was accelerating the way we work with a decoupled approach. And it was Contentful, a content platform under an "API-first" approach that was the natural complement when managing our content from a workspace.

A content platform designed on a large scale

Contentful is the ideal workspace. It is effortless to manage, making it easy for brands to adopt. Connections are made from its five APIs and allow you to deploy all your content on nearly any type of device.

The names of these APIs are pretty exact, which helps us to incorporate them quickly:

• Content Delivery API (CDA) is responsible for distributing all content (regardless of type) from your platform to the device that requests it. It bases its technology on a Content Delivery Network, allowing Contentful to connect to the closest node according to geographic proximity, reducing latency and improving the experience quality.

• Content Management API (CMA) is the tool you use to manage content (...we said it, exact names) and link systems. It comes to be the logistics center heart.

• Content Preview API allows teams to preview the product they want to launch. You have a secure testing space in a productive context.

• Images API helps you edit pictures, whether to resize or change colors; this API allows you to adjust each image to the conditions you need it to be displayed.

• GraphQL Content API is how Contentful deploys an interface that allows you to manage your data schema based on its content model.

Development teams benefit from the simplicity of communicating systems with this CMS via APIs. On the one hand, they recover the time they once needed to dedicate to content publishing aspects. On the other hand, they simplify the backend, optimizing its performance.

Modular architecture and design; the Reign approach

Over time, we got better at addressing the requirements for those looking to modernize their platform. We took a fluid approach to manage content and strengthened the modular approach to building architecture.

Earning Contentful's Gold Partner status reflects our commitment to creating agile design systems while keeping the company's business needs at the center of the strategy.

But it wasn't all about our internal process; just as Brad designed a methodology for the world, we also decided to build our method, albeit for a more select audience. We developed our Reign approach, which boils down to “atomic management and global reach, assuming it is already modular.”

While alluding to Atomic Design, atomic management is a wordplay on a brand’s speed to launch new projects. By global reach, we mean the crucial factor of being available at any point of connection to scale if the volume of traffic increases and at the same time maintains consistency of content across all channels.

Every company is unique and doesn't have to build its digital presence by adapting to what's out there. The challenge is to create a space with its own identity, which only its members can give it, so Atomic Design and Contentful adoption are key.

Our approach in action with BUPA Chile

To implement our approach, we must comply with two central aspects designed with a lot of effort. First, always keep each brand's specific needs as a criterion for digital experience creation, and secondly, transfer the knowledge to the local teams.

One success story we like to use as an example is BUPA Chile, the local subsidiary of the English healthcare group BUPA, which operates on a global scale. In Chile, BUPA comprises a series of clinics, health services and insurance.

Once the BUPA teams had internalized the characteristics of a decoupled approach and modular content, they were able to create their own design system, which they amazingly named BADS (BUPA Atomic Design System), fostering from the start the identity factor of the project.

We managed to fragment different sites with their respective services and functionalities into a simple-to-apply design system, which accelerated the launch of new products and projects in less than one week. It also improved the customer service experience by finding consistent sites, whether in medical care or contracting services areas.

The result was a homologous digital experience in its different sites and channels, strengthening the quality of the journey and performance of its platforms.

A content platform is key to omnichanneling

According to a Gartner report, by 2022, 50% of large brands will fail in their attempt to unify their digital interaction channels, experiencing the negative impact of having a disjointed digital experience without internal consistency.

One of the ways to face this challenge is the adoption of omnichannel as a business strategy. On other occasions, we have already talked about omnichannel, so we will not go into it too much. But the simple fact is that brands must create the conditions so that platform users can move from one channel to another without interrupting their shopping experience.

What does this mean? It means that your brand should be ready to serve people wherever they seek it. Omnichannel is about expanding the digital experience to any channel ("omni" comes from totality) while preserving the quality and warmth of your platform because at the heart of this strategy are the people.

Now, when you embrace Atomic Design and deploy your content through Contentful, embracing omnichannel is almost a logical step rather than an innovative challenge because you have the pieces and tools to build in the channel of your choice.

A clear example following BUPA's case would be a person who makes a phone call to book a medical appointment. They pay for it using their mobile phone, and when they arrive at the health center, the staff already has all the information available, without needing to ask the person to confirm each step they have taken. It is a consistent transition from one channel to another, and the result is that end-users enjoy it.

At Reign, we are experts in building an omnichannel experience for big brands. We apply our approach to maximize the symbiosis between Atomic Design and Contentful, which our clients value as it facilitates the adoption of modern, future-proof technology.

Contentful’s API-first content platform is purpose-built for creating omnichannel digital experiences. The platform helps digital teams innovate, iterate and go to market faster with an agile, modern tech stack that integrates seamlessly with ecommerce tools. Visit the Contentful Marketplace to see these integrations, and read our customer use cases to learn more about how Contentful can help your organization grow its digital footprint.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.