Rethinking Reusability with AEM Customizable Template Systems

One of the most attractive long-term values associated with the Adobe Experience Manager platform websites is the publisher’s ability – through user-centered UX, component libraries, and drag-n-drop authoring – to reuse templates and content for new, customized websites again and again – at a fraction of the typical cost and time, satisfying an enterprise organization’s need for a galaxy of unique published sites.

Organizations that publish websites for several product-lines, service departments, franchise properties, or member-generated mini-sites to name a few, should take special advantage of the flexibility and reusability of Adobe Experience Manager customizable templates. The following is a brief discussion centered on the benefits of rethinking reusability at the enterprise level.

Download Blue Acorn iCi’s “Amplify the Customer Experience with Analytics” whitepaper to learn how you can use analytics to enhance the entire customer journey.

Aligning business goals with content and functionality

The first critical step to taking full advantage of Adobe Experience Manager’s template reusability is to carefully discover and define business goals and ensure they align with the planned template sites’ content and functionality. What do users need to do? Will the sites offer interactive contact forms, login and profile pages, multimedia presentations, frequently updated prices, social media plugins, etc.? Once these and other identified user needs are answered through user testing, a well-focused picture of template layouts and relevant components comes into view. Not only does this ensure that future sites will perform for customers as needed, but it saves design and development costs in the following stages.

Defining component libraries and mapping their UX functionality

The next important step in creating the most accurate and economical family of sites is to assign Adobe Experience Manager custom components to meet all future publishing and authoring needs of the central organization and its satellite units.

Blue Acorn iCi has already built an extensive library of ready-to-deploy Adobe Experience Manager components that can be easily accessed and adopted for the new website template system. For a current client, we engineered components for such functionalities as: language selection, online reservations modules, ecommerce plug-ins, multimedia embeds, social media feeds, interactive email subscribe and contact forms, image galleries, and many others.

The upshot of establishing this ready-to-drag-n-drop component library is that a. the prototype site(s) can be designed and developed more quickly and efficiently, and b. future authors can create new websites (using the approved template) in a very short time (often a day or so) that conform to corporate content standards.

Setting up shared DAM for all customized sites

As part of completing the multiple website system, it is next important to set up a single repository DAM (Digital Asset Environment) where all content (images, videos, .pdfs, etc.) can live, always accessible, and editable by any assigned author. The DAM can be organized to mirror the organization of template sites in the neighboring sites tree. This way, a future author can easily track which assets belong to each website without having to comb through an entire system-wide collection, saving time, and increasing updates accuracy.

Template / Layout flexibility creation

Once business goals are aligned with component functionality and DAM environments, creating one or two alternative template layouts for all websites becomes the next imperative.

The best approach to this begins with creating a master template (not to be published) in wireframes that expresses every possible functionality, pattern, and content element. This provides a ‘maximized master’ map where future authors or coders can refer to what is possible when publishing needs change. From this, creating flexible template alternatives that will be used to publish typical site instances becomes a matter of addition by subtraction.

For our travel & leisure client, Hyatt Corporation, we architected a flexible, but standardized layout that satisfied almost every individual site’s need in their enterprise. This started with a standard placement of main navigations, footers, home page header immersive photography areas, headline overlays, promotional call outs, contact CTAs, and copy placement. Each supporting page of the site was then architected to present its intended content and service provided consistently. The end result: an approved set of page layouts that can now serve as the stage for speedy custom design and content choice on a site-by-site basis.

UI and custom branding

One of the great benefits of the Adobe Experience Manager platform versus other less-agile enterprise platforms is its happy accommodation of custom user interface (UI) and brand design. To the point, once approved active layouts are in place on the system, designers can work at a deep level to customize the look and feel of the site – without disturbing content requirements or layouts.

For over 4 years, our designers have been creating custom-branded interfaces over approved template systems for clients in national education programs, global manufacturing, professional services organizations, and global hotel brands like Hyatt. A good, AEM-experienced designer can quickly manipulate areas of the site like masthead, navigation, trademark, background images/color/textures, content color palettes, custom JS interactions, parallax movement, and more. The end result is a site that shares its structure, content placement, and functionality with its sister sites, but looks completely unique (to that product, location, or sub-brand).

Finally, though a site may appear uniquely custom-branded to its users, to the organization’s authors this easy-to-learn design system and standardization means a high degree of efficiency and confidence working within any customized site at a fraction of the cost and time required with other environments.

Systematized HTML / CSS modifications / Custom functionality

Another time-saving benefit comes in the development phase. Front-end developers can re-use existing style sheets and code chunks in each iteration of a site template to conform to the creative and content requirements of the unique site. As experience and exposure grows, the FED can move quickly through slicing art files, referencing prepared photography, applying branded colors, and placing copy where needed. Often for our global hospitality client, the development phase (without QA) is completed in less than two business days.

Rapid authoring and personnel succession

Once successfully launched on an enterprise-scale, the new websites should all exist on a shared instance of the AEM platform / group accounts. Permissions can be set for groups and individuals to maintain strict governance over when content is updated, and by whom, as well as recovering past iterations when needed.

Apart from the cost savings of publishing re-usable AEM template sites, and the savings associated with rapid (centralized or disseminated) authoring, this solution ensures that future on-boarding of authors is quick and easy – mitigating the risk of published site degradation due to personnel changes.

In summary, time and past successes have proven there are many tangible returns on investment in publishing customized template sites on the AEM platform. Leveraging features like proven component libraries, digital asset management repositories, flexible content and functionality templates, customized branding and UI design, API-generated content, and even interactive movement options can mean succeeding at connecting with customers and providing the online services they seek – all at a lower cost than publishing on a less robust and flexible platform.

Need help implementing or optimizing your Adobe Experience Manager platform? We can help. Contact us today to speak with your team of experts.

Ci