Seeking Insights on UI/UX Consistency Across Open edX Platforms

Development Design
, , , ,
1

Hello everyone!

As part of an organization leveraging Open edX as our Learning Management System (LMS), we’ve been deeply engaged in customizing and enhancing various components of the system—LMS, Studio, Admin Panel, and the newer Micro-Frontends (MFEs) for dashboards, accounts, profiles, etc.

Throughout our modifications, we’ve encountered several inconsistencies in the UI/UX design across different parts of the platform. Some of the challenges include:

  • Inconsistent HTML Styles: Font styles vary widely across pages. For example, the h2 tags in the Profile and Account pages have markedly different sizes.
  • Rebuilding Requirements: Any changes to assets like CSS, JS, or logos necessitate rebuilding the entire application (both MFE and Open edX Docker images), which is time-consuming.
  • Missing Elements in Pages: The header and footer are absent from the login and registration pages.
  • Color Inconsistencies: The header bar colors are inconsistent, with dark blue on some pages and light blue on others.
  • Button Styling Variance: Buttons show varied styling, some with blue backgrounds, others white with blue text.

These discrepancies suggest a broader issue with the UI/UX framework’s consistency, especially when comparing legacy pages like Home, Browse Courses, etc., to MFE pages such as Account, Profile, and Courseware.

This leads me to several questions for the community:

  1. What architectural approach does the MFE UI/UX follow?
  2. How can we more easily modify the UI/UX to ensure a uniform user experience across the platform, particularly in ways that remain compatible with future platform updates?
  3. Is there a method to update assets (logos, CSS, fonts) on the fly, without needing to restart or rebuild Docker images?

I’m eager to hear if others have faced similar issues or have insights into designing a more cohesive Open edX experience. Any advice or recommendations would be greatly appreciated.

Thank you in advance for your thoughts and guidance.

2

Hi @Mahendra,

You describe a series of known issues with the current Open edX frontend. Most of them are being addressed, either directly or indirectly, by the following OEP, which I suggest you take a look at:

It is being driven by Axim as part of FC-0054. We expect to have concrete results in the development cycle preceding the Sumac release.

As for your questions:

Most MFEs follow the guidance you’ll find in frontend-template-application, including some implicit ones coming out of the template repository itself: the use of Webpack, React, Paragon, and so on.

We have found this to be insufficient to avoid the issues you mention, though: hence, the above OEP.

Your best bet, particularly regarding future-proofing, is to go with the brand-openedx approach. There are limitations with respect to what you can actually customize - and this will also vary between MFEs - but it’s what’s available right now if you’re not interested in forking.

Some MFEs will let you change environment variables that control things such as the header logo on the fly, via the mfe_config API. That is, if you go to your instance’s Site Configuration and set something like this:

"MFE_CONFIG" : {
    "LOGO_URL": "https://example.com/logo.png",
},

Your instance’s logo should change accordingly shortly thereafter, no rebuilds required.

We realize that the above options are limited, though. OEP-0065 will help with consistency, but there are other efforts underway that will improve customizability, such as:

Let us know if you have any more questions!

3

I forgot to mention that there are a few more things you can do to customize MFEs without necessarily forking, during Tutor’s image build process. Take a look here:

4

Thanks @arbrandes,

I’ve read through all of the given reference links and understand how much MFE we can modify runtime.

I tried this to change the logo, favicon icon, and platform name. It’s working as expected but it’s taking time to reflect on MFE. Maybe it’s because of the cache.

5

Yes, there’s a caching layer that makes it so it takes something like 5 minutes to take effect.