Articulate Storyline Project

Learning how to use an important e-learning tool

Continuing to Learn

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.

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


Because there were always students in my Hanyang University multimedia writing class who missed the first one or two weeks of this blended course, one of my initial goals was to convert the old WordPress version of Unit 1 to Articulate Storyline so students could more easily get themselves caught up online. Additional background information and a link to that course are provided on this site’s Integrating Technology with Learning page.

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