Skip to main content

UI Integration for Course Phase Services

Overview​

PROMPT 2 uses module federation to dynamically integrate course phase services into the core client. Each service exposes its own microfrontend, enabling a modular architecture that promotes development flexibility.

However, this architecture also introduces the challenge of maintaining a consistent user experience across independently developed components. These guidelines define how to integrate your course phase service with the core UI while ensuring usability and consistency.

The PROMPT 2 core application displays course phases via a unified sidebar, based on the structure defined in the course configurator.

  • Lecturers see all configured phases in the order defined.
  • Students see only the phases they have reached, supporting guided progression.

Each course phase service must define:

  • One main page (shown when the phase is selected).
  • Optionally, subpages, which appear as nested items in the sidebar.

Best Practices for Course Phase UI Design​

To ensure consistency and usability across all phases, follow these design conventions:

1. Student-Facing Main Page​

  • Place key student actions (e.g., submitting a form) directly on the main page.
  • Avoid requiring navigation into subpages to complete primary tasks.

2. Lecturer-Facing Main Page​

  • Clearly state the purpose of the course phase.

  • Provide a summary of the current status, using:

    • Progress indicators
    • Configuration warnings
    • Visual summaries

  • The goal is to quickly inform the lecturer and guide their next actions.

Use the following subpages to maintain a consistent navigation pattern:

  • Participants: List all students in the phase and their assessment status.
  • Student Preview: Show the main student-facing page as seen by a student.
  • Mailing (Optional): Configure and send emails to students in this phase.
  • Configuration: All phase-specific settings and configurations. (Mailing configurations should remain in the "Mailing" page if used.)

Flexibility and Exceptions​

While deviations from these guidelines are allowed when required by specific functionality, strive to:

  • Minimize UI inconsistency.
  • Keep navigation and layout familiar across phases.
  • Promote clarity and efficiency for both students and lecturers.

By adhering to these conventions, your course phase service can remain modular while contributing to a cohesive and intuitive user experience throughout the PROMPT system.