To CBD, or not to CBD, that is the question

Welcome back to the 3rd episode of this “What does a content designer do?” series!

We’ve talked about content inventory, information architecture, and today we’ll talk about… drugs!

A very common thing for me to work on is CBD.

Whenever I say that, I pause for dramatic effect before explaining it’s unfortunately not that type of CBD, but it stands for Content Block Diagrams.

While this brings joy, to my displeasure, it doesn’t bring much clarity and I have to explain what a Content Block Diagram is.

A Content Block Diagram outlines content hierarchy using pre-defined elements (for example, WordPress blocks or design system components) for a key page or user flow.

Coffee, definitions, and why we need CBDs

Imagine going to a new coffee shop and they start making your coffee without getting your order.

It’s not uncommon for companies and design teams to move immediately to visual design whenever a design need is identified which feels an awful lot like that scenario above.

“Visual design aims to improve a design’s/product’s aesthetic appeal and usability with suitable images, typography, space, layout and color.”
– The Interaction Design Foundation

Not every company has dedicated content or user experience professionals, but virtually every company has a designer.

You’ve likely encountered UX/UI designer job postings in the wild regardless of the industry you work in. For context, UX refers to user experience and UI refers to user interface.

They are separate jobs with two sometimes overlapping (tools used, cross-functional collaboration, shared end goals), but very distinct skill sets. If it were up to me, I’d name user experience (UX) the umbrella term that encompasses subspecialties like content design, user research, and visual/UI design.

To summarize, it’s understandable that content and user needs are overlooked considering:

the suboptimal levels of acronyms (too high) and standardization (too low)
not every company has dedicated content or user experience professionals, but virtually every company has a visual designer
many design hires are UI designers focused on images, typography, space, layout, and color.

This leads to wasted time and effort (engineers build something that isn’t needed, designers create pixel-perfect interfaces that aren’t needed). I hate this because it causes frustration and a general feeling of malaise in the team when repeated WHILE being simple to avoid.

✨ Enter CBDs ✨

How to do a CBD

Keep it simple – Google Docs or Miro work well, but whatever tool the team already uses works better.
In hierarchical order, list content you think should go on the page.

For example, a CBD for a Contact page will look like:

Contact information (email, phone number)
Contact form
Map (showing closest location)
Availability/Working hours
Social media profiles
Quick links (i.e., if most contact page inquiries you get are job-related, you would make users’ lives easier by linking to the Careers page)

a Content Block Diagram example for diseases in Miro — Another CBD example for Diseases

3. (Bonus) Specify which content blocks are manually curated and which are automated. If you have pre-defined existing elements like WordPress blocks or design system components, use the most suitable variation for each block.

In the Diseases CBD example above, Diseases (maroon) is a level 1 item in a sitemap for a health services provider. Cancer, diabetes, and other diseases (maroon-outlined) are level 2 items. Users would have to interact with Diseases, the L1 item, to see the L2 items. The Content Block Diagram lists content hierarchically and can be reused across diseases since they will all have related tests, services, and team members.

Manual content and automated content are displayed differently in the CBD. For example, we’d want to publish the latest breakthroughs in News and specialist profiles in People, but then administrators would have to manually copy and paste news in all the relevant disease or subspecialty pages. They’d have to manually copy and paste the specialist profile in all the relevant disease or test pages. To add to that and misquote Adam Smith, “the real price of every thing, what every thing really costs to the person who wants to acquire it, is the toil and trouble of maintaining it.”

Without getting too much in the weeds of editorial experience improvements and time saved, through established relationships in the Foundational Architecture, administrators would only have to map content types like tests, news, or team members once, and they’d automagically appear in every relevant spot. This type of information is known as structured content (treating and classifying content like data) and it’s displayed differently in the CBD.

4. Repeat this process for every part of the flow (form submissions, confirmation/thank you pages, error states).

5. Share with the people you work with – engineers, product managers, researchers.

6. Make revisions based on team feedback and user insights (through analytics or research).

CBDs don’t replace design. They’re done to save design and engineering time and effort. Sharing early and often allows you to switch gears if needed.

When providing feedback on CBDs/doing content crits, focus on:

Does the proposed content hierarchy make sense? Were you surprised by a specific block’s placement (overprioritized/not prioritized enough)?
Does the content hierarchy reflect key user needs?
How does this CBD help meet key business/product goals (like simplifying onboarding to reduce churn)?
Does the page provide too much, too little, or just enough information?
Does this content hierarchy raise any editorial (we don’t have enough people to write all this content or answer incoming questions), technical (we don’t have a Web Map Service Provider or a map component yet), or legal concerns (to show the closest business location on the map, we need to set tracking cookies to collect user data like their location which means we need to update our privacy policy)?

Copy first vs design first

You can absolutely have dedicated content design professionals on the team and still hear things like: “Lorem ipsum, team, let’s focus on the interface first, then we can get the content person to add the copy when the UI is finalized and we feel 100% confident about interactions and colors and button styles.”

This doesn’t help anyone but disproportionately harms content roles if we’re an afterthought rather than key members designing the experience with words together with visual designers and researchers. This is the main reason behind the discipline’s rebrand (content strategy → content design), becoming part of the design process, helping shape it with strategic content design.

CBDs vs PDDs vs Content hierarchy vs Wireframes vs Component mapping

Page Description Diagrams (PDDs) are similar to CBDs, but their main aim is helping with content production workflows/figuring out what needs to be written. Since these include the actual content that will exist on a live site, they’re usually done in a document format.
Content hierarchy or content layout are both valid terms you might encounter when looking at a CBD.
Wireframes are the middle ground between content and visual design, often shown as clickable/interactive prototypes in Figma. Companies have different definitions of done for wireframes with some expecting them to be polished and ready for development. CBDs are not dev-ready 🙂
Component mapping is the furthest thing from CBDs on this list. This process, often referred to as block mapping in block-based building environments (like WordPress), includes creating a list of all current blocks/components (usually in Figma) and the new blocks/components they will be updated to in the future. Component changes may include visual updates (#FFFFFF is no longer our primary color, #E5E5E5 is) or functional updates (our updated interest calculator takes into consideration this new law).

Final thoughts

A common misconception about content designers is that we write a lot of words, create content, and generally add to the world/product. The opposite is more often true.

The term “content creators” implies the existence of content destroyers who are they where are they.
– a top tier tweet (rip) that I can’t find the source of

What being a content designer often feels like

I strongly feel that most of the value we bring is around all the words you don’t see that we advocated against. There is SO much content on the internet and many well-meaning stakeholders want to have ALL their team’s content visible to everyone, at all times because “it’s very important.”

I’ve used CBDs in all types of industries (education, finance, healthcare, manufacturing, tech), and while they’re not visually enticing, they:

help align (or spot any major misalignments between) internal and external stakeholders on key goals
lead to more productive conversations by focusing on high-level priorities rather than button colors, typography, or animations
make it easy for stakeholders to provide feedback (block #8 should be #1 or #2)
save budget/time/effort by allowing the team to pivot easily to an updated hierarchy or a new flow

To CBD, or not to CBD, there is no question. *puts money in cliché jar*