The content model and design system allow digital teams to build their wheelhouse instead of reinventing the wheel with each new project. 

But the coordination between the two foundations requires planning. How can they be aligned to produce great experiences? And how can content and design teams collaborate not only on specific projects but on strategic initiatives to improve UX capabilities?

Be led by a guiding vision of modularity

A modular approach to content and design delivers numerous benefits. It allows digital teams to reuse prior work to build quality experiences. 

In a series of posts, we have examined how to build modularity into the delivery of user experiences and explored the relationship between content models and design systems.

We discussed some goals relating to modularity:

• Using content models and design systems to support the decoupling of content and design
• Upgrading and maturing your content and design foundations
• Connecting your content and design modules by relating content types to design components

And we’ve discussed some tactics:

• Thinking about the distinct roles of content types
• Making design systems more content-friendly
• Developing a “create once, publish everywhere” approach that works across channels

Now, let’s look at the larger picture: how to put it all together so that the content and design are cohesive.

Modularity encapsulates many decisions pertaining to enterprise content and design. Digital teams need to pursue multiple goals and tactics for a modular approach to take root and grow. The good news is that even though modularity involves many dimensions, its various strands are unified by some common themes. 

While separate and independent, content models and design systems are similar in their orientation. Both approaches support modularity by defining building blocks that can be assembled into larger structures and provide variations to address different scenarios. And the development of both will follow a similar path toward maturity. Content and design teams will not only work toward common goals, but they will also follow a similar process to reach those goals.

A common process to developing modularity

Content and design teams may have separate responsibilities. But they can work toward a common goal—modularity that can support UX at scale—and follow a common path to building that modularity. They share similar challenges and draw on similar processes to define the modules that are needed.

Modularity, whether for content or design, must be built upon a sustainable base that’s solid but flexible:

• Solid because it’s been thoroughly tested and optimized to handle critical use cases
• Flexible because it is extensible and able to handle less common use cases and new requirements

When developing modularity, both content and design teams are interested in:

• Removing duplication, redundancy, and inconsistency
• Bringing greater clarity to details to support precision and efficiency
• Making the foundation extensible so it will be robust enough to handle future needs

Defining the structure for the content and design involves a three-stage process:

1. Identify the essential building blocks you need: your core content types and base UI components.
2. Define the details and variations of each building block.
3. Extend them so they can work in a different context.

Enable future-readiness through platform inclusiveness

Reusable modules embed standards for how to structure the content and its presentation. To be successful, standards must be both reliable and able to evolve. 

Standards can grow to address new requirements when digital teams are led by user needs. Users don’t want to be constrained. Evaluate the robustness of modules by asking if they make available the right content and messages and support what users need to accomplish. 

Content models shouldn’t be channel-specific, reflecting the needs of the web only or covering only content that’s published on certain websites. This outcome prevents the sharing of content between channels and results in broken experiences when customers move from one channel to another.

Design systems shouldn’t be product-specific, centered on one high-profile app without being relevant or adopted by teams developing designs for other products. This outcome prevents the reuse of designs among products and hurts the customer’s experience when they use more than one product.

Both the content model and design system need to be multi-platform from their conception. They may not initially cover every channel or product, but they should be developed with the expectation that they can eventually encompass the range of platforms that the enterprise supports.

Building out the content model and design system

Let’s review how content models get built out. Previous articles have covered these processes in detail, but, at a high level, we can break down the process into three distinct steps.

1. Identify the “core” content types relating to topics, tasks, and curation containers.
2. Figure out the essential details and the variations within each type, and each type’s relationships to other core types.
3. Identify the unique “channel” content such as wayfinding content for channel-specific content containers, the information architecture labels, and navigation, or channel-specific messages.

Now let’s review how design systems get built out. While many details are involved, at a high level the process for design systems is in many respects similar to how content models are developed. 

1. Identify the “base” UI components needed to support user tasks and their relationship to smaller or larger components.
2. Specify the elements within each, their associated rules and properties, and the variations required to address different contexts.
3. Develop channel-specific UI components and design patterns.

Integrating your content and design foundations to support experiences

The content model and the design system are separate capabilities but need to support each other. 

Each has its unique role and purpose. The content model is not defined by the design system. And the design system is not defined by the content model. Yet they mutually influence each other and need coordination. They require integration at different levels of detail and across a range of variations. 

Content-design integration allows the decoupling of content and design to work effectively at scale to support the user experience across the enterprise. Instead of creating a single tightly coupled system that’s inflexible and can’t scale—the problem that’s bedeviled digital teams in the past—the enterprise will weave together a federated, loosely coupled integration between the content model and design system.

By defining the relationship between content types and UI components, teams can structure the customer experience as reusable modules that specify what content to present and how to present it to address specific customer scenarios and tasks. To achieve this, they can follow the same three-step process used for structuring the content and design.

First, teams will match content types with UI components. The content types and UI components won’t necessarily be a one-to-one correspondence. Many content types can be presented in various UI components. And UI components can host content from multiple content types.

Second, teams will align fields within content types with UI elements within components. With the basic relationships established, it’s time to consider the details. What specific content details can a UI component present? And where does that content come from? In many cases, a UI component or pattern will display only some of the fields structured in the content type, at least at the same time. The component can select how much detail to show and can change specific details depending on the context. 

Third, teams can add channel-specific wayfinding and messages. Consider how channel characteristics influence what content is needed and how it’s presented. Content and design teams will look to extend the foundations of the content model and design system to support all channels. This level of content-design integration is necessary to realize the goal of “create once, publish everywhere.”

Making your content and design foundations sustainable

For your content and design foundations to enable the scaling of your user experience, they must be able to grow and adapt. As teams consider the numerous decisions about what to include in their content model and design system, keep in mind the sustainability of this work. Evaluate decisions in terms of whether the module can be reused, adapted, and extended. If you do, your foundation will keep getting more powerful. You’ll improve the user experience you can offer with each new content and design module you create.