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. 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 acts as an independent branch of Abyss Enterprise Design System.

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

  • uhc.com
  • Retiree
  • Group sites
  • E&I marketing
  • IFP Exchange

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 terms and components between Figma and AEM are in sync

uhc.com/dpl Figma library

Please reach out to grace.deck@uhc.com if you need an invite to the Figma library.

Connecting to the library

  • In the top part of the left panel click the open book, “Team library” icon
  • This will open a modal with tabs, go to the “UHC Design” tab
  • Find the project “uhc.com” in the list
  • Toggle on ”uhc.com DPL”
  • If you are not seeing any of these items available, you may need an invite to the org or an invite to the uhc.com/dpl

Components

Components are found in the left panel under “assets”

  • Brand elements folder: icons, logos and spacing
  • Page layouts folder: pre-made art-boards of available page layouts
  • Component list:
    • 🔴  not available yet, under consideration
    • 🟡  available soon, or available but there’s an enhancement in development
    • 🟢  available, stable
    • -🌊  Abyss component

Styles

Styles are found in the right panel when certain elements are selected.

  • Text
  • Color
  • Effects
  • Grid