Sheru! Shell Bryson

Design and develop a solution to replace existing online e-learning with a platform to support multimedia-rich training materials.

Role: Technical Project Lead, Developer

The Design

This project was to losly follow an Agile process, albeit with a single sprint. Starting with a consultation with an internal training department, existing content was reviewed and requirements captured. Key to the design: ease of use and administration and delivery as part of an existing Intranet platform.

A series of wireframe prototype screen designs were presented to the customer demonstrating proposed functionality, giving the customer an opportunity to review requirements before the build began.

Requirements:

• Deliverable via the Intranet platform
• Integration of user accounts with the Intranet
• Content Management System for handling training materials
• A mechanism allowing a user to track their progress through training
• Playback of multimedia content

As a team we considered the existing platforms and the best way to deliver against these basic requirement. The Intranet platform was a Windows server running classic ASP with a mySQL back end. It was decided that we would use the existing software stack.

Platform:

• Windows Server
• mySQL

User Interface

I was keen from the start to break away from some of the more traditional layouts we had for web delivered content. Rather than static pages, I felt it would be more engaging for the trainee if they felt a ‘flow’ through the training materials. A sense of progress, if you like, to encourage them to pay attention and engage.

The user interface was design to be simple to use. A simple windowing metaphor was introduced, using hand-crafted javascript (these are the days before jQuery!). This enabled the user to quickly navigate around content, ‘messages’ and media playback windows.

Navigation was something of a bugbear for us – a number of our existing Intranet-based systems (including the Intranet itself at this point) were hampered but ‘organicly grown’ navigation. In other words, a bit of an unweildy mess. It was important to me, and the ease of use for the end users, to come up with a simple easy-to-use way of navigating quickly around the content.

Primary navigation is achieved through a series of sliding panels within the ‘myTraining’ panel. Content can be quickly located using the ‘Find’ field in the top right of this panel, enabling the trainee to quickly jump to specific training modules. Incomplete training items are marked with a star.

Playback of training material is achieved through another panel which can be positioned to the trainee’s preference.

The Build

Construction began with the creation of working administration and content pages, while in parallel the training team began working on multimedia materials using Adobe Contribute. Over the period of ~3 weeks, construction of the UI elements, administration and front end pages continued with weekly progress reports to the project team and customer.

Construction was straight forwards: Classic ASP for the server side heavy lifting, hand-crafted JavaScript for the UI elements and mySQL for record storage. We opted to keep the actual training materials within the filesystem rather than as database blobs due to the large size of these files.

iTraining was successfully released and used in production for the training of studio staff.

Gallery of production screens: