AEM Column Module/Authoring Improvement

Design Thinking/UX/UI

​

The Need

Our AEM authoring environment had a complicated process for adding columns to a page, including requiring content producers to insert and modify HTML code if they wanted to use 3 columns on a page, with no built-in solution for anything beyond 3 columns. After successfully using inline styles (albeit reluctantly) to create custom column layouts, we saw an increase in the number of requests for similar designs, which reinforced that there was a need to create a better authoring module.

​

Goals

• Eliminate the need for authors without strong HTML/CSS skills to code.

• Simplify the process for adding content

• Combine the functionality of various single-task authoring modules into a single body content authoring module to reduce toolset, instead of a paragraph module, a two-body column module, etc.

• By creating a better authoring tool, we improve internal productivity and aid in the consistency of design standards and content flow, which ultimately provides a better product for the end user.

​

Solutions

• Use current AEM UI and workflows to maintain familiarity with production team, while finding ways to reduce steps.

• Use improved responsive code in the module, including CSS to handle image scaling. All images will be added at a set percentage of its parent column width and scale accordingly.

• Allow for faster experimentation and switching between column layouts.

• Create a more visual menu to quickly visualize different splits in column percentage.

​

View Low-Fidelity Prototype on Sketch Cloud