Start Designing

info icon

Welcome to the Enterprise Digital Design System. If you’re a designer just starting out, here’s a checklist for everything you need to know to get up and running.

Get to Know the UI Kits

We have multiple UI Kits across the Enterprise. Design teams will likely use multiple sets in the near-term.

  • Enterprise Digital Design System UI Kits
  • Community Platform UI Kits

Enterprise Digital Design System

The Enterprise Digital Design System (EDDS) is our newest primary system that is built upon modern code-bases and practices that are intended to support and scale for the entire Enterprise.

This system offers:

  • Enterprise Sketch UI Kits
  • Enterprise codebases with styles & components that are represented in the UI Kit for Android, iOS and Web
  • Token Architecture
  • A focus on accessibility
  • Supplemental documentation website

Community Platform

We have introduced a Community Platform which will allows pre-existing design components & patterns to be used and maintained while supplementing the Enterprise Digital Design System.

This platform offers:

  • Sketch UI Kits that have currently been in-use across the business units
  • UI Kit name updates for Community:
    • “Aetna Anatomy” renamed to “Community Aetna Health”
    • “CVS UI Kit” renamed to “Community CVS”
    • “CCM” renamed to “Community CCM”
  • Various code bases across the business units and platforms (Android, iOS, Web)
  • A venue for code to be consolidated, centralized and shared across teams
  • Supplemental documentation: Artifacts vary per business unit. Connect with your respective Community Platform design teams for relative documentation

UI Kit Usage

We want to ensure that design teams use the respective library that supports & streamlines your design process as much as possible.

We suggest that you evaluate your feature work and compare that against the current state of each UI Kit type at the beginning of your design initiative or PI.

Use the UI kit type that offers the components & assets that support your product’s needs

  • Use Enterprise UI Kit when possible
    • The Enterprise UI Kit will offer new components, assets and patterns as they are released
  • Until the Enterprise UI Kit supports your product’s needs, it is acceptable to continue to use the Community UI Kits for Aetna, CCM, and CVS

UI Kit Contents

Enterprise Digital Design System

The assets in the Enterprise Digital Design System repository are organized by business unit, platform and artifact.

📁 UI Kits

  • 📁 Aetna
    • 📁 Enterprise
      • 📄 Enterprise Aetna Android.sketch
      • 📄 Enterprise Aetna iOS.sketch
      • 📄 Enterprise Aetna Web.sketch
    • 📁 Fonts
      • Domaine
      • Open Sans
  • 📁 CVS
    • 📁 Enterprise
      • 📄 Enterprise CVS Android.sketch
      • 📄 Enterprise CVS iOS.sketch
      • 📄 Enterprise CVS Web.sketch
    • 📁 Fonts
      • Helvetica
  • 📁 Global
    • 📄 Enterprise Icons.sketch

Community Platform

The assets in the Community Platform repository are organized by business unit, platform and artifact.

📁 Community UI Kits

  • 📁 Aetna
    • 📄 Community Aetna Health Android.sketch
    • 📄 Community Aetna Health iOS.sketch
    • 📄 Community Aetna Health Web.sketch

    • 📁 Fonts
      • Domaine
      • Open Sans
  • 📁 CCM (coming soon)
    • 📄 Community CCM Android.sketch
    • 📄 Community CCM iOS.sketch
    • 📄 Community CCM Web.sketch
  • 📁 CVS
    • 📄 Community CVS Android.sketch
    • 📄 Community CVS iOS.sketch
    • 📄 Community CVS Web.sketch
    • 📁 Fonts
      • Helvetica

You should see the contents in your local sync directory created by OneDrive upon initial sync.

Sync to the UI Kits

Do not download a static version to your machine that is not synced using OneDrive. This will prevent you from receiving regular updates, fixes, and new features. Please follow the instructions below to properly sync to the UI Kit.

Requirements

Tools

  • Sketch
  • SharePoint access
  • OneDrive Client to sync to SharePoint

Fonts

Learn more about installing fonts on Mac OS

Step 1: Visit the UI Kit SharePoint Repo Locations

You will Sync to both Enterprise Digital Design System & Community Platform SharePoint locations

  1. Enterprise Digital Design System: UI Kit SharePoint Repository URL
  2. Community Platform: UI Kit SharePoint Repository URL
browser address bar pointing to SharePoint UI Kits

Step 2: Sync SharePoint to OneDrive

Click the “Sync” button in SharePoint to initiate the live sync via OneDrive

(⚠️ The new “Add shortcut to OneDrive” button should only be used if standard syncing fails. You cannot use both.*)

SharePoint Sync Button
  • This will launch the “Getting ready to sync…” interstitial (this window will not close automatically)
SharePoint Sync Interstitial
  • Click “Open OneDrive” if you are prompted a browser alert dialog
SharePoint Alert Dialog requesting to open OneDrive
  • Syncing will begin automatically and this may take a few minutes to complete
    • It may appear as nothing is happening while syncing - verify syncing with steps below

Where Does it Sync to?

  • If you used the standard “Sync” button, the SharePoint UI Kit directory and its contents should now be available in a unique directory that is different than your normal OneDrive directory:
    • root/users/[userID]/📁 CVS Health/
  • If you used the “Add Shortcut to OneDrive” button, this will add an SharePoint UI Kit Directory alias to your personal OneDrive directory:
    • root/users/[userID]/📁 OneDrive - CVS Health directory/

