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.
Business Value
Why This Matters
A shared design system is an investment in quality, efficiency, and equity across every UMA course — now and into the future.
Reduced Production Time
Pre-built, tested components mean course developers spend time on content — not layout. Standardized patterns eliminate repetitive formatting decisions and reduce production time per course.
Consistent Learner Experience
Learners encounter the same design language across every program and instructor. This consistency reduces cognitive load and allows learners to focus on content rather than navigating an unfamiliar interface.
Built-in Accessibility
Accessibility is resolved once at the system level — not audited and fixed course by course. Every course built from these templates starts compliant by default.
Reusable Standards
Design decisions made once become the standard across all future courses. The library accumulates value over time — each new course benefits from every decision that came before it.
Foundation for Automation
A structured, consistent component library is the prerequisite for automation. Template-based generation, AI-assisted formatting, and reusable snippet libraries all depend on having a reliable standardized structure.
Visual Language
Design Standards
Every element in this system follows a defined visual language. These standards ensure that all courses built with these templates deliver a predictable, accessible, and professionally consistent learner experience.
Journey Green for Interaction
The signature teal-green is reserved exclusively for interactive elements — buttons, clickable cards, navigation highlights, and any control a learner can act on. This makes interactivity immediately recognizable across all pages.
Dark Blue for Information
Dark blue is used for headings, informational callouts, and content hierarchy. The clear separation between interactive and informational color reduces confusion and aligns with UMA brand standards.
Typography & Spacing
A consistent type scale and spacing system creates visual rhythm across all pages. All text sizes, line heights, and spacing values are drawn from a single set of design tokens — not ad-hoc values.
Accessibility by Default
Every component meets WCAG 2.1 AA contrast requirements. Semantic HTML, keyboard navigation, and ARIA attributes are built into each component — not added retroactively.
Responsive Layout
All templates adapt across device sizes from mobile to wide desktop, ensuring a consistent learner experience regardless of the device or environment used to access the course.
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.
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.
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.
Component Library
The individual building blocks. Browse all reusable design components with live examples, usage guidance, and accessibility notes.
Page Templates
Assembled page layouts. Explore standardized templates for syllabus, module key points, and self-assessment pages.
Course Architecture
The complete learner experience. A full week built entirely from the design system — orientation through graded activities.
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.
Review the Component Library
Browse all available components. Understand what is built, how each piece looks, and how it is used across page types.
Start with Components → Step 2Explore Sample Pages
See components in context. The Module Key Points and Self-Assessment pages show how components assemble into real course content.
Explore Sample Pages → 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.
Walk Through Week 1 →