Will Hare
Design Strategist
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.