Manager Experience: Branding Variables

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:

  • Failed
  • Expired
  • Overdue
  • Absent
Failure

Status Widgets:

  • Expiring in 14 days
  • Due in 14 days
Warning
In Progress Primary
Complete Success

Status Widgets:

  • Enrolled
  • Pending Approval
  • Not Started
  • Not Complete
Danger

 

Non-Brandable Elements

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:

  • Courses
  • Status
  • Priority
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:

  • Failed
  • Expired
  • Overdue
  • Absent
Failure (background at 10% opacity)

Highlighted State for Status Filters:

  • Expiring in 14 days
  • Due in 14 days
Warning (background at 10% opacity)

Highlighted State for Status Filters:

  • Enrolled
  • Pending Approval
  • Not Started
  • Not Complete
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:

  • Courses
  • Certificates
  • Competencies
  • Credits
  • External Training

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:

  • Failed
  • Expired
  • Overdue
  • Absent
Failure (background at 10% opacity)

Status:

  • Expiring in 14 days
  • Due in 14 days
Warning (background at 10% opacity)

Status:

  • Enrolled
  • Pending Approval
  • Not Started
  • Not Complete
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

 

Was this article helpful?
2 out of 3 found this helpful

Comments

0 comments

Article is closed for comments.