QA Review

Comprehensive QA Summary for MFE’s

Overview

The FC‑0096 review effort analysed ten Open edX micro‑frontends (MFEs). Each MFE was assessed against the generic QA Checklist. The review focused on visual consistency, navigation, forms, link behaviour, layout aesthetics and accessibility. Notes from the MFE templates sheet in the master inventory were used as the primary evidence for this assessment. Major cross‑cutting findings included inconsistent spacing and alignment, missing hover/focus states, insufficient contrast and broken or incomplete functionality. The following sections summarise the key findings and recommended improvements for each MFE.

Account Page

The account page benefits from a cleaner Indigo theme but still exhibits inconsistent layout. There are uneven gaps between sections (for example, a larger gap between Social Media Links and Preferences), missing hover effects on the Edit buttons and section headers, and a confirmation message that overlaps adjacent elements. Navigation is confusing because the Notifications and Linked Accounts tabs have no content and simply jump to the next section, giving the impression that something is missing. Accessibility is weakened because interactive elements lack hover and focus states. To improve the account page:

• Standardise vertical spacing and alignment across all sections.

• Add hover/focus states to buttons and interactive headers.

• Provide proper content or disable the Notifications and Linked Accounts tabs until functionality is available.

• Ensure pop‑up messages do not overlap neighbouring elements.

Profile Page

The profile page shares many of the account page problems. The Edit and Add buttons lack hover states and therefore provide no feedback when a user points at them, and the Upload Photo text is styled like plain text rather than a button. In the certificate section, changing the “who can view the certificate” option does not update the displayed value. Improved styling, interactive feedback and bug fixes are needed here:

• Add clear button styling (including hover/focus states) for Edit, Add and Upload Photo actions.

• Fix the certificate‑visibility dropdown so that selected values are reflected immediately.

• Review spacing around elements to ensure consistent margins and alignment.

Authentication MFE

The authentication micro‑frontend exhibits form‑alignment inconsistencies and a split layout with weak visual separation. Input fields line up correctly, but spacing between form elements (buttons and links) varies between pages. The soft blue gradient background blends subtly into white, so the two halves of the page are not clearly distinguished. Buttons and input fields provide no hover or focus feedback, reducing perceived interactivity. Recommended improvements include:

• Add a subtle border or shadow on the vertical split to improve section definition.

• Apply hover elevation or colour shifts to Sign in and Submit buttons, and provide visible focus rings for accessibility.

• Reduce empty vertical space and unify spacing between form elements.

• Provide ARIA labels on input fields and links to improve screen‑reader support.

Authoring MFE

The authoring MFE covers several Studio pages (home, outline, team, advanced settings, schedule & details, grading, groups, import/export pages and libraries). Across these screens the Indigo theme improves typography and colour contrast, but the overall hierarchy remains flat, with cards blending into the background and little sense of depth. Long unsectioned forms, particularly in the advanced settings and schedule/detail pages, cause scroll fatigue and make it difficult to locate specific settings. Tooltips sometimes appear in positions that disrupt the layout of the page. Several functional issues were recorded, such as the proctored‑exam settings link not working, the Undo Changes button jumping to the bottom of the page, and course information alerts appearing when no changes were made. To address these issues:

• Introduce card elevation or subtle backgrounds to separate content blocks and provide depth.

• Break very long forms into accordions or grouped sections.

• Ensure tooltips and pop‑over messages do not overlap adjacent elements.

• Fix broken links (e.g., proctored‑exam settings) and ensure Undo Changes retains the current scroll position.

• Standardise button sizes and placements; add hover states to cards and buttons.

Communications MFE

The communications MFE suffers from inconsistent padding: there is almost no space below the header, while a large gap appears before the yellow “Pending tasks” alert. The “Send to” checkboxes are evenly aligned but lack clear grouping, slowing down scanning. The default grey/white background with faint borders and uniform typography causes the interface to feel unstyled. Suggested improvements include:

• Add visual segmentation (e.g., soft dividers or card‑style backgrounds) to separate form sections.

• Group “Send to” options under a clear label or tinted background.

• Ensure consistent vertical spacing (about 24‑32 px) between content blocks.

• Provide hover highlighting for table rows and dropdown interactions.

• Adjust the colour and size of the warning banner so that it does not dominate the page.

