Systems for Success: UX Design Using
a Headless CMS
Want to make your content shine on any device? It’s time to embrace the power of headless content management and start building scalable and flexible customer experiences! Explore the best way to go about it with our free ebook.
Introduction
User experience practices are changing. Enterprises are shifting focus away from developing individual web pages and toward building repeatable processes and systems. Three trends reflect this shift:
- The rise of product-focused content design, where UX writers and UX designers co-design experiences as more brands recognize content’s criticality to the experience customers have when using digital products
- The adoption and evolution of design systems, which are expanding to address a growing range of channels and scenarios
- The development of structured content and enterprise content models, motivated by the expanding use of headless content management systems and the API-enabled delivery of content to any channel
By embracing these practices, UX teams are strengthening:
- The alignment of content and design
- The interdependency of the numerous decisions associated with enterprise-scale UI
- The organization of enterprise content at a granular level
These trends demonstrate that content and design resources now need to deliver much more than they did in the past and that they need to be able to respond to each other. What’s been missing is a unifying vision of how these trends can support each other. This ebook will show you how content and design initiatives can work together. You’ll learn:
- How to develop a design system and content model that are robust and flexible
- How to align your design system and content model so they reinforce each other to make your UX capabilities more versatile
- The role that a headless CMS plays in enabling omnichannel experiences
It will help your team plan modular experiences that can be delivered at scale across many channels.
Modular UX using a headless CMS
Enterprises can improve their user experience by adopting modular content and modular design. But how can they get these approaches to work together effectively?
Experience design, like other critical business functions, is undergoing transformation. Agility, streamlining, and operating at scale have emerged as essential priorities. Headless content management is crucial for modernizing experience design by supporting a modular approach to delivering experiences.
Customers expect coherence and relevance in their interactions with brands. Organizations must be able to provide information and services that fit together across a growing range of channels.
A headless CMS can support digital teams adopting a modular approach to experience design. Teams can stop designing information and services screen-by-screen. Instead, they can compose different experiences from reusable content and design modules—if they have the right framework in place.
To deal with complexity and scale, you need systems. Many enterprises recognize the need to systematize how they deliver user experiences by developing design systems and seeking to structure their content. Only a few enterprises so far have managed to combine these activities into an integrated capability. While they recognize the value of modular content and modular design, they have not yet managed to combine these approaches into an integrated framework.
Modular UX presents an opportunity for digital teams to do more and improve their outcomes. In this chapter, we’ll explore how to capture the benefits of modular content and modular design and make them support each other. We’ll look at:
• The need to transform user experience practices
• The importance of decoupling content and design
• How to build systems to support decoupling and deliver modular experiences
Moving toward system-driven user experiences
Let’s look at the transformation challenge. Both content operations (ContentOps) and design operations (DesignOps) must adapt quickly to new requirements, such as delivering new information and functionality or offering fresh modes of interaction on new channels and platforms.
Inflexible templates cause problems. Many enterprises still rely on rigid templates
to present their content that can’t adjust to new needs. They lack robust systems that allow them to modify content and design presentation easily. Digital teams spend time dealing with special requests and special projects as a result. For example, they will need to create a webpage that has a special layout or custom widget to present content. Or they’ll have to develop a smartphone app with hard-coded text strings and other content that’s a pain to change later. Their practices entangle the screen designs with specific content, making their content and design inflexible.
Hand-crafting screens isn’t sustainable. One-off designs seem to provide short-term flexibility, but they also tightly couple the content organization to a screen design and ultimately add to the difficulties digital teams must manage. One-off designs cause three problems:
- They’re inefficient to produce.
- They don’t scale when they need to grow into large projects.
- They create long-term content and technical debt because one-off designs are hard to maintain over time.
Moving beyond fragments to embrace modularity
“Fragments” aren’t the solution. Some well-known web CMSs have tried to overcome the inefficiencies of fixed content-design templates by introducing what they call screen “fragments.” The benefit promised by the fragments approach is that different screens can reuse chunks of the same content and design.
The problem with screen fragments is that they still bind together design and content chunks. The approach is brittle and clumsy. Swapping screen fragments can be arbitrary and cosmetic. Instead of seeing something contextually relevant, users are presented with a fragment that’s been recycled from elsewhere. Because the content details are still locked in the screen design, enterprises don’t realize true flexibility from the screen-fragment approach either.
Modularity delivers flexibility. Digital teams can build a better experience when the content and the design are each developed as modular resources that can be used in multiple ways. Instead of creating content and design screen by screen or being limited to the constraints of fixed templates, teams plan how units of content should work with UI modules to address a wide range of user scenarios.
The importance of decoupling content and design
Digital teams are hampered by legacy web platforms that inhibit their ability to deliver genuinely adaptive user experiences. Legacy platforms impose the structure of universal screen templates on teams and dictate how they manage their content and design. Because these CMSs tightly couple the content and the design, their content model mirrors their screen designs. Web-centric CMSs don’t allow the decoupling of content and design, unlike headless CMSs.
Flexibility generates agility. Content and design details can’t be glued together. They must react to one another.
Success depends on delivering the right experience. Decoupling may sound like a technical decision, but it’s fundamentally a customer experience issue with a significant business impact. It determines whether enterprises can deliver the right experience to users across different devices and channels. Decoupling makes the details of the content and the design independent of each other. That means that digital teams can change the design layout without changing the content, and they can change the content details without changing the design. Decoupling enables flexibility.
Decoupling goes beyond merely restyling the fixed content with CSS or shifting its layout with responsive design using breakpoints. Decoupling allows both content and design elements to change and adapt to different contexts and evolving user requirements.
Decoupling allows the experience to stay relevant. Decoupling recognizes that content and design must be able to continually adjust to provide the right user experience. Because content and design each have unique roles to play, they need
to be autonomous. However, they also need to be able to respond and adapt to each other. The content will influence the user’s on-screen behavior, which in turn will change the content the user will react to. People respond to the content they see, and the content they see needs to react to what people are doing. All kinds of content and design elements need to be able to change, especially as user experiences become more personalized.
Dynamic content and design interactions in UI
To make content interaction dynamic, digital teams should use a decoupled approach that can change both content and design elements presented in the UI. The lack of decoupling will freeze either the content and/or the design.
Content needs to adapt to the user. Let’s consider how content-design interaction happens. On the content side, messages and information inform and prompt users to act. On the screen, the information is arranged to support the specific task the user has. The layout of the information reflects the structure or purpose of the information. Content elements (headings, labels, descriptions, images, and so on) are grouped to supply an integrated message that tells users what they need to know.
The content elements are presented within design components that support common user tasks such as comparison, ranking items, locating specific information, or deciding whether to sign up for an offer. The information and messages displayed in these components can adjust according to what the user needs to do next.
As the user makes choices, the content responds based on those choices. For example, if the user taps a button, they might see additional details or a message confirming the action they’ve taken.
The design details can change as well. The purpose of the design is to support user tasks. As users interact with a UI, that UI needs to adjust to support their next action.
A modal might appear or disappear, or a button may change color. The content and design details presented in the user interface will be dynamic and constantly changing. With decoupling, digital teams aren’t limited in modifying the presentation of content and design details. They can focus on how to provide and improve relevant information and feedback to users.
The ability to change content and supply the most appropriate options is vital when designing the right sequence based on a user’s stage in their journey. You need systems that can supply the right elements to be ready when needed to change these elements.
Decouple the details by coordinating the foundation
If decoupling the details of the content and design presented in the user interface is the goal, how is it realized? Digital teams need to build foundations to support this flexibility.
The decoupling of screen design from the content is possible through the coordination of two important systems: the content model and the UI design system. They structure the content and design details shown on screens into reusable modules that can be composed into a wide range of experiences.
These systems classify and manage the core dimensions of user experience: the content people need to know and the design that influences what people perceive and do.
• The content structure (the content model) defines the kinds of messages and information available for presentation.
• The design structure (the UI design system) determines the content and actions provided to users.
The systems identify the critical content and design elements that users need, indicating what elements are available and how to use them.
Your systems can’t be siloed: they need coordination. Having a content model and a design system is not enough. The two must be planned together so they’ll work well together. Too often, content and design teams develop the content model and design system independently at different times, without much thought to their integration. Since they weren’t planned with coordination in mind, both the content model and design system end up being too generic. They aren’t granular and are less flexible than they should be. They lack a mapping between them.
Leveraging content and design patterns for seamless integration
Digital teams will want to flesh out their content model and design system by looking for patterns in what their organization needs to present to users. Content modules (groupings of related content elements) will support recurring information patterns, while design modules (groupings of UI elements) will support repeatedly used interaction patterns. Identifying these patterns will help teams understand what structure is needed and how content and design elements are related.
Map the connections between content and design structures. When the content is structured in a content model, digital teams gain granular control over the information they can present. They can use many sorts of content with a specific design component. Digital teams will want to map the types of information defined within
the content model associated with the tasks supported by the design component. For example, if the design component supports a sign-up process, what content relates to that process? There could be various content that uses a common sign-up component.
Likewise, the same content can be delivered to multiple design components based on what’s most useful to the user. Users may want to see the same information at different times in different ways, depending on what they want to accomplish. Again, digital teams need to consider how to select and group information defined by the content model and map them to design components to support various user scenarios.
Coordination enhances the value of each system
A content model provides limited value without knowing the potential destinations that will present the content. Remember that the content can be presented in many ways, in different components and different channels. To structure information and messages so that the right details are available, it helps to know how content could be presented in support of certain tasks. Content planners should consider what specific information users need to see and at what stage of a journey or task they’ll need that information.
Similarly, design systems aren’t beneficial without knowing what sorts of messages and information they will present. Designers can’t plan how to support users with design components unless they understand the kind of information it must display and its purpose. There’s little point in putting content into UI cards without knowing the specific tasks for which users are consulting the information. They will want to know what information people need to see to complete a task without difficulty.
Build a common framework for the enterprise. When content modules are mapped to design modules, digital teams gain the confidence to create content and UIs that will work well together. The purpose of each content element that’s presented will be aligned with the purpose of the design elements used in the UI. The framework for content, indicating what users need to know, is matched up with design components that support associated tasks—what they need to do.
Synergizing content models and design systems
The coordination of the content model with the design system creates a framework to deliver experiences about any topic in any channel. It will provide users with more contextually relevant experiences by enabling specific, precise messages and information to be presented in a wide variety of ways. Content can successfully work across different channels and platforms.
This coordination will also boost collaboration and productivity within digital teams. Content and design team members have a commonly agreed framework when deciding how to address different user scenarios. It’s akin to having a contract or service level agreement between content and design stakeholders that guarantees their work compatibility. Both sides will be confident that what they create will work with what their colleagues are developing.
Digital teams realize two benefits:
- Flexibility to provide new experiences quickly
- Reliability to deliver at scale content and design patterns in a consistent way
Modularity can transform experiences
Let’s quickly review the key points.
To bring greater flexibility and agility to experience design, digital teams should focus on developing three capabilities:
- Decoupling the content and the design details presented in the user interface
- Structuring content and design elements that are presented to users into independent and reusable modular resources
- Managing content and design elements using a content model and design system
These capabilities support a modular approach to experience design by combining and integrating modular content with modular design. Specifically, the approach relies on the interaction of three tiers:
- The systems tier is comprised of a content model and a design system that identifies and defines the purpose of all needed content and design elements
- The component tier of reusable content and design modules that provide a framework for structuring information and interaction
- The UI tier that expresses the variable details presented to users
Following a modular approach to UX requires thinking ahead. But the capabilities don’t have to be built all at once: they can evolve as new requirements arise. And once in place, they’ll provide great efficiencies. Let’s look at what teams need to do to level up their systems to support a new project.
Improve the modularity of your next user experience project
To tap into modular content and modular design benefits, enterprises need to make sure both are future-ready. Are your content model and design system ready for your next big project?
Modularity has emerged as a major theme in digital design.
- Modular content supports the reuse of content in different contexts.
- Modular design supports the reuse of design components across applications and platforms.
Both help digital teams build new experiences by providing a kit of parts. A content model and design system provide building blocks to create new experiences.
But if teams are missing critical building parts or find they don’t fit together right, they’ll miss out on the benefits of modularity in UX.
While similar in their motivations, modular content and modular design have developed separately. Both approaches emphasize defining structures that can be used repeatedly, improving the efficiency of content and design activities. Yet the full potential of these approaches goes beyond optimizing existing content and design work. When developed in tandem, they offer a platform to extend what teams can address, allowing them to deal with novel requirements.
Strengthening governance and capabilities for content-design decoupling
Previously, we looked at why digital teams should decouple their content and design and stop designing content for specific screens. And we stressed the importance of coordinating their content models and design systems to support user experiences. In this chapter, we’ll look at how teams can upgrade their use of modularity in their next project.
Strengthen your governance and capabilities. When organizations transition to decoupling content from design, they may find weaknesses in their content and design maturity.
• They’ve been doing lots of projects in an ad hoc manner, with little governance over how the content or design is structured.
• Their current content model and design system have grown piecemeal and are not sufficiently robust to handle future needs.
They need a stronger foundation. Implementing a headless CMS, which decouples the content from the design by default, can serve as a catalyst to improving
these dimensions.
A new project can highlight gaps in current capabilities. Before throwing themselves into the details of a major new project, digital teams should do four things:
- Define what’s novel in the project.
- Assess what frameworks are already available.
- Determine the readiness of your existing systems.
- Strengthen your weaknesses.
Step 1: Define what’s novel
The first step is knowing how much your team will need to change how they have done
their work previously.
Look at what you are aiming to deliver and ask how much it will be different from projects you’ve done in the past. Some questions to consider:
- Will existing UI components be sufficient?
- Can the current content structure handle the messages and interactions envisioned?
- How much will the new project depart from your existing patterns?
- What new elements might you need?
Here are some examples of new content and design elements that might be required:
| Examples of new content elements | Examples of new design elements |
|
|
Strengthening governance and capabilities for content-design decoupling
Novelty isn’t always radically new, though it sometimes is. Novelty can appear when a new project extends either:
- The scope of what’s been done, such as addressing new subject domains or channels
- The detail or granularity of what’s being presented, such as when previously unstructured templated content is given more detailed structure
Your project’s goals will reveal what’s novel. Determine how different the new project will be from past projects. Will the project be:
- A completely new greenfield project?
- A redesign or refactoring of an existing application?
- An extension in the breadth or depth of the content or functional coverage?
- A new direction, such as serving a different channel with alternative modes of interaction?
Any time your project introduces novelty compared to what you’ve done previously, it suggests you’ll need to add more structure to your content model and/or design system.
An example: The project introduces multilingual versions of an app that was previously available only in one language. The content model would need to accommodate different versions of the content, while certain design components may need tweaking to present other languages properly, such as the sizing of elements such as buttons and inputs, text within images, the formatting of dates, numbers, and currency, or the layout—especially if adding right-to-left languages.
Another example: If the project introduces augmented reality (AR), the team will need to develop frameworks to provide and present information for that channel.
Step 2: Assess the frameworks you have already
Assess the completeness of the foundation that’s in place. Review your existing content model and your design system. Can they address the kinds of content you need to present and the channels you are serving?
Test the maturity of your content model and design system by seeing how well it can handle new requirements. Think about the different scenarios and whether your systems can support them.
How detailed is your content model? Your existing content model might not have been built for more structured content. Immature content models suffer from two common problems:
- They are vague and imprecisely structured, failing to organize information around topics or tasks and instead provide a limited range of generic content containers.
- They are overly specified because they reflect the text presented on existing screens rather than structuring information according to its meaning and purpose (it’s a de facto content model arising as the byproduct of screen design).
Another limitation is that existing content models are often web-specific. Mobile apps, chatbots, email, and other non-web channels often don’t use this content model at all. If you want to unify your content model to support multichannel content delivery, you will need to include topics and tasks that may not be part of your web channel. Doing so will improve the governance you have over your content.
Decide how much granularity your content model needs. You’ll want enough granularity to support publishing flexibility but not so much that it creates complexity without delivering value. Decide on content types according to how content teams need to manage the information and the high-level user tasks associated with the content. Break out (de-clump) content elements within types by paying attention to how users access specific information in different scenarios. Content elements give designers control over what informational details to present. Think about:
- Details users will need to see more than once at different stages
- Details that you’ll want to show or hide depending on the context
- Headings, labels, or descriptions that could vary across platforms or channels
Assessing existing frameworks
How detailed is your design system? Your design system may cover the basics but not more complex patterns. Immature design systems are limited by several issues:
- They are focused on aesthetic guidance but don’t cover interaction patterns in much detail.
- They have been copied from other organizations and only cosmetically modified instead of being tailored to support the concrete needs of the organization’s customers.
- They are too generic and not focused on supporting specific user tasks.
- They don’t govern recurring UI patterns, such as onboarding new users or resolving user problems.
Upgrade your design system. A mature design system indicates much more than
how to style boxes and buttons. If you are looking to address new channels, you may need to extend your design system to cover them. The goal should be to develop design modules that support critical tasks, presenting a range of content users will interact with when using various channels.
The maturity will influence how much foundational work is needed. The less mature your content model or design system, the more effort you’ll need to put in.
Cross-check the robustness of your content and design frameworks. Verify that the content model and design system can handle the needs of the new project. Even if the project doesn’t seem to introduce much new functionality, work through user scenarios to make sure that the right content and design features will be available. This is especially important when user interaction is envisioned: Will they have the relevant information and be able to work with it? Think about the key customer metrics driving the project and what content and interaction support is needed. What problems might customers encounter that need to be accommodated?
The table below will provide your team with a rough guide to your current maturity and the gap you need to close:
| Maturity level | Status of enterprise content or design framework | Goal and steps required to get to maturity |
| Absent | The framework doesn’t exist Prior projects were not governed by a defined enterprise content model or design system | Goal: a new comprehensive framework Build a comprehensive framework from scratch Verify that the comprehensive framework can handle all anticipated interaction requirements |
| Limited | The framework is inadequate for current needs Gaps in coverage exist, or current implementation goes against best practices | Goal: an improved and extended framework Remediate existing framework to fix the technical debt and fill in missing foundations Extend existing framework Verify that the revised, extended framework can handle all anticipated interaction requirements |
| Emergent | The framework is adequate for previous needs but not sufficient for future needs The new project will introduce novelty | Goal: a more comprehensive framework Extend existing framework Verify that the extended framework can handle all anticipated interaction requirements |
| Comprehensive | The framework can handle projected future needs The framework | Goal: the existing framework is stress-tested for future-readiness Verify that the existing framework will be able to handle all anticipated interaction requirements |
Step 3: Determine the readiness of your framework
Know your weaknesses before they bite you later. After reviewing the maturity of your content model and design system, the team needs to figure out if both are ready for the new project. You can’t build an adaptive solution until your foundation is in place.
For large complex projects, digital teams should hold off on the detailed design and content creation work until they’ve prepared both the content model and design system foundations.
Are you prepared? Evaluate your robustness of each to determine how prepared the team will be to move into detailed design. Pay close attention to content and design patterns that will be needed repeatedly. Once the detailed design is underway, teams must know where the information will come from in the content model and how it will be presented according to the design system. Any significant gaps or unknowns are signs that the foundational systems need enhancement.
Readiness will depend on having specified all the essentials:
- Content elements (defined within the content model)
- Design elements (components in the design system)
Since your content model and design system may have been independently managed and not coordinated previously, one or both are likely not fully ready for future projects.
| Content structure readiness | Design system readiness | Readiness to build a solution |
| Are all essential content types and elements in place within the content model? | Are all needed design components available so they can be mapped to content elements? | Can teams connect required content elements with design elements? |
| Yes | Yes | What’s ready: Content structure, design structure |
| Yes | No | What’s ready: Content structure What’s not yet ready: Design structure |
| No | Yes | What’s ready: Design structure What’s not yet ready: Content structure |
| No | No | What’s not yet ready: Content structure, design structure |
A greenfield project covering an entirely new content domain or design for a new platform will generally require extensive prep work.
Step 4: Strengthen your weaknesses
Ideally, your current content model and design system can handle routine projects like those you’ve done before. But they may not be future-ready. Your framework will need more development if new projects introduce novel scenarios not covered by your current systems.
When starting a significant new project, a top priority should be enhancing your content model and design system so they can address anticipated scenarios. Although detailed content and UI design may uncover some less obvious specific requirements, it’s best to plan how to address “global” content and design patterns as much as possible before starting detailed work.
Build a foundation that will be extensible for future content and UI needs. Your team’s detailed design work will be more efficient and maintainable as a result.
Systems for Success: UX Design Using a Headless CMS.
Want to keep reading? Get your complimentary copy of Systems for Success! In this 89-page ebook, you will learn:
- Tips on how to align content and design initiatives
- How to create content experiences your users will love
- How a headless CMS lets UX designers and content creators deliver content across multiple channels
