Start Designing
- May 14, 2021, the Community Platform launched
- April 13, 2021, the new Enterprise Icons library is available, visit the Icons page
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
- 📁 Enterprise
- 📁 CVS
- 📁 Enterprise
- 📄 Enterprise CVS Android.sketch
- 📄 Enterprise CVS iOS.sketch
- 📄 Enterprise CVS Web.sketch
- 📁 Fonts
- Helvetica
- 📁 Enterprise
- 📁 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
- CVS: Helvetica (available with the kit after you sync)
- Aetna: Open Sans and Domaine (available with the kit after you sync)
- iOS: SF Pro Download SF Pro from Apple Developer resources
- Android: Roboto Download Roboto from Google 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
- Enterprise Digital Design System: UI Kit SharePoint Repository URL
- Community Platform: UI Kit SharePoint Repository URL
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.*)
- This will launch the “Getting ready to sync…” interstitial (this window will not close automatically)
- Click “Open OneDrive” if you are prompted a browser alert dialog
- 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
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.
- 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.
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
- Go to Sketch > Preferences from the file menu
- Click on the Libraries tab
- *Click the “Add Library” button
- 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.
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
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)
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
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
Technical Support
One Drive Syncing
If you’re having sync issues with OneDrive & syncing, check these troubleshooting resources to help self-serve common problems.
- View our Troubleshooting doc: Troubleshooting OneDrive Sync Problems.docx
- Visit Microsoft support: Fix OneDrive sync problems
- Visit Confluence: SharePoint Syncing with OneDrive Troubleshooting
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.
- Contact CVS IT Tech Support: 1-855-280-4872
- Contact Aetna IT Tech Support (SPOC): 1-888-905-9500
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.