# Seeking Insights on UI/UX Consistency Across Open edX Platforms **URL:** \ **Category:** Design\ **Tags:** how-to, mfe, design, quince, ux\ **Created:** [April 18, 2024, 7:33am UTC](https://discuss.openedx.org/t/seeking-insights-on-ui-ux-consistency-across-open-edx-platforms/12811 "2024-04-18T07:33:00Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Mahendra](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/mahendra/32/3902_2.png) [@Mahendra](https://discuss.openedx.org/u/Mahendra)\ **Post date:** [April 18, 2024, 7:33am UTC](https://discuss.openedx.org/t/seeking-insights-on-ui-ux-consistency-across-open-edx-platforms/12811/1 "2024-04-18T07:33:00Z")
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. ---
**Author:** ![arbrandes](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/arbrandes/32/158_2.png) [@arbrandes](https://discuss.openedx.org/u/arbrandes)\ **Post date:** [April 18, 2024, 1:25pm UTC](https://discuss.openedx.org/t/seeking-insights-on-ui-ux-consistency-across-open-edx-platforms/12811/2 "2024-04-18T13:25:39Z")
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: > > > This PR is a replacement for #410 based on an updated architectural approach. W…e expect to use module federation instead of adopting a framework like Piral. > > @arbrandes and I agreed we should create this PR and close #410 so we can start with a bit of a clean slate after the lengthy conversation on that one. Some of the comments over there are definitely still applicable; if you feel a point got lost and hasn't been taken into consideration in this version of the OEP, feel free to comment again. It is being driven by Axim as part of [FC-0054](https://openedx.atlassian.net/wiki/spaces/COMM/pages/4063821827/FC-0054+-+Composable+Micro-frontends+Piral+Discovery). We expect to have concrete results in the development cycle preceding the Sumac release. As for your questions: > [@Mahendra](#): > > 1. What architectural approach does the MFE UI/UX follow? Most MFEs follow the guidance you’ll find in [frontend-template-application](https://github.com/openedx/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. > [@Mahendra](#): > > 1. 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? Your best bet, particularly regarding future-proofing, is to go with the [brand-openedx](https://github.com/openedx/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. > [@Mahendra](#): > > Is there a method to update assets (logos, CSS, fonts) on the fly, without needing to restart or rebuild Docker images? Some MFEs will let you change environment variables that control things such as the header logo on the fly, via the [mfe\_config](https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/mfe_config_api/docs/decisions/0001-mfe-config-api.rst#decision) API. That is, if you go to your instance’s [Site Configuration](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/sites/configure_site.html) and set something like this: ```auto "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: - [https://github.com/openedx/frontend-plugin-framework:](https://github.com/openedx/frontend-plugin-framework:) a way to add UI slots to an MFE, so the operator can add plugins without the need to fork. We’re hoping to have some slots available by Redwood. - [https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst:](https://github.com/openedx/paragon/blob/master/docs/decisions/0019-scaling-styles-with-design-tokens.rst:) a mechanism to unify the source of truth for styling across the frontend. Together with some work on CSS variables and dynamic loading of stylesheets, should allow styling on the fly eventually. Let us know if you have any more questions! ---
**Author:** ![arbrandes](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/arbrandes/32/158_2.png) [@arbrandes](https://discuss.openedx.org/u/arbrandes)\ **Post date:** [April 18, 2024, 1:38pm UTC](https://discuss.openedx.org/t/seeking-insights-on-ui-ux-consistency-across-open-edx-platforms/12811/3 "2024-04-18T13:38:23Z")
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: > **[GitHub - overhangio/tutor-mfe: This plugin makes it possible to easily add...](https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#customising-mfes)** > > This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor. - overhangio/tutor-mfe ---
**Author:** ![Mahendra](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/mahendra/32/3902_2.png) [@Mahendra](https://discuss.openedx.org/u/Mahendra)\ **Post date:** [April 26, 2024, 4:08pm UTC](https://discuss.openedx.org/t/seeking-insights-on-ui-ux-consistency-across-open-edx-platforms/12811/4 "2024-04-26T16:08:04Z")
Thanks @arbrandes, I’ve read through all of the given reference links and understand how much MFE we can modify runtime. > [@arbrandes](#): > > if you go to your instance’s [Site Configuration](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/sites/configure_site.html) and set something like this: > > ```auto > "MFE_CONFIG" : { > "LOGO_URL": "https://example.com/logo.png", > }, > > ``` 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. ---
**Author:** ![arbrandes](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/arbrandes/32/158_2.png) [@arbrandes](https://discuss.openedx.org/u/arbrandes)\ **Post date:** [April 29, 2024, 12:58pm UTC](https://discuss.openedx.org/t/seeking-insights-on-ui-ux-consistency-across-open-edx-platforms/12811/5 "2024-04-29T12:58:37Z")
> [@Mahendra](#): > > Maybe it’s because of the cache. Yes, there’s a caching layer that makes it so it takes something like 5 minutes to take effect.