Albert Koffi Holali Adamavi15+ Brightspace courses, designed from Word content
Course content arrived as a Word document. I turned it into a Brightspace experience that is clear to scan, usable with a keyboard and consistent from one course to the next.
Source: Gemini (AI-generated)- Scale
- 15+ courses, one consistent design
- My part
- Designed the learner experience (HTML, JavaScript) and advised on accessibility and UX
- Tools
- Brightspace, HTML, JavaScript, H5P
- Standards
- AODA, ADDIE, UX
These courses are proprietary, and access is limited to registered learners. The diagram below illustrates the design approach I used. It is not a screenshot of a real course.
How I design a Brightspace module
A schematic of the choices I made in every module. The layout is illustrative. Select any part of the layout, or an item in the list, to read what it means.
What you will be able to do by the end
Keyboard-operable, with feedback
Learners know what they will be able to do before they start.
The same structure in every module, so learners never wonder where they are.
Segmented content that screen readers and sighted learners can both scan.
H5P and custom HTML activities, built to work with a keyboard.
One obvious way forward at the end of each page.
My role
Course content arrived as a Word document. I owned the Brightspace experience: structure, navigation, interaction and visual design, built with HTML, JavaScript and other tools.
The design challenge
Brightspace gives every course the same shell, and plain Word content does not use it well. Left alone, content becomes long pages that are hard to scan, and interactive elements can lock out keyboard and screen-reader users. My job was to make the experience clear and accessible without losing the content’s intent.
How I worked, step by step (ADDIE)
ADDIE is a five-stage design process: Analyze, Design, Develop, Implement, Evaluate.
- 1
Analyze
I read the source content and profiled the users to set the course requirements: level of interactivity, colors, page length, amount of multimedia, and which assessment tools fit (H5P, Creator+, quiz tool, discussion). These decisions shaped both the UX and the content in Brightspace.
- 2
Design
I prototyped the first module and took it through team review, then adjusted before building the rest. I sourced or designed the multimedia, such as videos, audio and pictures.
- 3
Develop
I built the course with interactivity, accessible content and multimedia, and I removed extraneous cognitive load. A review checked accessibility and usability, and I ran a pilot when the course called for it.
- 4
Implement
I published the course, trained the people who use it and troubleshot.
- 5
Evaluate
I collected and analyzed data through short interviews and forms, then adjusted the course from what I learned.
Frameworks in this course
AODA and WCAG
I advised on accessibility from the first review of the content, and built structure in code so it worked for assistive technology.
Cognitive load theory
A UI template I designed gave every course page the same styling, course map and module layout, so learners never had to relearn the interface. Short sections with one purpose each kept extraneous load low.
Mayer’s principles
Pages were segmented, key ideas were signaled and decoration was cut. Interactive content such as accordions, image hotspots, flashcards and H5P was chosen for the task it supported.
Dual coding
Key ideas were paired with visuals, with text alternatives for those who cannot see them.
Socio-constructivism
Activities and discussions let learners build understanding together, not just read.
Eclecticism
I used ADDIE for process, UX principles for the experience, and adult learning theory for relevance.
In a workplace setting
Building a consistent, accessible course experience at scale is how corporate learning teams build onboarding and compliance programs. A shared template keeps quality steady across many courses.
What this project shows
- I designed at scale: the learner experience of 15+ courses, consistent and accessible.
- I owned the Brightspace experience: structure, navigation, interaction and visual design.
- I coded where the platform needed it, instead of accepting its limits.
Next case study
Training teachers on Brightspace and edtech
Hiring for a training role, or need a course built?
Hiring
I’m open to instructional design and training specialist roles, in French and English. Send me a note, or start with my résumé.
Work with me
I design accessible, interactive online courses in Articulate Rise, Storyline, Brightspace and H5P, and I train teachers on Brightspace, SharePoint and Snagit. Tell me who the learners are and what they need to do.