Verify Sync

You can verify syncing via two methods:

Method 1: Verify Sync Location in OneDrive Account Preferences

  • Click the OneDrive Cloud icon in your Mac File Menu
  • Click on Help & Settings > Preferences
  • Click on the Account tab
  • You should see the SharePoint repo in the locations list
OneDrive Account Preferences with Locations highlighted

Method 2: Verify syncing using Finder sync status icons in your Mac OS Finder which display inline of each file or folder that is synced (clouds, checkmarks, etc.).

  • A blue cloud sync icon indicates the file is synced and available online-only. This is a feature of OneDrive to show what is available, but does not download the file locally until it is engaged with. The lock indicates it is read-only.
Mac Finder with OneDrive Sync icons indicating available online
  • A green checkmark in a circle icon indicates it has been synced, downloaded and available locally. This will display once you open or add the file to Sketch. The lock indicates it is read-only.
Mac Finder with OneDrive Sync icons indicating available locally

You can leave the browser location once it is completed.

Visit Microsoft support to learn more about OneDrive sync icons

Visit Microsoft support to learn more about how to sync using OneDrive for Mac OS


Step 3: Setup Sketch

When OneDrive is completed with the sync process, you can configure your local system with fonts and Sketch libraries.

Add the desired Sketch libraries to Sketch Preferences

  • Open Sketch
Sketch App Icon on Mac being clicked on
  • Go to Sketch > Preferences from the file menu
Sketch application menu with Preferences selected
  • Click on the Libraries tab
Sketch Preferences with Libraries tab selected
  • *Click the “Add Library” button
Add Library button in Sketch Library Preferences
  • Navigate to the desired Sketch libraries in the synced location “root/users/[userID]/CVS-Health/” directory synced to SharePoint, select the libraries you want to add and click “Open
    • Be sure to add the Enterprise Icons.sketch library under 📁 Global, as this supports both Aetna & CVS.
Sketch Preference modal sheet displaying Enterprise Sketch library files
warning icon

If you had any previous CVS or Aetna libraries, remove them from your Sketch Library preferences to avoid conflicts and to prevent usage of unsupported assets.

You are now ready to start designing with our UI Kits! 🎉

Visit Sketch documentation to learn more about adding libraries to Sketch


Library Updates

Receiving Updates via OneDrive Sync to SharePoint

When synced to the UI Kit via OneDrive, users will receive updates automatically.

🚫 You do not need to click “Sync” again in SharePoint once you have already synced.

Requirements:

  • OneDrive must be running
    • The OneDrive cloud icon should be displayed in your Mac File Menu bar for easy access, If you do not see it, you may need to open OneDrive or troubleshoot sync issues
  • You must be authenticated in OneDrive for Mac
  • There should be no error or sync issues on your Mac - Click the OneDrive cloud icon to check status
OneDrive icon in Mac OS file menu

Accepting Updates in Sketch

  • If you are using any symbols that have changed, you may see a notification in the upper right hand corner of Sketch
  • Click the alert to review and accept any changes (it will show you what symbols have changed)
Update Notification in Sketch interface

Sketch Library Version Reference

  • You can always verify the version of the Enterprise UI Kit Sketch library by viewing the Library Preview artboard inside the file or in the Sketch Preferences Libraries list
  • This should correspond with the version in the latest release notes on the documentation site
Screenshot of Library Preview in Sketch with version number
Sketch Preference Libraries list displaying library thumbnail
note: actual version numbers may vary from those pictured

Familiarize Yourself with the Doc Site

The EDDS Doc Site is the storefront for the Enterprise Digital Design System. It contains specifications and usage guidelines for both designers and engineers for Enterprise Digital’s styles and components.

For designers, the Doc Site complements the Enterprise UI Kits by providing detailed information for each component, which includes:

  • Types: All major types for the component (e.g. Primary, Secondary, Tertiary).
  • Usage: How a component should be placed into a design and how it coexists with other elements (e.g. when to use, dos & don’ts, alignment, ordering, grouping).
  • Behavior: Special behaviors or state changes (e.g. loading, graceful degradation, validation & error states, input masking).
  • Visual Style: Although most visual styling is baked into each component, specifications are provided that highlight spacing dimensions around a component or spacing dimensions between atomic components that exists within the component.
  • Accessibility: Requirements and specifications for key characteristics, keyboard/focus expectations, and screen reader expectations.
  • Content Strategy: Assistance with such topics as phrasing, context setting, casing, punctuation, and character count

See component documentation for Web, iOS, and Android

Technical Support

One Drive Syncing

If you’re having sync issues with OneDrive & syncing, check these troubleshooting resources to help self-serve common problems.

SharePoint

For more information about SharePoint visit: Microsoft SharePoint support site

Sketch

For more information about Sketch and how to use it visit: Sketch documentation site

Design Ops

If you’re having issues with access to tools or locations, please contact Design Ops.

IT Support

For technical issues with your Mac, connectivity, VPN, Microsoft tools such as OneDrive and SharePoint, contact company Tech Support.

Design Support

Enterprise Digital Design System

The Enterprise Digital Design System team is here to help! If you have questions about how to implement a component, apply styles, or use a tool, please reach out to us via our request form.

  • In the form, select the “Assistance/training” option and provide a few quick details
  • A member of our team will reach out to you to provide assistance

Community Platform

Please contact your leadership to connect to your respective Community Platform design & development teams.

↑ Back to top