My Role: Co-Lead Instructional Designer
Project Type: Course Design, Video Creation, Interactive Element Creation
Software Tools: Canvas LMS, Adobe Illustrator (Vector Graphics), Genial.ly (Interactive Elements), H5P (Interactive Elements), Camtasia (Video Editing), Adobe Audition (Narration), HTML/CSS (Web Design)
Audience: Public Health Professionals in the Rocky Mountain region
Year: 2024
The script for this project was written by my co-lead designer who used PowerPoint slides from a previous in-person workshop to develop the course content. Once they had written the script, I reviewed the content to help determine how to best represent each part of the content (text, videos, interactives, etc.) Once the outline had been determined, it was my responsibility to design and code the layout for the new course. From designing the logo to general user experience flow, I used an iterative process to adapt my designs after collaborating with my co-designer and members of my team.
The key obstacle in planning module layouts for this training was the breadth of information that needed to be conveyed. I believed that a single page content format would be more user-friendly for the user in the Canvas LMS. The drawback was that this method would likely inundate the learners with too much information to review at once. To meet this conflicting need, I designed content that could be collapsed or opened so that learners could focus on one section of content at a time and move through the page as they were ready.
An added bonus of this design strategy was that learners could still review the module as a whole (overview, content topics, homework, and live learning session expectations) before diving into content.
Once the layouts were completed, I began to create our video content for the course. For most of the videos, new vector images had to be procured from a stock image website (with proper licensing) before I imported them into Adobe Illustrator to edit the assets. When making these edits, I highly considered representation of diverse groups in the images I used. I also used Adobe Illustrator to storyboard my assets to later help with the video creation.
I used Camtasia to create the final video products and made use various animation and transition features throughout the video. I was also responsible for narrating the video scripts and made edits to narration files in Adobe Audition.
For interactive elements, I utilized H5P and Genially. The reason for using both related to accessibility and style. I found that, in general, Genially had better outcomes for accessibility for more complex content. For content that could simply be displayed in a slideshow as text and images, H5P was more heavily utilized.
One of the other benefits of Genially was its user-friendliness to design on a more granular level and with more options. I was able to use animations and transitions while also ensuring that all elements met WCAG 2.2 AA accessibility standards.
The feedback process of this course was broken down by module. Once a module had been completed, I sent it for review internally to other team members. I received actionable feedback that I immediately implemented to ensure better design outcomes.
As luck would have it upon completion of this course design, our organization purchased full access to a new Learning Management System, D2L Brightspace. I was then tasked with translating my design in the Canvas LMS (HTML, inline CSS) to D2L Brightspace (HTML, CSS, Bootstrap).