Instructional Design Portfolio

I create online learning experiences that is user-centered.

The story behind it…

In 2012, I helped an online college to expand their virtual campus. Enrollment was declining and the college wanted to attract more out-of-county and out-of-state students.

How were we going to accomplish that?

Design one master course that allows the quick development of multiple online courses,  and yet making sure the instructional quality is there. The faculty developer has then the ability to focus more on content and instructional activities and less on the look-and-feel and other details of the course.

The thought process

The idea was to address both visual and instructional design. I wanted to design something legible, readable, usable, visually pleasant, and easy to navigate. And also, meet instructional guidelines for a quality course.

For the visual aspect, I wanted to use HTML and inline CSS to stylized content. And for the instructional, I’d pre-write some base instructions that covered all support information, institutional and course policies, syllabi, as well as tutorials for both students and faculty.

The challenges

The learning management system (LMS) where the courses were going to be designed didn’t allow the use of many of the cool HTML tags or use an external CSS (forget javascript.) The WYSIWYG was not quite user friendly. And we still wanted faculty developers to have the ability to easily add their content into the pre-built the template. I thought about authoring tools but they would only let me upload the courses as HTML files which you couldn’t edit once it sits in the LMS. You’d need to edit it using the authoring software which required expensive license purchasing.

What did the courses look before?

In 2012, some of the courses already followed some structure. But without the much needed manpower it was tricky to keep track if all courses followed the same standards. Here’s an example of a typical online course without a template.

Old course.png

This is a typical example of what was found in the old courses (see the duplicate menu items on the left.)

Now, this is how a faculty developer would get their blank courses to begin their work (without the template)…

Old Blank Shell.png

Imagine having to create all the menu items on the left and making sure the micro-instructions (like “click here”, ” go there”) are added.

The Before

So in 2012, the first master course template looked like this.

OLD Course Home.png

This would be the course homepage. The left menu and top widget is LMS-native. The content on the right is hand coded (HTML/CSS).

With a pre-designed structure, could spend their time and energy only writing the content, discussion and assignment questions and still keep freedom to make changes. I found that very (very) few made any changes. They just followed to write content and create the assessment questions.

The After

In 2016, with a new LMS in place and awesome resources I could  was very visually pleasant. So I decided to re-design the master course template around what the new LMS could afford me.

Course Home Template.png

The idea was that the course home page turns into a hub – you can get anywhere from here to lessen user’s cognitive load. And yet, let them know where to “Get Started”.

I created a button for each module, syllabus, schedule, and help. I experimented in Illustrator different colors and font combinations. I wanted something that would be my call-to-action button to the on boarding “Get Started” module. So I gave it a bit of a color.

buttons in illustrator.png

Blank courses would look like this one below.

NEW blank shell.png

New Course Design

With the new system, we also got new affordances. Less worry  about micro-instructions.   I had to think differently how courses would be structured.

Module Structure.png


Each module is pre-designed starting with an “Overview.”

M1 Overview Template.png

The visual is cool and instructional design is even cooler…

Visually I was pretty happy on how the new master course template came out. But more than just the visual aspect was the instructional design. All template items were designed to align with the Quality Matters rubric (Quality Matters is an educational non-profit that publishes a rubric guiding best practices for achieving quality online courses), another important element that weighed heavily in during the design of the master course template.

Onboarding with Get Started

Syllabi, course schedules, policies, help information etc were packaged in one wizard-like onboarding area: “Get Started.”

get started structure.png

Course Overview template.png

Tips for Success.png

Help & Tutorials

This next page was an embedded HTML page I had created back in 2013, and is embedded in Get Started. It sits on another server and we embed the HTML in all the courses. That way, when we need to make updates, we need only to do it in this HTML page and it would apply to all courses. Sorry for the red tags but I had to hide some sensitive information.

Help & Tutorials.png


I created a rubric for all the discussions. That way it would clear to all users how discussion grading is done. This can also be customized by faculty developers.

Discussion Template.png

Weekly Schedule

All online courses followed the same weekly schedule. So I came up with this graphic that was implemented in the Syllabi and Course Schedule


Today, the college offers more than 260 unique online courses. It also offers courses to partner institutions in the United States and Overseas, as well as new online programs.

With this number, there were many other areas in addition to online courses that I thought it could be helpful for their growth: brand identity, training, rubrics, documentation, logos. Unfortunately, I won’t be able to show logos on a public website due to privacy terms.

Not only courses but also an Identity

With the expansion of the virtual campus, I thought the college could use a brand identity. They had an in-house marketing team. My goal was not to re-do their work on the public website. It was to expand on it and apply it to the online courses. So I did some design work on documentation such this report document.

Screenshot of a Pages document portraying a report document.png

I added a layout to the development contracts faculty developers signed in order to create courses.

screenshot of the Pages document on master course development contract

Faculty Expectations document.

Screen Shot 2016-06-07 at 2.27.31 PM.png

Faculty Training

In 2014, the college also asked me to help them review the faculty training. Their existing content was very good. My idea was to just expand it. So instead of one four weeks training (yup, scary), I suggested we break it into two trainings: one for teaching online, and the sequential for folks who have been teaching already but wanted to develop a master course. With that, a new certification series was born. Today there are two different tracks, with four certifications in each.

It was a bit tricky to write the faculty training that would be carried fully online. One part of me wanted to write a whole lot of content. But I knew the majority of the users wouldn’t read it. And not because they’re not good readers. Simply because it can get really strenuous to one’s eyes and brain to keep reading on the screen. So I kept it simple.

I also didn’t want the course to tell them how to teach (since they were already experienced faculty.) But to bring in their current teaching methods into the online training, combine it with the technical information on how to use the LMS, become familiar with the virtual campus policies (for newly hired adjuncts), and introduce them to the idea of a master course. So then when they begin teaching they would know how to “read” a course.

I’m just going to include a couple of screenshots here. In the first unit of the training, to open a channel of communication, I thought it would be valuable to include references to research studies related to the field.

Screen Shot 2016-05-12 at 4.59.52 PM.png

For the training on developing a master course, I created this graphic to give faculty an overview of the course development process.

design-process copy.png

LMS Migration

I talked about the new LMS but I yet have to talk about migrating. Migrations to a new learning management system are not easy. It is a slow process: to select, purchase, communicate, set up, train, and move. I’ve only added a screenshot of a presentation I did on the migration plan. Unfortunately I can’t add the spreadsheet that includes the step-by-step of each phase. But I’ve made the presentation available.

screenshot of migration process.png