Content Modeling for Better User Experience in Strapi Projects

cover
28 Jul 2024

Did you know that 88% of online consumers are less likely to return to a site after a bad experience? One of the factors contributing to this issue is poorly structured content. Strapi addresses this by offering the ability to create custom content types. But how can this feature be harnessed to improve user experience?

In this article, we'll explore what content modeling is and why it's essential. We'll also guide you through creating a content model and provide a practical demo using Strapi. By the end of the article, you'll have learned how to design user-friendly content structures that not only inform but delight your website visitors.

What is Content Modeling?

Content modeling is the process of defining the structure, organization, and relationships of content within a system, such as a website or application. It involves creating a blueprint that dictates how different types of content are organized, how they interact with each other, and how they are stored and retrieved. This helps ensure a consistent and user-friendly experience for your visitors.

Two people collaborating on a content model visualization on a whiteboard.Image Source: Unsplash

Building a website or app can be compared to building a house. But in this case, instead of bricks and mortar, you're using content blocks. A content model is like a blueprint for those content blocks. It tells you:

  • What types of content blocks you have: Think of these as different shapes and sizes of building blocks. You might have blog posts (long and rectangular), product pages (square with details), or event listings (smaller squares with key info). These are your "content types."
  • What goes in each block: Each type of content block needs specific information. A blog post block might need a title, author, and content area, while a product page block might need a title, image, price, and description. These are your "content attributes."
  • How these content blocks relate with each other: These are your "content relationships". It could be
    • one-to-one: a direct relationship where one piece of content is linked to another single piece of content. For example, each blog post might have one author profile associated with it.
    • one-to-many: one piece of content is linked to multiple pieces of content. For instance, an author profile can be associated with many blog posts.
    • many-to-many: multiple pieces of content can be linked to multiple other pieces of content. For example, a blog post can have multiple tags, and each tag can be associated with multiple blog posts.

Why Do You Need a Content Model?

Would you start building a house without a blueprint? Probably not. Well, the same goes for creating a website or app—you need a content model. Here's why it's so important:

1. Blueprint for Organization:

Just like a building plan lays out where every room goes and how they all fit together, a content model defines the structure of your content. It tells you what types of content you have (like articles, product pages, or user profiles) and what each one should include.

2. Enhanced User Experience:

A well-planned house makes for a comfortable living space. Similarly, a thoughtfully designed content model leads to a better user experience. Users can find what they need quickly and easily, keeping them happy and engaged.

3. Consistency and Quality:

Having a building plan ensures that every part of the house meets quality standards. The same goes for a content model. It keeps your content consistent and high-quality across the board. If you have product pages, each one will have the same basic element, like a title, description, price, and image. This gives your site a cohesive and professional look.

4. Scalability and Flexibility:

A good building plan allows for future changes without causing a headache. Likewise, a content model makes it easy to scale up your content or make changes down the line without everything falling apart. If you decide to add a new content type, like a blog section or a FAQ page, the model provides a framework for integrating it seamlessly into the existing structure.

5. Guidance and Efficiency:

Without a building plan, construction would be chaotic. It's the same with content—you need clear guidance to keep things running smoothly and avoid confusion. A content model does just that. It ensures everyone knows what they're supposed to be doing.

Content Model Design Principles

What should you keep in mind as you draft your content model?

1. Focus on user needs

This should be your top priority if you want to retain users and ultimately have a good business. Identify who your target users are. Try to understand their needs and browsing behavior. What information are they seeking? How do they expect to find it? Organize your content types in a logical way that mirrors how users would navigate your website or app.

2. Use clear content structure

Define each content type distinctly. What information does it represent (e.g., blog post, product page)? Identify the core attributes needed for each content type. Focus on what's essential for users and avoid overloading the model with unnecessary details. When in doubt, keep it simple. Look for opportunities to reuse elements across content types. For example, a "company address" section could be a reusable component.

3. Consider flexibility and scalability

Consider how your content needs might evolve. Can your model accommodate new content types or additional attributes easily? Establish clear naming conventions and data types for attributes to ensure consistency and future scalability.

4. Document your process

Even if you're currently the only one handling content on your team, it's wise to think ahead. Maybe you'll need to bring a new teammate on board, or you might find yourself juggling additional responsibilities. That's where documenting your content model comes in handy. It not only smoothens the onboarding process but also makes knowledge transfer easier. Plus, having everything documented allows your team to keep track of processes, spot areas for improvement, and refine workflows over time.

