Lead Learning Experience Designer, UX Strategist, Systems Designer; Project Manager
Canvas LMS, Figma, Miro, Adobe Creative, Google Workspace, WCAG
Hired to design and develop a single UDL 101 course, I identified early in discovery that the organization's real problem wasn't content, it was infrastructure. Every previous course had been built as a one-off, resulting in inconsistent visual design, fragmented production workflows, and unsustainable development timelines. I reframed the engagement from a single course delivery to a platform-wide systems project: designing a UDL 101 course while simultaneously architecting a reusable eLearning framework that would govern all future course production across the organization. The result was a flagship course launch that had been stalled, and a modular design system that reduced future development time by approximately 70%.
⚠️ NDA: Visual deliverables are confidential. This case study describes process, decisions, and outcomes without reproducing proprietary assets.
This was a mission-driven organization with deep subject matter expertise and a genuine commitment to accessible, inclusive learning. They had the knowledge, but they lacked the infrastructure to turn that knowledge into scalable learning products efficiently.
Early discovery revealed three structural problems:
Every course was treated as a standalone project with no shared components, no naming conventions, and no design standards. Designers and developers made independent decisions that created visual and instructional inconsistency across the portfolio.
Cross-functional collaboration between designers, researchers, and technical staff was generating friction rather than momentum. Misalignment on roles, tools, and production stages was causing repeated rework and stalled launches.
The flagship course (the reason I was originally hired) had been delayed not because of content gaps but because the production environment couldn't support its complexity without a systematic approach.
The strategic question that reframed the project: "If we solve only this one course, what happens to the next one?" The answer was obvious. I proposed expanding the scope, which shifted the focus to building a Product Design System & Component Library that prioritized:
Atomic Learning Design: WCAG-aligned, reusable components that ensure pedagogical consistency across all modules.
Workflow Automation: Standardized naming conventions and collaboration protocols that removed the "guessing game" for engineers.
Governance: Clear documentation that acted as the single "Source of Truth" for all future development.
Before designing anything, I conducted a workflow audit: reviewing existing course assets, interviewing team members across roles, and mapping the current production process end to end.
The organization had strong content expertise but no shared "source of truth" or unified content/asset library for how a course should look, feel, or be structured. Each designer, researcher, and instructor had developed personal conventions that weren't documented or transferable.
WCAG compliance was a stated organizational value (this was an organization whose core work was accessibility) but it wasn't systematically built into the production process. Accessibility decisions were being made case by case rather than at the component level.
The time spent on formatting, reformatting, and resolving inconsistencies across modules was consuming a disproportionate share of production capacity, time that should have been spent on instructional design and content quality.
These findings directly shaped the dual-track approach: design the flagship course through the new system simultaneously, so the framework was validated in real production conditions rather than built in isolation.
Rather than building the framework first and the course second, I ran both tracks in parallel. The UDL 101 course became the first implementation of the framework — which meant every design decision in the course was also a decision about the system standard.
The course needed to do something genuinely difficult: teach Universal Design for Learning (a framework grounded in the idea that learner variability is the norm, not the exception) to an audience of educators and practitioners who ranged widely in their prior knowledge, tech comfort, and learning context.
The instructional design approach applied the principles of the subject matter to the design of the course itself. A course about UDL needed to embody UDL. That meant multiple means of representation, flexible pathways through the content, and assessment that measured genuine understanding rather than recall.
The course was built in Canvas LMS., which was the right choice for this context: the content was structured but substantial, the audience needed mobile access, and the organization's technical capacity for long-term maintenance needed to be considered.
Visually, the course used a brand-aligned clean, high-contrast design system with clear typographic hierarchy, accessible color combinations meeting WCAG 2.1 AA contrast ratios, and a consistent iconography set. Every interactive element was keyboard-navigable. Alt text was applied systematically, not added at the end. The visual design wasn't just aesthetically considered, it was structurally accessible.
The design system I built alongside the course had three components:
Component library: a set of reusable, WCAG-aligned instructional building blocks: text + image layouts, scenario structures, assessment formats, callout styles, and interactive patterns. Each component was documented with usage guidelines( when to use it, when not to, and how it connects to learning objectives). Stored both in Figma and Drive with clear naming conventions that matched the Rise development environment. I also created a Canvas Course Template to be copied and edited for future courses; this template also included a instructor/designer-view only module with all the design assets and componets (quotes, interactive boxes, highlited text, alt text when needed, etc).
Production workflow: a standardized process map from content intake to final QA, with defined handoff points between instructional design, visual design, and technical review. The workflow was documented in a shared Google Workspace folder structured as a single source of truth: brief templates, style guides, QA checklists, and version control conventions.
Governance documentation: a living style guide covering brand application, accessibility standards, voice and tone, and component update protocols. This was designed to be maintainable by someone who hadn't been part of building it, which is the real test of a governance document.
WCAG compliance at the component level, not the course level. Rather than auditing each course for accessibility after the fact, accessibility was built into every component in the library. A designer using the system couldn't accidentally use an inaccessible color combination because the palette was pre-validated. This shifted accessibility from a review step to a design default — which is the only way it actually scales.
Canvas LMS over Rise or Storyline for this organization. The natural instinct in an organization with sophisticated content might be to reach for the more powerful tool. The right decision here was the more maintainable one. Canvas' structured format meant that content updates (which would happen frequently as UDL guidance evolved) could be made by team members without deep authoring tool expertise. It's important for me to design with long-term organizational legacy and sustainability, not just immediate production quality.
Miro as the collaboration layer. Cross-functional misalignment was one of the core problems identified in discovery. Rather than expecting all stakeholders to learn a new tool or understand Figma, I used Miro as the shared workspace for planning and review: It's accessible to designers, researchers, and non-technical staff alike. This reduced the collaboration friction that had been causing rework.
Since visual assets are under NDA, here is a description of the final outputs:
The UDL 101 course was a multi-module Canvas LMS course with a clean layout, cheerful brand-consistent colors, and a clear visual hierarchy that guided learners through conceptual content, scenario-based practice, and reflection prompts. Interactive elements included accordion structures for optional depth, embedded knowledge checks with explanatory feedback, and a final applied project. The course felt, deliberately, like an example of what it was teaching.
The component library in Figma for designers was organized by content type: typography, color, iconography, layout patterns, and interactive modules. Each component had a "do / don't" annotation layer. Color and contrast documentation was embedded directly in the file so any designer opening it could see at a glance why each pairing was chosen. The Miro board was also organized so that researchers, SMEs and designers could continue collaborating in future updates and editions of the course.
The production workflow was a visual process map, a flowchart of approximately 12 stages from brief to launch, with named owners at each handoff and a linked template for each deliverable. It lived in the organization's shared drive alongside completed examples from the UDL project.
Successfully launched the UDL course, the organization's flagship product that had been stalled due to infrastructure gaps.
Established a reference architecture now used for all subsequent course development across the organization.
~70% reduction in development time for future courses using the system.
80% improvement in visual and instructional consistency across their product portfolio.
Designed a system that non-specialist team members could use and maintain independently, reducing ongoing dependency on external design support.
The system is the product. When I was hired to build a course, the most valuable thing I could deliver was not the course, it was the infrastructure that made every future course better and faster. Recognizing that distinction, and making the case for it early in the engagement, was the strategic decision that determined the outcome.
Accessibility scales when it's a default, not a review. Building WCAG compliance into every component in the library meant that every course built on the system inherited accessibility without additional effort. That's the only model that works for organizations where accessible design is a core value but design capacity is limited.
Designing for the organization that will exist after you leave. The most important audience for the governance documentation wasn't the current team, it was whoever would join the organization in two years with no context. Every decision I made about naming conventions, file structure, and documentation format was made with that future person in mind. That's what separates a design system from a collection of templates.