This article outlines the brandable elements of the Manager Experience. All Branding Variables are modified from the Manage Templates menu in the Learner Experience. Similar to the Templates feature, these variables let you create a custom and unique Manager Experience for your people leaders. Only System Admins can access Manage Templates and apply these variables.
Each section below lists the user experience (UX) elements on a Manager Experience screen alongside the Branding Variable that controls its color. For details on how each variable applies across the portal, see the Color Variable Guide. For a full description of Manager Experience features, see Manager Experience.
Login Screen
The Login screen is where Managers sign in to the Manager Experience directly. For more information about login options, see Manager Experience: Login. The following table lists the brandable elements on this screen:
| UX Element | Branding Variable |
| Banner Background | Base |
| Logo | Header Logo |
| Login | Title & Body Text |
| Welcome to the Manager Experience | Title & Body Text (Light) |
| Invalid Credentials Error Background | Failure |
| Invalid Credentials Text | Banner & Button Text |
| Username | Title & Body Text |
| Invalid Username | Failure |
| Password | Title & Body Text |
| Invalid Password | Failure |
| Required | Title & Body Text |
| Login Button | Primary (50% opacity when disabled; Primary Dark on hover) |
| OR | Title & Body Text |
| Sign in to Admin Experience Button | Danger (10% opacity) |
| Sign in to Admin Experience Text | Danger (Danger Dark on hover) |
Overview Dashboard
The Overview Dashboard gives Managers a quick snapshot of their team's enrollments. Its Course Progress section displays a status widget for each enrollment status. Managers can click a widget to open the Learners View with that status already applied as a filter.
Header and Menu
The header appears at the top of the Overview Dashboard and contains the logo, the view selectors, and the main menu:
| UX Element | Branding Variable |
| Banner Background | Base |
| Logo | Header Logo |
| Overview / Learners View Selectors | Header Icons (Primary when active and on hover) |
| Upper Right-Hand Menu | Header Icons when closed (Header Icons Dark on hover) |
| Upper Right-Hand Menu Expanded: X | Danger |
| Upper Right-Hand Menu Expanded: Icons | Title & Body Text (Title & Body Text Dark on hover) |
| Upper Right-Hand Menu Expanded: Function Text | Title & Body Text (Title & Body Text Dark on hover) |
Status Widgets
Each status widget displays a progress ring, a status icon, an enrollment count, a status label, and the percentage of total enrollments that status represents. When a Manager hovers over a widget, the icon background fills in and the percentage replaces the icon. When Include Indirect Reports is enabled, the widgets are disabled and do not respond to hovering or clicking.
The following table lists the brandable elements within each widget. Elements that use the Status Variable take their color from the Branding Variable assigned to that widget's status:
| UX Element | Branding Variable |
| Progress Ring | Status Variable |
| Icon Background | Status Variable (10% opacity; 100% opacity on hover) |
| Status Icon | Status Variable |
| Status Count | Title & Body Text |
| Status Label | Title & Body Text |
| Percentage Value (on Hover) | Banner & Button Text |
Each status widget uses one of the following Branding Variables as its Status Variable:
| Status Widget | Branding Variable |
|
Status Widgets:
|
Failure |
|
Status Widgets:
|
Warning |
| In Progress | Primary |
| Complete | Success |
|
Status Widgets:
|
Danger |
The status widget background is always white, and its drop shadow uses a fixed value. Branding Variables do not affect these elements.
Learners View
The Learners View displays learning results for a Manager's Direct Reports, along with filters and actions for enrolling and messaging Learners. The following sections cover the brandable elements in each area of this view.
General
The following elements appear throughout the Learners View, including the header, the Manager's profile summary, and the Enroll and Message actions:
| UX Element | Branding Variable |
| Banner Background | Base |
| Logo | Header Logo |
| Overview / Learners View Selectors | Header Icons (Primary on hover) |
| Upper Right-Hand Menu | Header Icons when closed (Header Icons Dark on hover) |
| Upper Right-Hand Menu Expanded: X | Danger |
| Upper Right-Hand Menu Expanded: Icons | Title & Body Text (Title & Body Text Dark on hover) |
| Upper Right-Hand Menu Expanded: Function Text | Title & Body Text (Title & Body Text Dark on hover) |
| Avatar Outer Border | Default |
| Default Avatar Icon | Default |
| Default Avatar Background | Banner & Button Text |
| Manager Name | Title & Body Text |
| Department | Title & Body Text (Light) |
| Direct Reports Count | Title & Body Text (Light) |
| Enroll Action (Overall) |
Primary (Background) Banner & Button Text (Text) |
| Enroll Action (Specific Learner) | Primary |
| Message Action (Overall) |
Primary (Background) Banner & Button Text (Text) |
| Message Action (Specific Learner) | Primary |
Enroll Learners Window
Clicking the overall Enroll action opens the Enroll Learners window. Clicking the Enroll action on a specific Learner opens the same window with that Learner already selected. The window contains the following controls:
- All My Reports checkbox, which only appears for Managers whose role allows them to view Indirect Reports.
- Direct Reports checkbox.
- Learners and Courses fields, where Courses is required.
- Enroll and Close buttons.
These controls share their styling with other Manager Experience windows and forms. Once at least one Learner is selected, a banner summarizes how many Learners will be enrolled in how many Courses. This banner uses its own Branding Variable:
| UX Element | Branding Variable |
| Enrollment Summary Banner | Danger (Light) |
Filters
The Filters sidebar lets Managers narrow the Learners View by Courses, Status, and Priority. When a Manager clicks a status widget on the Overview Dashboard, the Learners View opens with the matching filter already applied. The following table lists the brandable elements in the sidebar:
| UX Element | Branding Variable |
|
Filter Headers:
|
Title & Body Text |
| Filter Section Collapse/Expand Icon | Default |
| Courses Filter: Select Courses | Title & Body Text |
| Courses Filter: Course Selector - Course Name | Title & Body Text |
| Courses Filter: Course Selector - Checkbox (Selected) | Primary |
| Courses Filter: Course Name Chip - Course Name | Banner & Button Text |
| Courses Filter: Course Name Chip - Background | Danger |
| Courses Filter Summary Collapsed State Count: Background | Highlight |
| Courses Filter Summary Collapsed State Count: Count | Banner & Button Text |
| Status Filter: Name | Title & Body Text |
| Status Filter: Count | Title & Body Text (background at 10% opacity) |
|
Highlighted State for Status Filters:
|
Failure (background at 10% opacity) |
|
Highlighted State for Status Filters:
|
Warning (background at 10% opacity) |
|
Highlighted State for Status Filters:
|
Danger (background at 10% opacity) |
| More Statuses Action | Primary |
| Filters Sidebar Collapse/Expand Icon | Default |
Learner Details
Learner Details display each Learner's name, department, Indirect Reports count, and the tabs for their learning records:
| UX Element | Branding Variable |
| Indirect Report Breadcrumbs | Primary |
| Learner Count | Title & Body Text |
| Learner Name | Title & Body Text |
| Department | Title & Body Text (Light) |
| Indirect Reports Count | Primary |
| Collapse/Expand Icon | Default |
|
Tab Name and Count:
|
Title & Body Text (when inactive) Primary (when active and on hover) |
Course Details
The Courses tab lists each of the Learner's Course Enrollments with status and progress information:
| UX Element | Branding Variable |
| Course Name | Title & Body Text |
| Course Type | Title & Body Text (Light) |
| Date | Title & Body Text (Light) |
| Session Name | Title & Body Text (Light) |
| Session Date | Title & Body Text (Light) |
| Progress Percentage Value | Title & Body Text (Light) |
| Default Icon Background | Primary (10% opacity) |
| Default Icon | Primary |
|
Status:
|
Failure (background at 10% opacity) |
|
Status:
|
Warning (background at 10% opacity) |
|
Status:
|
Danger (background at 10% opacity) |
| Progress Bar: 0% and Background | Default (Light) |
| Progress Bar: Filled Portion | Success |
Certificate Details
The Certificates tab lists the Learner's earned Certificates and shows whether each one is valid or expired:
| UX Element | Branding Variable |
| Course Name | Title & Body Text |
| Date | Title & Body Text (Light) |
| Certificate Icon Background | Default |
| Certificate Icon Foreground | Banner & Button Text |
| Valid State Background | Success |
| Expired State Background | Failure |
| Valid State Check Mark Icon | Banner & Button Text |
| Expired State Check Mark Icon | Banner & Button Text |
Competency Details
The Competencies tab lists the Competencies awarded to the Learner:
| UX Element | Branding Variable |
| Competency Name | Title & Body Text |
| Date | Title & Body Text (Light) |
| Competency Icon Background | Default |
| Competency Icon Foreground | Banner & Button Text |
| Valid State Background | Success |
| Valid State Check Mark Icon | Banner & Button Text |
Credits Details
The Credits tab lists the Learner's Credit totals by Credit Type:
| UX Element | Branding Variable |
| Credit Type Name | Title & Body Text |
| Credit Count | Title & Body Text |
External Training Details
The External Training tab lists the Learner's External Training records:
| UX Element | Branding Variable |
| Course Name | Title & Body Text |
| Completion Date | Title & Body Text (Light) |
| External Training Template Name | Title & Body Text (Light) |
| View Action | Primary |
Comments
Article is closed for comments.