
Online Courses
The courses are developed in Canvas (LMS). I collaborate with faculty to determine the structure and organization of the course and determine the theme and design. Then I design the website, test the usability, and build the course in the Canvas.

The first page that students will see when they enter the course. It guides the students to the important information of the course.

The page provides instructor's bio, photo, and intro video. It creates the presence of instructor.

The character is used in lecture to engage students. It is used consistently throughout the course.

The first page that students will see when they enter the course. It guides the students to the important information of the course.
Sample Course 1 -
Current Trends in Instructional Technology
Role in the project: Instructional designer
The faculty wanted to use characterization to foster engagement and motivation. With the purpose of the character, I determined and created an Instructional Technology (IT) Hero and applied it throughout the course.
​
The IT Hero was used to introduce the course, and provide a learning map and achievement markers. It was also used in lectures to allow students to interact with the content.

The first page that students will see when they enter the course. The banner image is designed based on the content of the course.

The course materials are divided into modules. Each module is presented in a consistent sequence.

The page is designed for frequent asked questions.

The first page that students will see when they enter the course. The banner image is designed based on the content of the course.
Sample Course 2 -
Art and Culture
Role in the project: Instructional designer
​
This is an introductory course for college of art. It included a large amount resources and course content. The faculty required a high quality visual design to represent the course topic and logical structure to organize the content.
With this goal, I worked with the faculty to determine the theme and design, and organized the course in a logical and consistent way.