Drawing on Adobe Experience Manager for More Powerful Design Systems

Schedule time with Alex at Adobe Summit to learn more about unlocking the power of design systems.

As the buyer journey evolves, digital touchpoints proliferate, and new technologies come to market, content creators must internally prioritize collaboration and efficiency. Externally, we have to ensure brand awareness, consistency, and recall.

This ongoing evolution poses challenges like branding inconsistencies across devices and channels — and is even more pertinent to large, multi-brand organizations. How can brands ensure reliable, recognizable digital experiences across a portfolio of 10 different brands operating on a dozen different channels? What about 50 different brands on hundreds of channels?

One way to remedy these challenges is by implementing a design system through Adobe Experience Manager. AEM centralizes your firm’s digital content through its enterprise digital asset management (DAM) and streamlines your content creators’ workflows through Adobe Creative Cloud and Workfront integrations.

These are WillowTree’s best practices for building design systems in Experience Manager to increase collaboration, consistency, and efficiency as we deliver the premium experiences our consumers crave.  

But First, What is a Design System and What Are the Benefits?

Design systems are a set of principles, foundations, and customizable components for designers and developers to create and optimize digital experiences. They ensure consistency and rapid scalability, whether across one brand or many different brands under one umbrella.

One of the most common ways to structure a design system is called atomic design. Like tiny atoms forming slightly larger molecules, atomic design involves layers that progressively build on one another.

These building blocks become the foundation of an effective design system:

• Atoms: the smallest interactive and displayable pieces (buttons, input fields, labels, or icons)
• Molecules: larger components made of atoms (search bars, menus, or individual products)
• Organisms: the largest components, comprised of atoms and molecules (header navigation, footer, hero, product collection)

An imagined car brand’s atoms, molecules, and organisms might look like this:

‍

Through design tokens, we can translate design into data, allowing large brands to quickly scale atomic components across their brand portfolios. Tokens contain the data values needed to build and update design system elements, including spacing, color, typography, object styles, animation, and more.

Most large, multi-brand organizations we work with already leverage a design system containing design tokens — and for good reasons. Based on our work and others’ research, we’ve seen successes that include:

• Speed to market increases up to 90% because devs and designers can more rapidly build and publish new screens and pages.
• Consumers encounter fewer UX bugs because design system components are individually tested for quality assurance.
• Design velocity increases up to 700% because design sprints are more efficient and most challenges can be solved with existing paradigms and components.

And yet, it’s not always easy to harness the speed and premium performance design systems offer. Organizations can encounter low adoption and inconsistencies as systems get larger or teams get allocated to new projects.

Here are the best practices we've uncovered as we've helped the world’s biggest brands build AEM-hosted design systems.

Best Practices for Building Successful Design Systems Through Adobe Experience Manager

1. Construct your design system to match your intended users.

Oftentimes, design guidelines don’t account for the needs of developers and content teams, resulting in low adoption rates and distrust. Define your internal audiences (e.g. product designers, content authors, and Experience Manager developers) and include them at an early stage as you build your design system.

Our partnership with John Hancock Investments exemplifies this approach. We built a net-new, custom financial product catalog called Maestro, as well as a new design system architecture we applied across the John Hancock Investments enterprise. Built on Adobe Experience Manager, the system serves 12+ different websites and includes 80+ reusable components on flexible templates.

We knew content authors would be key users of the new design system, so we tailored capabilities accordingly. One benefit AEM offers content authors is to publish content modules targeted to global regions and business units, ensuring consistent branding and user experience regardless of function or location.

‍

With help from Maestro and its new design system, John Hancock Investments saw a 100% increase in monthly active users and pages per visit, a 35% increase in organic site traffic, and a 50% decrease in bounce rate across sites.

Prioritizing inclusivity ensures that you meet each team’s distinct needs — increasing user adoption and system longevity.

However, while we should strive for inclusivity and flexibility, we don’t want our system to bend so much that it breaks.

2. Find the right balance between guided vs. custom capabilities.

If we enable an authoring experience that is too customizable, the result can be inconsistent, unstructured CX. For every design system, consider how guided or templated a content author’s experience should be, versus how custom it could be. The more components available to an author, the more freedom they have in content editing and creation.

Do you need each Experience Manager Site to follow the same guidelines or layout due to an extensive, diverse product portfolio? Or should content authors and web developers be able to dictate custom web layouts according to individual consumer needs?

Let’s consider our design system work with Marriott: sales advisors needed a way to rapidly build custom presentations to pitch properties to high-net-worth clients. In this instance, a highly templated solution wouldn’t have offered the personalization this clientele seeks. Instead, the design system we incorporated into another new-to-market solution — Sales Companion — provides advisors with the compelling and impactful personalization they need in pursuit of high-value deals.

‍

By thoughtfully building Sales Companion to meet the ever-evolving design needs of its users, the product is projected to drive $563 million in revenue and has garnered 1.6 million sales proposal views in one year.

Once you settle the debate between what’s guided vs. custom, you can begin to duplicate your design pipeline.

3. Structure a repeatable design pipeline.

Establishing a design system requires collaboration between design and developers, whether it’s your first system release or your 50th update. To increase velocity and reduce errors, your teams need a process and pipeline that sets clear expectations about how design system components move from concept to launch.

Here’s what that process might look like:

1. Design teams mockup components in Figma — working out details such as color, spacing, and interactions — and version the design system through feature or component branches (similar to Git).
2. If updates are needed, designers can use Figma variables to automatically apply changes wherever those variables appear in design components.
3. Components are documented and reviewed by engineers, product owners, and content authors.
4. Leveraging design tokens, developers can build and synchronize components with designs that are built in Figma.
5. Through an internal widget available to WillowTree’s engineering teams, we can connect design tokens defined in Figma to a GitHub repository. That way, when a designer publishes changes in Figma, a GitHub workflow is triggered that automates updates to design tokens and deploys changes into Storybook. (Working in Storybook provides an isolated environment for developers to collaborate and test states, responsiveness, accessibility, and component limits.)
6. Components rendered in Experience Manager are hydrated by our React component at runtime or via server-side rendering (SSR). (Either method allows for a single source of truth for front-end components and ensures updates take place in one location accessible to designers and developers.)

By duplicating this pipeline each time we create or update a design system, we ensure accurate, high-velocity, high-caliber content.

Let’s Build Your New Design System.

Adobe Experience Manager gives designers, content authors, and developers a powerful set of tools and guidelines to customize user experience. But teams need to know how to wield that power accordingly.

WillowTree’s Adobe Experience Cloud practice combines our expertise in marketing, data architecture, web engineering, digital analytics, and customer experience strategy so you get the most value from your investment in the Adobe ecosystem.

We’d be delighted to connect with you at Adobe Summit to discuss how your organization can activate critical marketing systems to create consistent, individualized, and adaptive interactions.