If you’re like many other UX designers who are new to the Experience Manager (AEM) world, the idea of unleashing your pixel-perfect designs into the wild west of content authoring can be daunting. The user experience has gone through many rounds of revisions and feedback to finally reach a perfected version ready for launch. And yet, a new role will be modifying this same experience. How can we be sure the marketing team will maintain the integrity of the original designs?

As UX designers, our requirements are not unreasonable: We need to maintain the brand integrity, and support usability and accessibility for our site visitors, all while reigning in consistency across page layouts. In order to maintain that, designers will typically lock-down component capabilities and responsive behavior — potentially limiting content authoring to simple copy & paste tasks. Credibility is on the line, so requirements are created to guide the quality control of the published content.

But, this is actually creating challenges that impact the time it takes for content editors to edit and publish new pages (The industry term being: Content Velocity). Any change beyond text or image URLs requires development team effort. And as the business needs evolve over time, a larger component library grows — potentially causing even more development overhead to manage. So how do we find a happy balance?

This requires a mind shift in how we approach design. Designing for Experience Manager is a lot about process and governance strategy. You have a new user, a content author, who is also interacting with your defined experience, but now on the flip side of the user interface (behind the scenes in CMS platform). We can set them up for success, while keeping our design principles in mind by following 3 key strategies…

1. Educate UX and front-end development teams on constraints within AEM

First, we need to understand the technical nuances of the platform. There are specific features that content authors interact with, and how we break out our designs into components (and structure front-end code) will affect the scope of development work to support them.

Core components will be our starting point when defining a component library. AEM Core Components provide pre-built code and authoring configurations, helping to limit custom development. They are also built around common elements found in design systems, such as a title, teaser, button, text, and accordion. As a designer, you’ll want to match your design system to AEM core components — this way you can be confident your designs will reduce development effort and be AEM friendly.

With style system, we have another AEM feature that content authors use to toggle visual variants for a component. The functionality behind this is that the component uses a single HTML structure, and as a content author selects each option in the drop-down menu, a CSS class is toggled at the top-most div for that component. The power of this style system capability is dependent on your front-end developer’s CSS skills, so work with them to help identify style system usage to support reusable components.

2. Design and content creation is a team sport

Experience Manager embodies content velocity. Content on a website is always changing… new campaigns going into market, landing pages created, new products launched — these need to be published as easily and quickly as possible and features in AEM are built to support these creative workflows. As we set restrictions to align with design requirements, this will have an impact on the authoring experience.

A specific AEM role called a template editor, creates an opportunity for content and design teams to collaborate on defining component usage and page layout standards. Editable templates are a key feature in managing reusable page layouts. Content authors no longer have to rely on developers to create new templates –in turn, reducing development workflow timelines. Through policies, template editors have the ability to set what components are available on a page, define style system options, and even responsively resize components.

As designers, we can work with template editors on setting up the responsive framework — what are the defined breakpoints, and what is the responsive strategy for managing content across devices? Setting up content authors with the flexibility to change a card tile component from 3 in a row to 2 in a row supports changing business needs and reduces development dependencies.

This also begs the question, who is managing the design system and component usage guidelines? This is an opportunity to work with content authors to create a governance strategy for templates. Specific components or styles may only be used for specific brands or sub brand pages. A template editor can set up these policies to restrict what components are available to authors, as well as what brand styling can be applied.

There are many use cases and rules to setup with template editors, and in fact, this person should be aligned very closely (or might be the same person!) with who manages the design system. The same rules should be known by both consumers of the design system, as well as consumers of the AEM component library. Tools are available to capture these usage guidelines in the design system world, including Zeroheight and Frontify.

3. Empower content authors to support design principles

Design systems have been a powerful tool for alignment between UX teams on design principles, brand standards and component libraries. Why not include content authors as part of the documentation audience? AEM is another manifestation of your design system — set up your content authors for success by enabling them with the best practices already defined for using your component library.

Design system documentation is a powerful tool to share your team’s design principles and school of thought. While many restrictions such as character limits, or image sizes can be built in by the development team, placement can be more relative. While a hero component may be built for the purpose of showcasing teaser content at the top of a page, no development restricts a user from placing 7 hero components on a single page. Design system principles can help to define proper component usage to content authors.

Continue to improve by following the same principles you use for end-users — gather feedback and revise. Understand how your content authors are interacting with components compared to business needs. Do the authoring options provide enough flexibly for new marketing requests? Is a component taking too long to configure due to complexities in the authoring options? How frequently do they need to edit this component? Something like an accordion component may seem simple and straight forward to design, while a content author may have to edit each icon, title, description and additional copy for each section. The time it takes them to edit and revise a component may outweigh the benefit of using it to display the intended content.

A successful approach in designing for Experience Manager is a more inclusive process. If we’re following a user-centered design approach, why not include content authors? By understanding their experience, their pain points, and their goals, designers can make decisions that support buy-in from both the content marketing and development teams. We can enable content authors to support the same design principles — and trust them to be part of the design and content delivery process.

A special thanks to Jay Ganaden and Tor Gunderson for their continual support in improving design workflows for XD & AEM!