UX/UI
Course Design

Digital Degree

Creating the online learning experience for future interactive media leaders.
Course pages from Centennial College's Interactive Media Management course.Tablet device display Sugarlash PRO home page, where the blogs are showcased.
Client
Centennial College
Responsibilities
UX/UI Designer
Content Population
QA Tester
Project Duration
July 2020 to April 2021
Team Members
Produced by Onlea

Interactive Media

The interactive digital media industry is experiencing rapid growth and the demand for experts is increasing. Therefore, Centennial College has created the interactive media management program to prepare students for careers in user experience design, project management, and communication roles in multiple industries. As remote learning became necessary during the COVID-19 pandemic, the program needed to be redesigned with online delivery in mind.
How might we make online learning fun and engaging for our interactive media management students, so they can develop into exceptional professionals by the end of their program?

Breakdown

This graduate certificate program takes place over the course of a year, in three semesters. This was a large project with a total of 22 courses to create.

Semester 1: User Experience Design, Content Planning, Project Management 1, Interactive Strategy, Development Tools 1, Videos for Interactive Media, Emerging Trends, Interactive Media Industry, Introduction to Graphics Applications, Storyworks

Semester 2: Senior Project, Collaborative Project, Project Management 2, Interactive Narrative, Development Tools 2, Analytics, Business Strategy, Studio Mentorship

Semester 3: Entrepreneurship, Pitches and Presentations, Career Networking, Field Placement
Breakdown of all the required courses per semester in the Interactive Media Management program.Breakdown of all the required courses per semester in the Interactive Media Management program.

Transforming the Curriculum

The challenge was taking the curriculum from instructors who tailored it for in-person learning and translating it for online delivery. We needed to create an engaging way for students to navigate online course content that is informative, meets the learning objectives, and presents itself in a variety of formats (e.g. text, images, infographics, quizzes, accordions, and more).

Who’s Taking the Course?

We spoke with department heads, and class instructors to find out online students from Centenntial College were from all over the world, despite the school being located in Toronto, Ontario. During the COVID-19 pandemic, many students have returned to their homes to take up online learning. It was imperative that every student can get the best quality education possible no matter where they are located or what timezone they lived.

We can define our main user as a remote international student. They have limited experience with online learning. They are feeling anxious in their education because of the pandemic, they are unsure if online learning will the best way to get the most out of their education.

We also broke down the user by their goals, actions, pains and gains, expectations, and learning competency.
Persona document for Kamal, who is an international student taking online learning.Persona document for Kamal, who is an international student taking online learning.User story for Kamal.User story for Kamal.
"As an online student, I want to have a stimulating and interactive learning experience, so that I don't feel like I wasted my time and money."
Writing a user story helps us prioritize key user needs and pain points that were felt by instructors and students. We did further research into our persona and built out user journey and user flows. We can understand any emotions throughout their learning journey and find opportunities that will further bolster the user story we generated. These insights included: asynchronous learning, concise learning, and interactive activities.
User journey document that describes a student logging into their student portal and taking online courses, that goes over task lists, feeling adjectives, and improvement opportunities.User journey document that describes a student logging into their student portal and taking online courses, that goes over task lists, feeling adjectives, and improvement opportunities.User flow document that describes the prototypical path of a student logging into their student portal and progressing through their online courses.User flow document that describes the prototypical path of a student logging into their student portal and progressing through their online courses.

Workflow

Working with a team of developers, learning designers, and multimedia designers, we established a workflow to translate 22 courses into an online delivery course. The entire program will be hosted on Brightspace's D2L learning management system. Understanding the limitations of that LMS, we get to work.
Flow chart showing the workflow steps, instructor's curriculum, breaking down into units, draft a script to condense course material, reviewed by instructor, implementing layout interactivity and images, populate into LMS, quality assurance and testing, final review, and approved.Flow chart showing the workflow steps, instructor's curriculum, breaking down into units, draft a script to condense course material, reviewed by instructor, implementing layout interactivity and images, populate into LMS, quality assurance and testing, final review, and approved.

Solution

Chapters are composed of one web page. Learners toggle through chapters till they reach the end of the unit. All the units get subsequently released throughout the semester.

Course content is organized into web pages. Each web page contains a chapter. Chapters are organized into units, and these units are subsequently released throughout the semester. Other pages include:
  • Introduction page
  • Chapter page
  • Assignment page
  • Lab page
  • Summary page
  • References page
*Only 1 out of the 22 courses is pictured.
Chapter page from the Entrepreneurship Unit explaining business planning.Chapter page from the Entrepreneurship Unit explaining business planning.Multiple pages in two columns from the Entrepreneurship Course, including homepage, introduction page, chapter page, lab page, summary page, and references page.Multiple pages in two columns from the Entrepreneurship Course, including homepage, introduction page, chapter page, lab page, summary page, and references page.

