Create MFE user experience manual

[jmakowski1123]

Problem

MFE authors are currently free to design UX as they see fit. Even with the use of Paragon components as building blocks, this can potentially still lead to a lack of consistency between pages.

Product/Platform Value

A consistent experience across the platform is expected of any modern application. Not having one detracts from the presentation.

Acceptance Criteria

Creation of a UX manual that explains how MFE authors can better achieve a consistent user experience, including a checklist that can be used to determine if a particular MFE passes the bar for inclusion in a release. This inclues but is not limited to:

• UX library standardization, including its use (minimum versions of frontend-platform, Paragon, React, etc.)
• Minimum i18n requirements
• Minimum documentation requirements
• Minimum customizability requirements (initially a placeholder, pending discovery of customization epics)

Related or in-progress work

"Adam Stankiewicz at 2U is leading the Paragon efforts by expanding what the library can do, but as far as we're aware nobody is doing anything about UX guidelines.

Also, nobody is tasked with heading the general consistency effort."

Contingencies

Should be groomed alongside #418

---

• Kick off meeting with UX stakeholders #477

[jmakowski1123]

Pre-grooming questions -

• Is there a list anywhere of inconsistencies that have been noticed and are possibly not owned? Brian noted today the lack of consistency in use of handler for enter buttons ([BD-14] Library Authoring - Edit Library Title openedx-unsupported/frontend-app-library-authoring#61 (comment)) as one example. Open question on approach as to whether we start with a top-down parameter for design, or an audit of inconsistencies from a user perspective, or possibly both.

[adamstankiewicz]

"Adam Stankiewicz at 2U is leading the Paragon efforts by expanding what the library can do, but as far as we're aware nobody is doing anything about UX guidelines. Also, nobody is tasked with heading the general consistency effort."

Paragon is intended to be a design system that provides not only theme-able React components and styles but also the set of UX guidelines by which the Open edX platform is designed. The 2U design team today is largely responsible for design decisions and patterns related to the Paragon design system. That said, the design team tends to primarily focus on Paragon from a 2U/edX perspective without considering the core Paragon theme directly (e.g., in terms of its colors, etc.).

We previously had a dedicated Design System manager within 2U/edX, but since his departure, supporting, maintaining, and improving Paragon from a design point of view has been a bit lacking, largely in part because designers at 2U/edX understandably prioritize the work on their individual teams' deliverables over the design system.

FWIW, we are starting to iterate on the design review process internally at 2U/edX to hopefully enable designers to consider and contribute more to Paragon as part of their team's deliverables, to better recognize common UI patterns across different platform areas, and to generally get some sense of design ownership back to the design system.

Ideally (IMO), the Paragon documentation website would be one of the primary resources to find the UX guidelines and patterns to design for the Open edX platform. We have documentation around UX guidelines in the Paragon Figma library (e.g., when and when not to use certain components and/or variants of components) that will ideally would be brought into the documentation website as well.

The broader vision for the Paragon design system as it continues to evolve is to find ways to better define and encapsulate those UX guidelines in re-usable ways for consumers.

[adamstankiewicz]

[curious] Is #424 a duplicate of this issue?