Articulate Storyline Project

Learning how to use an important e-learning tool

Continuing to Learn After the MET Program

The Faculty of Education’s Master of Educational Technology Program at UBC places strong emphasis on learning theories, pedagogical approaches, and various frameworks related to educational technology in general and instructional design in particular. A key priority is focused on applying current learning theory to modern technologically-enabled instructional design practices. Students are not required to learn any specific software or technologies (except some basic HTML for authoring a wiki page in one of the core courses) and, in all 10 courses, they are encouraged to choose their own tools to best enhance their current professional practices.

After graduating from the MET Program, one of my priorities was to put more time into learning some of the popular e-learning authoring tools that instructional designers most often use. One of those tools is Articulate Storyline 2.0. 

Articulate Storyline Artifact 1: A Unit from a Blended Constructivist Course


Because there are always students in my real life multimedia writing class who miss the first one or two weeks of this blended course, one of my initial goals was to update the old online version of Unit 1 (that had originally been created in WordPress for a master’s project) so those students could get themselves caught up online. Some background information and a link to that course are provided on this site’s Integrating Technology with Learning page.


To take advantage of both my professor’s feedback and the interactivity that is built into the software, I chose to use Articulate Storyline for the update project. This had the added benefit of providing me with some insight about the challenges of integrating a Storyline course into a learning management system and implementing student tracking via SCORM, AICC, or Tin Can API. 


This project is actually still in progress. However, it is far enough to post the current iteration of the course as an example of the kind of approach that I take with this type of e-learning tool. Please note that, because no technology is perfect – and there may be compatibility issues with some mobile devices – I have linked two different types of players, as indicated by the labels above each thumbnail. Just tap/click on a thumbnail or use the large red button for the HTML5 Player, which works best with the Chrome browser.

HTML5 Player

Screenshot of the HTML5 Player on a Chrome browser

Articulate Standard / Mobile Player

Screenshot of the Articulate Mobile Player on a Samsung Galaxy S7 Edge

Articulate Storyline Example 2: Interactive Campus Map

For this part of the project, I reflected on the Mobile Learning Forecasting assignment that I did for the ETEC 565M course in my master’s program and recalled how augmented reality (AR) could one day be used by universities to enhance learning on any campus, starting with orientation for new students. Until that technology is fully developed and deployed, however, I think a feasible alternative that could be implemented online today is an interactive campus map that would  provide new students and faculty with orientation information via easily produced multimedia content.   I suspect that this already being done at some schools, but I wanted to know how much time it would take to create such a resource with Storyline 2.0.

I went out with my smartphone, took a few pictures and video clips while walking about campus, and then sat down at my computer. For the base layer (campus map), I had taken a few pictures of a temporary campus placard sign that was set up for International Summer School orientation (below left, #1).  I then imported one of the images into Photoshop Elements and cleaned it up a bit (below right, #2). Once I had my base layer, I moved it into Storyline and began adding the multimedia content. The current version can be viewed by tapping/clicking here or on the large map #3.

1. Original Photograph

Location: HYU Campus, entrance of Haengwan Park
Camera: Samsung Galaxy S7 Edge (no filters or tripod used)


2. Photoshop Enhanced Image

Software: Photoshop Elements v. 13
Tools: Crop, Eraser, Image Enhancements


3. HYU Campus Interactive Map