Instructional Design Portfolio

Julia Itani

I have my coffee. I’m listening.

I solve problems. I create online learning experiences. I’m currently an instructional designer creating learning experiences. I’m also an aspiring UX’er.

There is a lot in common between instructional design and user experience design. After 13 years doing instructional design I find myself naturally including to user experience design.
For now I’ve included my instructional design portfolio and soon will be adding my UX portfolio (now a work in progress.)


The story behind it…

The following shows some of work I’ve done for a higher education client in a span of 3 years. I’ve also designed online trainings for corporate but decided not to add them here since they are too outdated now.

In 2012, I started working with an online college that looked to expand their virtual campus. At that time, they had about 40ish online courses and only 1 instructional designer. Enrollment was declining and the college wanted to attract more out-of-county and out-of-state students. With one instructional designer who was already overworked they’ve reached out to me to help them expand their online course offerings.

How were we going to accomplish that?

I’m a big believer on using master courses. I think they’re key to developing multiple online courses in a short period of time, and yet making sure the instructional quality is there. By a master course template, I mean by designing one blueprint as a starting point to creating new online courses.

The faculty developer has the ability to focus more on content and instructional activities and less on the look-and-feel and other details of the course. And yet, the still had the freedom to make adjustments.


The thought process

In creating a master course template, 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 first master course

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

OLD Course Home.png

This would be the first screen students see when landing into the course. Except for the left menu and top widget, everything else is hand coded (HTML/CSS). The course structure on the left is standard for all courses.

With a pre-molded structure, faculty developers wouldn’t have to worry about building the foundation of the course. They could spend their time and energy only writing the content, discussion and assignment questions. They had the freedom to change anything in the template. But I found that very (very) few made any changes. They just followed to write content and create the assessment questions. Many of them appreciated how little they needed to spend with the instructional details and more on content quality.


What do courses look now?

Today we have a new 2016 master course template. We were moving to a new Learning Management System (LMS) which gave me an opportunity to re-think what was working and what wasn’t. The new system had its own stylesheet which 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

This is the landing page of the course. The idea was that it would become a hub for the learners. I didn’t want the users to have to look on the left menu in order to find where they are in the course. I wanted the “Get Started” above the fold.

Also above the fold, users see a header photo slider (unfortunately no js), course menu, Syllabus, Due Dates, and Help. The grid below the fold is the list of modules in the course. 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

Without the template a blank course in the new LMS would look like this. While I didn’t have the opportunity to run usability tests, I wanted to offload the user’s working memory and keep the left menu simple.

NEW blank shell.png


New Course Structure

With the new system, we also got new accordance. We didn’t have to worry as much about micro-instructions like “click here” since the new LMS took on that job so beautifully. With that, I had to think differently how courses would be structured.

Module Structure.png



Each module is pre-designed. The first item displayed when users get to a module is “Overview.” The headings are from the LMS. The vendor did a great job in applying web content accessibility guidelines WCAG 2.0. They also come with icons that can be applied through CSS classes in the inline HTML (one of my favorite features.)

M1 Overview Template.png

Each unit contains a least one Lecture, Discussion, Assignment, and Quiz. Each of these guys are also pre-designed.


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.


Get Started

I thought it was also a good idea to standardize syllabi, course schedules, policies, help information and package all that in one onboarding “Get Started.” I thought to make it a wizard-like package like installing a software on your computer, that is required to be viewed before users begin the course. At the end of Get Started, students would be quizzed on the items and should score at least 70% (they had unlimited attempts.) And the LMS allowed that. I added some screenshots below.

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