[Proposal] Customizable Header for LMS

Owned by Jenna Makowski
Last updated: Aug 15, 2024
5 min read

Problem Statement and Value Proposition

While the Header is designed around an out-of-the-box experience that works for many organizations, that design may not work for everyone. The goal of this project is to make the Header a customizable feature, allowing organizations to make changes to components in the Header that reflect their specific needs and goals. As such, organizations may choose to use the out-of-the-box header, or they may choose to customize parts of the Header to meet their specific needs. Additionally, this project will introduce a level of standardization around configuration decisions, streamlining and simplifying the process by which configuration choices can be made.

Current State Experience

From the perspective of learners and course teams, there are four versions of the Header in the LMS UI.

 

This header displays across the pages from within a course, including the Course Outline page, Progress page, Dates page and Discussion page. For course teams, it also displays across the Instructor Dashboard and the Gradebook. It includes (from left to right): 

 

This header displays across pages from outside of a course, including the Profile Page and the Account page. It is nearly identical to the header that displays within courses, except the static course title and id is replaced by a Courses button which links to the Learner Dashboard. It also does not include a Help button.

 

 

This header displays on the Learner Dashboard page. It includes (from left to right): 

  • A logo icon which links out to the Learner Dashboard

  • A Courses tab, which links to the courses in which the learner is enrolled

  • A Programs tab, which links to the programs in which the learner is enrolled. When an Instance is not using Programs, this page returns an error.

  • A “Discover New” tab, which links to the course catalog. When an Instance is not using the Catalog, this page returns an error.

  • The help icon which links to http://docs.openedx.org

  • A dropdown menu displaying the user’s username, and nested within:

    • Profile which links to the Profile page

    • Account which links to the Account page

    • Sign Out which signs the user out of the platform and lands on the login/auth page

 

This is the header in the logged out state. It includes (from left to right):

  • A logo icon which links out to the registration/authentication page

  • An Explore Courses button which leads to the course catalog

  • A Register for free button which links out to the registration/authentication page

  • A Sign in button which links out to the registration/authentication page

 

User Stories

As a course team member or administrator:

I want to be able to remove a page from the dropdown menu. For example, I may not want to include a link to the Profile page because it’s not relevant to my learners’ experience, and I’d like an easy way to simply remove that page from the dropdown menu.

 

I want to be able to add a page to the dropdown menu and customize the outbound link. For example, I may want to add a link to the Course Catalog from the dropdown menu, and I’d like an easy way to simply add that page to the menu and to dictate which url the page links to.

 

I’d like to be able to decide which order the pages appear in the dropdown.

 

I want to be able to change the url to any page in the dropdown. For example, I may want to keep the Profile page in the dropdown, but I’ve built a custom Profile experience for my learners and I need to be able to include my instance-specific link instead of the link in the out-of-the-box experience.

 

I want to choose whether the dropdown menu contains the user’s username or full name provided upon registration.

 

I want to be able to use my own logo and customize which url it links to so that I can align this part of the Header to my organization’s branding. I want to use this customization in the logged out state of the Header as well.

 

I want to be able to turn the Help button off. If I use the Help button, I want to be able to customize the url that it links out to. [Alternatively, I want to be able to add any text button + url in this space.]

 

I want to be able to opt in to using the Programs tab only if I am offering Programs on the Instance. I also want the option to customize this url.

 

I want to be able to opt in to using the Discover New tab only if I am using the course catalog. I also want the option to customize this url if I have built a custom catalog experience.

 

In the logged out state, I want to be able to customize the Explore Courses button and the Register for Free button so that I can use any buttons and any custom links I’d like.

 

Specs/Requirements

 

Requirements to refine the out-of-the-box experience:

  • On the Learner Dashboard, the Programs tab should be off by default, with Instances making the decision to toggle on if they offer programs

  • On the Learner Dashboard, the Discover New tab should be off by default, with Instances making the decision to toggle on if they use the native catalog

  • The Help button should display consistently across all Header pages (add the Help button to the Profile and Account pages).

  • The Header across all of the LMS pages in the logged in state consistently uses the same paragon components.

  • The Header across all of the LMS pages in the logged out state consistently uses the same paragon components.

 

Requirements to define the customization requirements:

  • Users should be able to add pages to the dropdown menus and to customize the url the pages link out to.

  • Users should be able to remove pages from the dropdown.

  • Users should be able to customize any urls in the dropdown.

  • Users should be able to rearrange the order of pages in the dropdown.

  • Users should be able to customize which name (username versus full name) displays in the dropdown.

  • Users should be able to opt out of using the Help button.

  • Users should be able to customize the url for the Help button.

  • Users should be able to replace the logo with a custom logo and add any url.

  • Users should be able to customize the url on the Programs tab.

  • Users should be able to customize the url on the Discover New tab.

 

Behavior Assumptions

If I change something in the dropdown menu or in any other part of the Header, it is my expectation that the change would apply to the Header across all of the LMS pages.