Design pattern library for uhc.com

The goal of this guide is to ensure a consistent and positive user experience for visitors to uhc.com and to document the available components in AEM for uhc.com and its tenants. It will help assure that business units can focus on key metrics and goals without concern about variations in implementation on the site. It will also allow designers to develop expertise around the key aspects of the visual look and feel, so they can use the design elements to truly engage users and help them accomplish their important tasks with success.

When to use

  • Creating new content for uhc.com AEM sites

  • Editing existing content for uhc.com AEM sites

When not to use

  • As a step-by-step direction on how everything will work or look

  • As an enterprise-wide design system

Design ecosystem at UHC

uhc.com supports and promotes solutions that embody the UHC brand and core principles while keeping in mind all the best practices for digital and responsive design built using Adobe Experience Manager (AEM). Learn more about how we Design with Care on the brand standards site. The design pattern library for uhc.com uses the Abyss Enterprise Design System as their north star and ingests components directly when we can.

uhc.com is under the enterprise AEM cloud and contains a few tenants within their AEM site architecture that include:

  • Global navigation across all LOB sites
  • Retiree
  • Group sites
  • IFP ACA site
  • E&I marketing landing pages
  • Medicare Advantage member resources

This is a separate AEM site architecture then M&R, C&S and UHOne. Which ultimately means that the uhc.com/dpl cannot at this time share or link it’s components directly to sites outside of their AEM architecture. There are a few tools and micro-apps linked within the uhc.com ecosystem that are outside of AEM and directly ingest Abyss Enterprise Design System, those include:

  • Healthsafe ID (HSID)
  • Redetermination wizard

Guiding principles for uhc.com/dpl

  • Be aligned as possible to styles and components from Abyss
  • To support designers using the uhc.com/dpl Figma library
  • To support authors as a style guide of pattern application and usage guidelines on uhc.com/dpl
  • To support authors and developers with usage guidelines and links for further information on enterprise design system sites
  • To ensure that language and components between Figma and AEM are in sync as possible

Related elements