Reusable Moodle Learning Design System

A consistent set of patterns, templates and design rules for building structured, accessible online learning activities - developed through repeated module builds at UCL STEaPP from 2024 to 2026.
UCL Moodle course page showing structured weekly layout with clear learning outcomes, activity cards and completion tracking - an example of the consistent design system applied across STEaPP online modules

Moodle · Moodle Books · Pages · Forums · Databases · HTML/CSS · Accessibility · WCAG 2.2 AA · UCL STEaPP · Online Learning Design

12+ Online MSc modules built using consistent design patterns
WCAG 2.2 AA Accessibility standard applied throughout
Reusable Patterns applied across Books, Pages, Forums, Databases
2024–2026 Developed and refined at UCL STEaPP
Moodle H5P Mentimeter Padlet

Project

Through repeated module builds at UCL STEaPP for the Online MSc (2024–2026), I developed a consistent approach to Moodle activity design. The system gives a repeatable learning rhythm: context → stimulus → guided note-taking → structured contribution → peer interaction → reflection → transition. Applied across 12+ modules, it makes course navigation predictable and reduces the cognitive load of studying asynchronously. My role was learning design and technical implementation lead - converting academic content into accessible, structured Moodle activities and documenting patterns so colleagues and future maintainers can apply them consistently. I also use Mentimeter and Padlet for interactive activities where a live or collaborative response complements the asynchronous Moodle structure.

Tools

Moodle LMS (UCL instance) Moodle Books Moodle Pages Moodle Forums Moodle Databases Moodle Quizzes HTML/CSS within Moodle editor Panopto (video) Padlet Mentimeter Mahara (e-portfolio) WCAG 2.2 AA accessibility checking Moodle Ally Moodle accessibility checker

Instructional Design Principles

  • Context before action: every activity starts with a clear explanation of what students are doing and why
  • Make Notes prompts: a consistent note-taking step before discussions, assessments or peer contributions
  • Structured peer interaction: forum and database tasks include explicit guidance on what to contribute and how to engage with peers
  • Up Next transitions: short connecting text between activities explains what comes next and how the current activity has prepared students for it
  • Activity-level learning outcomes: each Book chapter or Page states what students will be able to do after completing it

Visual & Accessibility Principles

  • Consistent iconography: same icon, same meaning, every module - reading, note-taking, peer sharing, feedback, quizzes, tasks
  • Decorative icons marked correctly: empty alt text so screen readers do not narrate them
  • Content image alt text: educationally relevant, not file names or generic labels
  • WCAG 2.2 AA compliance: colour contrast, semantic HTML, keyboard navigability and accessible form design throughout
  • Accordion use: complex multi-part content uses accordions to reduce visual density without hiding essential material
UCL Moodle course page showing the consistent card-based layout, weekly structure, activity icons and completion tracking applied across the design system

Click to enlarge - full-page view of the Moodle course structure.

Activity Type Patterns

Books: multi-part content with consistent chapter structure - learning outcomes, content sections, embedded questions, "Make Notes" prompt at the end.

Pages: single-topic introductions or video-based activities - context, the resource, a note-taking prompt, and a transition to the next activity.

Forums: structured asynchronous discussion with specific post guidance, depth expectations, and explicit peer contribution instructions. Not "discuss this topic" - scaffolded questions with purpose.

Databases: peer contribution and feedback with a worked example of the expected submission and guidance on constructive peer review.

Quizzes: knowledge checks with explanatory feedback on answer options - functioning as learning activities rather than just tests.

Linked sequences: multi-activity arcs such as introduction Page → reading Book → Make Notes → group Forum → peer Database → individual reflection Forum, with explicit transitions at each step.

Outcome

Applied across 12+ STEaPP Online MSc modules. Student feedback from the first cohort (2025–26): 100% understood content purpose and intention; 96.7% agreed the format was suitable - data from 36 responses across three modules, reported in the co-authored paper presented at CODE/RIDE (March 2026). Reusable patterns reduce build time for new activities and make work easier to hand over.

The project page for UCL STEaPP Module Development provides specific examples applied to STEP0024 Science Funding and Governance and the Communicating Science for Policy module.

Related work
Skills demonstrated

Online learning design Moodle activity development Accessible HTML/CSS WCAG 2.2 AA Instructional sequencing Academic content transformation Cognitive load reduction Design system thinking