.com Experience Library

Design Systems & libraries

The .com Experience Library (XL) came to life in early 2021 as a way to unify designs in production and in Figma, and allow time spent in the program to be utilized for creative purposes rather than maintenance & housekeeping.

How do you help interdependent, cross-disciplinary teams understand and appreciate multiple nuanced mediums? How do you overcome systemic barriers to those teams’ communication and collaboration? How do you funnel an expansive design system into a rigid content management platform?

You build an experience library.

When I began working at H&R Block in October of 2020, the .com design team was essentially an island. We didn't find out how our pages would become live until after we'd already handed off our Figma files. We'd never spoken to the team building the site in Adobe Experience manager, and we'd certainly had no idea they were restricted to specific components already coded by developers. We needed a solution that would help us understand how the authoring team was building in AEM, what we were currently capable of creating, and how to communicate about the available components.

Shortly after the live site launched in January of 2020, we realized the first step to better understanding was better communication. Opening a line of communication via Teams group chat with our authoring team enabled us to gain insight into their process and find a way to mimic it in our own medium. This shift brought about more positive changes to the .com design process than I originally could have imagined when I first began tinkering with variants in Figma.

Aligning the design and authoring process enabled our design team to:

  • Create an organized, centralized system to document brand and BDS application on .com

  • Minimize time spent copying and pasting

  • Make rapid, accurate changes to background color, layout, images, and typography

  • Create a drag-and-drop design experience similar to AEM to understand module capabilities and limitations

  • Enable easier outsourcing of .com work

  • Quickly build or recreate pages at different breakpoints

  • Unify components across H&R Block-branded sites that use the same AEM framework, specifically blockadvisors.com

  • Test the limits of variants in a design system

In June 2022 when I left the .com team, the Experience Library contained 335 components and 35 variants.

Team

Kenzie Tubbs

Haley Mitchell

Jose Arellano

Trevor Stark

my contributions

  • Developed library organization and majority of components

  • Standardized additional break-off libraries to allow for outsourcing of work

  • Created naming conventions and variant property hierarchy to allow for easier use of components

  • Continuously manage buildout, changes, and publishing of new and existing components