Wayfinding

There is a lot of content to go through in each of these courses. Learners are taking multiple classes at once, so it's especially helpful that information is organized. Wayfinding icons are used at the beginning of each page, to orientate the learner where they are in the course. There are callout boxes that organize information within the content to describe any graded content, activities, readings, interactives, and more.
Library of wayfinding icons, callout box icons, and showing these icons in use.Library of wayfinding icons, callout box icons, and showing these icons in use.

Chunking

Nobody likes to read long paragraphs, let alone the ones you could be tested on. Chunking course material into multiple paragraphs and boxes, will reduce the learner’s cognitive load to promote learning by making it easier to organize and synthesize information. As such, the course material was chunked into strategic paragraphs and callout boxes.
A page of long text labeled, "harder to focus" pointing to another page of text with headers, callout boxes and images labeled, "easier to digest".A page of long text labeled, "harder to focus" pointing to another page of text with headers, callout boxes and images labeled, "easier to digest".

A Picture Is Worth a Thousand Words

Providing the right images, you can make the content or concept you are explaining more relevant to the learner.

Creating custom images within the curriculum can improve understanding of the content. By pairing text with images, explaining concepts can be more relevant to the learner, increasing information retention. Adding images also helps with chunking the content further.
A page of text labeled "text" pointing to another page of text with imagery labeled, "text and images".A page of text labeled "text" pointing to another page of text with imagery labeled, "text and images".

Interactivity

The course was designed to activate and stimulate the learner's cognitive processes through a range of different modalities. This can include multiple-choice questions, clickable image hotspots, and more. These interactives were made using H5P.

Adding these kinds of interactives creates an active learning environment, rather than just passively reading content.
GIF of an image hotspot. A mouse cursor clicking on plus icons on a business canvas model, revealing more detailed information.GIF of an image hotspot. A mouse cursor clicking on plus icons on a business canvas model, revealing more detailed information.

Leverage the Internet

Instructors can use the internet to their advantage to create a robust learning experience! There are great videos that can explain the same key concepts in their course. We also provided a transcript for an accessible experience for all videos, if the learner wants to learn through reading.
Video callout box from the course with an embedded Youtube video with a transcript available.Video callout box from the course with an embedded Youtube video with a transcript available.

Accessibility

The course was meticulously tested for accessibility. We looked over the following to ensure they were meeting accessibility standards.
  • Desktop and mobile visibility
  • Screen reader friendly
  • Tab order
  • Keyboard accessible
  • Colour contrast
  • Text size
  • Alternative text
  • Colour blindness conditions
  • Providing transcripts
  • Heading ranks

How Was It Organized?

Colours

In order to distinguish each course offering, a distinct colour palette was developed. The selection of colours was carefully guided by Centennial College's brand guidelines, which calls for inclusive, dynamic, and motivational imagery.
Centennial College's two brand colours pointing to colour palette with expanded colours with text that reads, "inclusive, active, inspiring"Centennial College's two brand colours pointing to colour palette with expanded colours with text that reads, "inclusive, active, inspiring"

Iconography

In line with Centennial College's branding, a customized set of icons was developed to complement the visual identity of each course. These icons serve as intuitive visual cues that enable learners to easily differentiate between courses based on colour and unique iconography.
Breakdown of all the required courses per semester in the Interactive Media Management program, with unique colours and icons assigned to each course.Breakdown of all the required courses per semester in the Interactive Media Management program, with unique colours and icons assigned to each course.
Within course content, icons vary to supplement the material. In order to enhance the effectiveness of the course material, a diverse range of icons were utilized as supplementary visual aids. Creating relatable icons often takes the form of a character. To create consistency among courses and optimize the workflow, a character style sheet was also created.
Library of icons used in the course and avatar icons broken into different categories such as, hairstyles, shirts, accessories, facial hair, and side profile.Library of icons used in the course and avatar icons broken into different categories such as, hairstyles, shirts, accessories, facial hair, and side profile.

Style Sheet

To ensure all the courses were consistent, a style sheet was made for designers and developers to reference when building out these courses.
Style sheet for Centennial College's Interactive Media Management program, breaking down fonts, font sizes, colours, banner sizes, layout templates, and callout boxes.Style sheet for Centennial College's Interactive Media Management program, breaking down fonts, font sizes, colours, banner sizes, layout templates, and callout boxes.
Reflection
  • Imagery can be more consistent across courses, because multiple designers worked on this project.
  • Some H5P interactives were cut because they didn't meet the accessibility check.
  • Semester 1 of the project was slightly rushed, but optimized workflow as we worked on semesters 2 and 3.
  • More qualitative research could have been done. Speaking to more students would have given more insight to their goals, expectations, pains, and gains.
  • Documenting the creative process throughout the project goes a long way for creating an organized workflow.

Other Projects