[2U] New Learner Home Page

Created by Ryan O'Connell
Last updated: Mar 22, 2023 by Nathan Sprenkle
5 min read

 

Introduction

The Learner Home project intends to replace the existing course dashboard (https://courses.edx.org/dashboard). To learn about the new and improved features or see frequently asked questions, continue reading.

Screenshot of the new Learner Home experience with a listing of several courses.

Feature Tour / What’s New?

The new Learner Home has many of the same features of the old dashboard, with some extended functionality and performance enhancements.

Brand Alignment (NEW)

The home page is now built with Paragon, allowing it to be easily styled with brand colors / components in both an edX and Open edX context.

Course Listing

Much like the old dashboard, courses are presented in a series of cards. Course cards show the course thumbnail, information about the course, and the ability to upgrade to a paid track or view/begin a course (if applicable). Further course actions (e.g. unenroll, email opt-out settings, and social media share) have been moved to the menu/triple dot icon on the course card.

Course sorting / filtering (NEW)

An added behavior over the old course dashboard. Clicking the “Refine” button opens options to filter by course status or sort either by most recent enrollment (default) or title.

Screenshot of the Learner Home experience sorting / filtering controls.

Pagination (NEW)

All of a user’s courses and entitlements are fetched on page load. To make the page manageable, we paginate that list, showing 25 courses at a time. To view other courses, a user should page through their list of courses using the pagination controls at the bottom of the course list.

 

Suggested Courses

The rollout of the new learner home will include a recommended courses area that springs from the recommendations experimentation from the Vanguards team.

Course Discovery

Want to explore even more courses than the ones suggested by our site? Click “Explore Courses” from the “Recommended Courses” panel to discover even more courses.

Enterprise Dashboards

Your Enterprise Dashboards have moved. To select a specific dashboard, go to your profile dropdown and select your desired dashboard.

 

Masquerade (NEW)

edX / 2U staff and support can now masquerade as users on the platform by typing a username or email in the “View as” box and hitting submit. Note that if there is a username/email collision, this will use email as the fallback identifier. Note also that this is designed to be “view only” so change actions (e.g. enroll, unenroll, selecting a session) are blocked in this view.

Frequently Asked Questions (FAQs)

Where do I find the new experience?

Comparison with old experience

Main Changes:

  1. Feature allowing staff to view other registered user dashboards by e-mail or user name added.

  2. A 'refine' feature to allow users to sort their courses.

  3. Upgrade button has icon and moved from the card footer into the card body.

  4. The program links moved to their own lines

  5. Card footer size reduced and passing grade requirement added.

  6. "Get the most out of your course" call to action removed.

  7. Social Media buttons and settings gear has been removed from cards. Placed in ...

  8. Course Access Button text changed.

  9. Clears technical debt by updating code base.

Learner Home

Legacy Student Dashboard

How is this experience rolled out?

When enabled, attempting to navigate to the old student dashboard will automatically redirect users to the new Learner Home experience.

When will this experience roll out?

Learner Home rolled out to 50% of the user base on Feb 15, 2023. Learner Home rolls out to 100% of the user base on Mar 22, 2023.

Developer FAQ

Where does the code live?

The frontend experience is a new microfrontend (MFE) called frontend-app-learner-dashboard which lives at GitHub - openedx/frontend-app-learner-dashboard: Learner Dashboard MFE

The backend (BFF) is a new Django App in edx-platform (edx-platform/lms/djangoapps/learner_home).

How do I run this new experience locally?

Note we plan to make this a docker container that can be started natively as part of Devstack but the work is not yet complete. In the meantime…

  1. Check out frontend-app-learner-dashboard.

  2. Install and run with npm run i, npm run start

  3. App should runs defaulted to port 1996

  4. Navigate to localhost:1996

  5. Log in and view your courses

How do I configure rollout percent?

A user can navigate to Learner Home directly whenever it is running, but automatically redirecting users requires configuration:

  1. Add and enable the learner_home_mfe.enabled Waffle Flag from Django Admin.

  2. Configure the LEARNER_HOME_MFE_REDIRECT_PERCENTAGE setting (e.g. in edx-platform/lms/envs/private.py) with an integer value (0 - 100) representing what percentage of users should be redirected to Learner Home. 0 represents no rollout, 100 represents rollout to all users.