Realistic prototypes

Content models help you realize your user experience goals, enabling you as a UX designer to do your job more quickly. It allows you to use real content in your designs, not “lorem ipsum.” You can create realistic prototype designs, using a popular tool such as Figma and connecting it to real content stored in the content model.

Reusable design systems

These models also make it easier for you to collaborate with your colleagues who are writers. You can align your design system and content model to implement new designs more quickly. Both UX and content share a motivation to create a reusable system that is independent of a specific implementation. Your team can collaborate with writers to explore design requirements. This exploration is a great opportunity to get your development department involved in the content model as well.

Removing design and content dependencies 

The benefits of having a plan for the structure of the content are numerous. Designers will be able to change the design without requiring that the content be reworked. Once the content model is set up, there’s no longer a dependency between the design and the content.

You’ll want to think about how the content model that structures the content connects to UX resources you create. These include your design system, specific UI components, screen frameworks, UX patterns, and brand language.

Content model and UX mapping

At the most basic level, the elements specified in the content model will get mapped to the elements that are displayed on screens. These elements include titles, bodies of text, messages in links or buttons, and visuals. Once the conceptual mapping happens, these links will be formalized so that the right content can populate the appropriate screen. APIs make linking between the content model and UI possible. 

As a UX designer, you’ll want to understand the role of content models in supporting your designs. Importantly, you’ll want to know what things should be included in the content model, and when they should be specified elsewhere.

What goes into the model

The content model primarily represents the structure of the content, rather than the structure of a web page. In some cases, you may have a content-intensive feature on a webpage that would make sense to include in your content model. These are called “components.” For example, if you had a widget that calculates a value, you might want to represent that in your content model. But such components would only be for content-defined components and not for generic UI components in the design system.

There is variety of other topics that UX designers can take into consideration:

• A/B testing
• Personalization
• Why WYSIWYG is not the best option

Moving away from pages and form

Some UX designers will be familiar with page-based CMSs that create models of web pages. Content models are different than page models. Developing a content model requires a switch from thinking about where something goes to what something says. Instead of specifying page structures, the model specifies the role of the content. Don’t model empty “containers” that could hold any kind of content, things like banners, contact us sections, tiles, related links, or carousels. Instead, go deeper to consider what type of content would need to be expressed in those containers.

Linking content types and UI with guidelines 

A best practice is to annotate your content type with guidelines indicating what UI component will use the type – or elements within the type. Sometimes this will be a 1:1 type-to-UI component (example: a warning content type may correspond to a warning popup). Other times it may be a 1:Many type-to-UI component (a CTA could be inserted in articles or emails.)

Are you an UX designer eager to learn more? Continue by reading Michael's blog post - Aligning headless content with UX in design projects.

Key Points

To recap:

• A good content model allows feeding actual content into designs, replacing the practice of using "lorem ipsum" as a placeholder.
• Spending time on the model will allow for the creation of reusable design systems.
• UX and the content model are mapped thru basic design elements, such as titles, bodies of text, or buttons, that are in a content model represented by components (chunks). 
• The removal of formatting information from a headless CMS should be complemented by specifying guidelines to help to link components with design elements.