Getting the most from your CMS: Design Systems

Design Systems | Getting the Most From Your CMS

A content management system (CMS) can be a significant investment of time and dollars. The key benefits are that it puts content editing in the hands of the people who are experts in that content, and that developers can work more efficiently to create one set of functionality. Those benefits only materialize when the right resources are in place. In this CMS Foundations series, I’ll explain the most important elements and activities to help you get the most from your CMS.

A design makes your website attractive, professional, and memorable. A design system does all that PLUS creates efficiencies for your development team, eases governance, and empowers your editors.

The need to implement a solid design system has been one of my personal crusades over the years. As content management systems have become more widely used, and CMS-based websites have become larger and more complex, my soapbox just gets taller and taller.

What’s a design system, anyway?

Design systems take a few forms and go by a few names (my current favorite is Atomic Design). At its core, a design system is really just a library of design elements, and guidance on how to put them together.

If you’ve ever looked at your website and thought, this looks like a patchwork quilt instead of a professional digital property, you need a design system.

This sounds like a style guide. We have one of those already.

Great!

You still need a design system.

A style guide tells you what each individual piece should look like. Some style guides don’t even go that far – they’re more like brand guides that explain how to use the logo, what colors are permitted, what font families to use, etc. They describe individual elements, but not how to put them together.

If the ultimate goal is to enable people from all over the organization to create collateral, you need to be more prescriptive than that.

Let’s look at an example. Say your style guide describes buttons – color, size, shape, etc. You may also design what a text field looks like in a form.

If you set content editors loose to create whatever forms they need, you’re likely to wind up with all kinds of different things.

Not only have your editors likely spent more time designing their own forms than they needed to, but every form on the site looks different. That causes confusion for users, and puts forth a less than totally professional appearance.

A design system will not only describe the button and the text field, but also instruct editors on how to assemble text fields and buttons into a form. That ensures that each form is laid out in a cohesive manner.

So how does a design system help?

At the top, I said a design system would create efficiencies for your development team, ease governance, and empower your editors. Let’s look at those benefits and how they come about.

Development efficiencies

Your development team is tasked with creating templates and components for your website. That means the more templates and components you want, the more work they have to do. A design system can simplify your component library by addressing core needs and specifying patterns that will work for a variety of needs. Developers create a smaller set of components – and better yet, maintain a smaller set of components.

Easier governance

Let me tell you a story.

Once upon a time, I managed a website with over 100 content editors on five continents. There was a style guide, but executive leadership chose not to invest in a design system. Our templates were fairly open-ended, so that editors could determine how best to meet their needs.

In theory, that meant editors could create pages that presented content in the best way possible for that content. In reality, it meant that ten different pages, even using the same template and pulling from the same library of components, would often look quite different.

Customers got confused, because important information wasn’t always in the same place on every page. I got frustrated, because I know that consistency is important for both usability and professional finish.

Trying to keep the site looking consistent and cohesive was an exhausting, and losing, battle. There were simply too many people with too many options, and no guidance on what to do. With no design system in place, there was no “rulebook” I could point to when asking editors to change their pages.

A design system would have given everyone a set of guidelines on how to use which components in what places. Editors still would have deviated, of course, but it would have happened far less frequently. Additionally, I would have had a much easier time correcting those deviations.

Governance may not be a big issue for a ten-page website, but for a larger, CMS-based site with multiple editors, sub-brands, and languages, it gets very tricky very fast. Design systems mitigate governance headaches.

Empowered editors

My content editors weren’t all doing their own thing because they were jerks. They were simply trying their best to make the website work for them and their content.

As confused and frustrated as customers were with the varied page layouts, editors were just as frustrated. Many of them complained that the templates and components, as provided, didn’t meet their needs. Many more simply couldn’t figure out how to arrange the page they needed, and spent way too much time on what should have been simple tasks.

My team put together reams of documentation and provided lengthy, often one-on-one trainings for editors. Even then, many editors struggled. Without clear guidance on what components to use when, they had to guess at what would work. And different people guessed differently, leading to the wide variety of layouts and visual appeal.

A design system would have streamlined the templates and components. Training and documentation would have been smoother. Content editors would have had the tools in place to do their jobs much more easily.

A design system is more than just pictures and colors. It’s a framework that lays out every piece of the design puzzle and provides instructions on fitting them together. If implemented properly, it involves not just a designer, but also input from business areas, IT, and brand. It takes a little more time and money to set up than just “jumping in”. But it will save so much time, money, and headaches down the road, and result in higher quality all around.

Posted in CMS and tagged , , , .