Design Patterns using Adobe Experience Manager
My work in creating design patterns or building components started with the adoption of a product called Adobe Experience Manager or AEM. AEM is a Content Management System that Cisco WebEx decided to adopt in 2015. Like other CMSs out there, AEM comes with some off-the-shelf components that can be used to create webpages. But our approach was to create customized components with built in brand elements for future use and rapid reproducibility.
I volunteered to learn about AEM by attending trainings offered by Adobe, and became the design lead for the gigantic effort of migrating the WebEx.com property to AEM. This entailed building all components needed to re-build the existing WebEx.com on AEM from scratch.
The process was almost a year long, but at the end of the project, we migrated WebEx.com offered in 16 countries to AEM.
AEM component building process at a glance
As shown above, there are 4 broad stages of building a component.
Design:
Identifying the common building blocks of design across pages.
Coming up with requirements for a component that produces that design layout.HTML Development and QA
Developing the HTML and CSS for this layout.AEM Development and QA
Developing an AEM component that enables input for content and assets that develops this layout.Authoring and QA
Finally when the component is ready, the author can input the content and images, and publish the page.
We started with identifying common patterns throughout the website and listing the number of components that we needed to build. At the time, WebEx.com was not responsive, and it was crucial to have responsive designs in place before we embarked on our journey of building responsive components.
Our team came up with responsive designs for all the high traffic pages. This was a huge learning for all of us, since we started realizing the complexities of responsive image sizes, breakpoints, and the requisite device testing that comes with the territory of responsive design.
Once the responsive designs were ready, I wrote the requirements for many of the design intensive components, with tremendous support from my manager and other team mates.
Some sample screenshots of the requirements are shown below.
(click on a thumbnail to enlarge)
Simultaneously, the HTML development team came in and built the responsive pages. After doing a thorough round of QA, we were ready to build our first round of components.
I worked very closely with the AEM development team to ensure all the design requirements were met. It frequently entailed negotiations to stretch the flexibility of components and finding a middle ground that worked for both the design team and the development team.
Included below are some sample screenshots of components we built.
(click on a thumbnail to enlarge)
Finally, all my learnings about the AEM design process and the production details around file and image creation are captured in a guideline document.
Samples from this document were shown below.
(click on a thumbnail to enlarge)
The AEM project turned out to be a resounding success after the initial learning curve. We now have 24 online properties (16 for WebEx.com and 8 for CiscoSpark.com) on the AEM platform.
The components that we built have significantly reduced our time to make changes to our website. We no longer require major development releases to launch new pages.
We continue to improvise and fine tune our AEM components as the needs for more flexible and complex components arise.
Talk @D Zone
I was thrilled to present about AEM and Modular Design at the recent CTG Design Conference in Oslo called D Zone. Here's a link to my presentation and below is a video of my talk.