The Problem
Adobe Experience Manager (AEM) has powerful features and has the ability to create multiple webpages on one instance of the platform. This gives Designers and Content Authors incredible flexibility to create designs and content when needed with minimal support from Development. However, this is not always easily implemented as designers and authors often run the risk of:
- Designing pages in isolation
- Duplicating components and non-shareable code – thus a bloated the AEM system
- Creating silos of independent designs and webpage messaging
The problem in a nutshell is that one AEM Design System Language did not exist.
The Solution
- The solution was a design system, based on Atomic Design principles that grouped common elements into one cohesive Design System Language (DSL). The creation of a consistent and designer-author-friendly AEM component library was critical to the success of this DSL
- This solution would allow Designers and Content Authors to quickly and effectively build out and edit new websites, apply style and authoring, without touching the AEM core components
THE GOALS
- Establish a common UI & authoring language, using AEM components as the linchpin
- Streamline the AEM Component, Experience Fragment and Page Template structure
- Improve the UI quality and brand consistency of the website
THE CHALLENGES
- The website UI Design was dated, inconsistent and lacked clear brand guidelines.
- Component structure was haphazard, duplicative, and lacked design and use case consistency.
- Lack of Brand Consistency.
- Need to conduct an audit of AEM components and determine whether to retire, use, refurbish or create new components.
MY ROLES
- Conduct an AEM Component Audit; Document inconsistent, obsolete, ineffective AEM components and Experience Fragments, as well as identify opportunities for component improvement.
- Define AEM component needs based on UI designs.
- Create wireframes and UI design of the elements, templates, components, pages with different screens following functional criteria and guidelines.
- Work with Development to transform complex ideas into simple visual and working form.