Evolution of an Elearning Program

Art Direction  +   Design  +   Programming
Here is the story of an elearning course and its transformation over five years.

The course’s structure was was a mix of ‘slides’ containing images and text animated to a voiceover, along with videos, interactive diagrams, drag-and-drop quizzes and multiple choice questions housed within a client branded interface. However, each year saw changes not only in the program’s look and feel, but also in its structure.

Being involved in the development of this series of courses was a great experience which allowed me to exercise some of my lesser used programming and animation skills in conjunction with my graphic design and problem solving expertise. The large amount of content involved also helped hone my proofreading and copy editing abilities.

Year 1

I designed templates for chapter openings, various text/image options based on length of text and photo/illustration required, a video page with lower third and layout for the multiple choice questions. I fleshed these out in Flash and made quick work of copying in text from the script as well as lifestyle image selection. These content slides were then delivered to our Interactive Team to populate and program the interface.

Interactive slides were more challenging. One of these we referred to as “The Wheel.” The Wheel was an interactive graphic composed of 10 icons in a circle formation alongside a block of text. Each icon required design thought for static, hover, active and visited states. This wheel was featured in every version of the course. We passed these graphic assets on to the Interactive Team for ActionScript 3 programming.

  • Slide template sketches

    Slide template sketches

  • Flash

    Flash animation

  • Interactivity

    Interactivity

Year 2

This year saw an update to the interface based on recently client developed courses. We added icons and removed other busy graphics to give a clean feel and provide additional room for content. The course was still in Flash with minor copy updates and refreshed lifestyle imagery.

Year 3

Year three brought big updates to the course—not only had it moved from Flash to HTML5, but it changed from a reading to purely viewing experience. Clean visuals, video scenarios and motion graphics replace the mundane text/image/voiceover format.

I was asked to research Adobe Edge Animate to see how it could help us convert earlier Flash interactions and motion graphics to HTML. The first experiment was with The Wheel. Through online tutorials, I was able to build, animate and program the slide’s interactivity without involvement from the Interactive Team. Adobe Edge also allowed us to make animations with a small output size, which helped in keeping the coures within size limitations.

The result was a dynamic HTML5 and video-based learning experience. The client was thrilled with the results and the course garnered positive employee feedback.

  • Interactivity

    HTML5 Interactivity

  • Flash

    Adobe Edge Animate

  • Edge Animate example

    Edge Animate example

Year 4–5

With the great success of dramatized scenarios and animations of year three, the following years did not stray from the format. New scenarios were filmed each year with some familiar characters returning to the dramatizations. It gave the content a TV drama feel, which kept employees interested to see what would happen next. Animation, interactivity and quizzes called for nothing more than updated text and/or images.