How to Design a Content Model

Now that you understand what a content model is and why it's necessary, let's dive into how to design one.

Step 1: Define Your Goals

Understand why you need a content model. What is it you want to achieve with your content model? Is it improved organization, better user experience, or easier content management?

Step 2: Identify Content Types

List all the different types of content you have or plan to create (e.g., articles, products, events, user profiles). Group similar content items together.

Step 3: Determine Attributes/Fields for Each Content Type

Specify the pieces of information each content type needs. For example, a blog post might include fields for the title, author, publish date, body text, and tags. Ensure that all necessary details are covered.

Step 4: Define Relationships Between Content Types

Decide how different content types will be linked. For instance, a blog post might be related to an author profile, or a product might have associated reviews and categories.

Step 5: Create Content Templates

Develop templates for each content type you've identified to ensure consistency. These templates should include all the required fields and structure.

Step 6: Build a Content Structure

Organize how content types and their relationships will be structured within your system. This includes creating content hierarchies and defining parent-child relationships if necessary.

Step 7: Choose a Content Management System (CMS)

Select a CMS that supports your content model. Ensure it can handle your defined content types, attributes, and relationships. Examples include WordPress, Drupal, or a headless CMS like Strapi.

Step 8: Implement the Content Model in Your CMS

Set up your CMS according to your content model. Create the necessary content types and fields. Configure relationships and set up templates.

Now your content model is ready to use.

How to Create a Content Model on Strapi

It's time to get your hands dirty. In this demo, we're going to model content for a blog using Strapi. If you follow these steps closely, you should be able to successfully implement your content model. If you face any challenges, do not hesitate to drop your concerns in the community forum.

Step 1: Identify potential content types and their attributes

Since we're building a blog website, the possible content types include articles, author profile, etc.

Next, we list the attributes of each of the content types we've identified. What do users expect to see when they read an article or view an author's profile?

  • An article will typically contain:
    • a title - what the article is about
    • a title image (optional) - users find graphics engaging
    • an author - who wrote the article
    • date published - how recent the article is
    • content - the body of the article
  • An author's profile will contain:
    • the author's name
    • the author's picture (optional)
    • a brief biography of the author

Content Model Diagram for a Blog illustrating content types and content attributes

Step 2: Create a new Strapi project

If you haven't already, follow this guide to install Strapi and create a new project.

Step 3: Set up content types

After your project is created, navigate to the admin panel of your Strapi project (at http://localhost:1337/admin). Log in using the credentials you provided during setup.

Once logged in, follow these steps to create a content type:

  • Click on "Content-Types Builder" in the left sidebar.

  • Click on "Create new collection type".

  • Enter a name for your content type, e.g., "Article".

  • Add fields to your content type by clicking on "Add another field". For example, you can add fields like "Title" (type: text), "Content" (type: rich text), "Author" (type: relation to the User content type), and "Published Date" (type: date).

  • Save your changes.

  • Repeat the above steps to create additional content types as needed, such as "Author" or "Category".

Content model for article created on Strapi

Step 4: Define Relationships

To define relationships between content types:

  • In the Content-Types Builder, edit one of your content types.

  • Add a new field of type "Relation" and choose the related content type.

  • Save your changes.

  • For example, you can add a "Category" field to your "Article" content type to relate each article to a specific category.

many-to-many content relationship

Step 5: Populate Content

Now that your content types and relationships are defined, you can start adding content to your Strapi project:

  • Click on "Content-Types Builder" in the left sidebar.
  • Click on the content type you want to add content to (e.g., "Article").
  • Click on "Add New Article" (or the equivalent button for your content type).
  • Fill in the fields with the relevant information.
  • Save your changes.
  • Repeat the above steps to add content to other content types and create relationships between them.

There you have it! You've successfully created a basic content model using Strapi. You can further customize your content types, add more fields, and define more complex relationships as needed for your project.

Please check out the Strapi documentation on the content-type-builder for more details about how to configure each content type.

Conclusion

A well-structured content model is an investment in your users' satisfaction. When users can easily find the information they seek and navigate your website or app intuitively, they're more likely to stay engaged and return for more. Strapi's flexible and user-friendly platform makes it easy for you to model your content and create engaging digital experiences for your users.

References

  1. https://www.smallbizgenius.net/by-the-numbers/ux-statistics/
  2. https://lapope.com/2023/12/09/content-modelling-and-structured-content-the-basics/