Discussions MFE

The discussions MFE contains numerous usability problems. The layout misaligns vertically: the left column of posts lines up with the right “Add a post” form, but the form begins lower down the page, creating unevenness. Buttons such as Add a post, Cancel, Submit and Show preview are either too subtle or placed too close together. Light greys used for timestamps and icons lack contrast, and the “edit” flow does not reliably update posts. Tooltips are obscured by other UI elements when hovering over the question‑mark icon. Recommended fixes:

• Use flexbox or a grid system to align columns at the top and standardise spacing between items.

• Increase contrast for low‑visibility text and icons and provide ARIA labels for icons.

• Space buttons apart and make Show preview more obvious (e.g., styling it as a button).

• Add hover states and row highlights to improve interactivity.

• Ensure that editing a post updates the content correctly and that tooltips are visible.

Gradebook MFE

In the gradebook MFE the visual hierarchy is weak: the “Gradebook” header, course ID and step labels share the same colour and font weight, so nothing stands out. The filter section and search bar align poorly-the search bar floats on the far right with too much white space between elements. Pagination buttons (“Previous Page” / “Next Page”) are centred awkwardly and touch the bottom of the table, and a bright green feedback button in the bottom right looks disconnected from the rest of the layout. To improve the gradebook:

• Make step headings smaller and less bold to emphasise the main table.

• Align the search bar with filters and reduce white space to tidy the layout.

• Add row‑hover highlighting for better feedback and standardise button placement with hover states.

• Convert the “Back to Dashboard” link into a styled button for better visibility.

• Align icons (such as the information icon) horizontally with their labels.

Learner‑Dashboard MFE

The learner dashboard shows inconsistent spacing-tight gaps around course thumbnails contrast with an empty vertical space below courses, giving the page an unfinished feel. Important buttons like Begin Course and Resume are visible but lack prominence; the ellipsis “⋯” menu is subtle and may be missed. Low contrast between light blue card backgrounds and grey text can make information hard to read. Cards blend into the background without borders or shadows, and icons such as the “i” information icon are small and cramped. Improvements should include:

• Standardise spacing around elements (e.g., 16 px between cards) and reduce empty vertical space by adding dynamic content.

• Elevate primary actions by increasing button size and weight; design the ellipsis menu so that it is more discoverable.

• Darken backgrounds or text to meet contrast guidelines and increase icon size with more space around them.

• Add borders or shadows to cards to separate them from the page background.

Learning MFE

In the learning MFE, grey background sections (such as content cards) lack separation from surrounding elements, weakening visual hierarchy. On unit pages the Next and Previous navigation buttons are inconsistent in size and spacing, breaking visual consistency. The Resume course and Expand all buttons lack prominence and could benefit from icons or shadows. Recommended actions:

• Define a global spacing scale to ensure consistent padding and margins.

• Add subtle borders or shadows around content cards to distinguish sections.

• Make navigation buttons consistent in size and spacing, and enhance primary actions with visual cues (icons or slight elevation).

• Reduce footer whitespace and ensure consistent gap between icons and text.

Ora‑Grading MFE

The Ora‑Grading MFE provides a cleaner layout with better spacing, but several issues remain. Table borders and row dividers are faint, which makes it hard to distinguish rows. Clicking Clear Filters leaves checkboxes selected instead of resetting them; the Preferences Center link is broken, and the Add Comments label is positioned too close to the input field. The yellow banner on the grading page is strong, and the View all responses button feels isolated. To improve this MFE:

• Increase contrast for table borders and introduce a row‑hover or selected‑row highlight state.

• Fix the Clear Filters logic so that it resets checkboxes and filter parameters.

• Repair broken links (e.g., the Preferences Center link) and reposition the View all responses button closer to the title.

• Add more spacing between the Add Comments label and its input field and ensure consistent spacing throughout the grading form.

Conclusion

This QA exercise demonstrates that the Indigo theme improves colour contrast and typography across Open edX MFEs but that significant usability and accessibility gaps remain. Consistent spacing, stronger visual hierarchy, clear interactive feedback (hover and focus states) and attention to contrast will greatly enhance the experience. The accompanying Excel file (QA PASS LIST MFE'S) provides a detailed checklist showing the status of every QA item for each MFE.