• White LinkedIn Icon
  • White Instagram Icon
  • White Twitter Icon
  • White Facebook Icon

© 2019 Will Hare

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