Ready to begin your review?
Jump directly to any section of the prototype using the links below. If this is your first visit, start with the Component Library.
UMA — Future Course Template System
Course Template System
A reusable design system for UMA’s D2L Brightspace environment that standardizes the learner experience, improves consistency across courses, supports accessibility, and lays the foundation for future automation.
Overview
What Is This?
This prototype presents a reusable course design system for UMA’s D2L Brightspace platform. Rather than building each course independently, this system gives instructional designers, multimedia developers, and leadership a shared library of components, standardized page templates, and validated course structures that can be applied across any program or modality.
The goal is not to replicate a single course. The goal is a scalable foundation that improves every course — consistently, efficiently, and with learners at the center.
Reusable Components
A library of design building blocks — callouts, activity labels, knowledge checks, scenario blocks, and more — that can be assembled into any course regardless of subject or level.
Page Templates
Standardized layouts for syllabi, module pages, assignments, discussions, and content pages that deliver a consistent learner experience across all UMA programs.
Course Architecture
Complete examples demonstrating how components and templates combine into a structured weekly flow — from course orientation through graded activities.
Scope
What Are We Evaluating?
This prototype covers three connected layers of the design system, plus a vision for future automation. Each layer builds on the one before it.
Layer 1
Component Library
The individual building blocks. Browse all reusable design components with live examples, usage guidance, and accessibility notes.
Layer 2Page Templates
Assembled page layouts. Explore standardized templates for syllabus, module key points, and self-assessment pages.
Layer 3Course Architecture
The complete learner experience. A full week built entirely from the design system — orientation through graded activities.
Future
Automation Foundation
Components and templates designed to support snippet libraries, reusable HTML blocks, and AI-assisted course generation.
Start Here
Recommended Review Path
Follow this three-step path to evaluate the prototype in a logical order — from the design system components through to the complete course experience.
Step 1
Review the Component Library
Browse all available components. Understand what is built, how each piece looks, and how it is used across page types.
Step 2Explore Sample Pages
See components in context. The Module Key Points and Self-Assessment pages show how components assemble into real course content.
Step 3Walk Through the Course Example
Follow the complete Week 1 learner journey — from the overview and objectives through all modules, learning activities, and practice.
Philosophy
Design Principles
Every component and template in this system was built against five core principles. These are not aspirational values — they are the criteria every design decision is evaluated against.
Consistency
Every course looks and feels familiar to learners regardless of subject, instructor, or program. Shared patterns reduce cognitive load and build trust.
Accessibility
All components are built to WCAG 2.1 AA standards. Semantic HTML, ARIA attributes, keyboard navigation, and accessible color contrast are included by default.
Flexibility
Components can be combined in any order and applied to any subject. No component is tied to a specific course, program, or modality.
Scalability
The system is designed to grow. New components can be added without breaking existing ones. Templates can evolve without rebuilding from scratch.
Learner-Centered Design
Every decision prioritizes the learner’s experience. Clarity, orientation, and reduced friction are the goals — not visual complexity.
Quick Access
Jump In
What’s Next
Future Vision
This prototype is the foundation, not the ceiling. The design system is intentionally structured to support what comes next.
Centralized Templates
A single source of truth for all UMA page layouts and course structures — maintained centrally, deployed consistently, updated once to improve every course simultaneously.
Reusable Snippet Library
Pre-built HTML blocks that instructional designers and developers can paste directly into D2L — reducing course production time from days to hours.
AI-Assisted Course Generation
A component library and template structure designed to integrate with AI workflows, enabling automated content formatting, consistent structure, and accelerated course development.