This was a big one. Motorola needed desperately to update their e-training course template that must have been built around the same time as GeoCities was all the rage. It was clunky, the navigation unintuitive and most of all ... ugly. We were tasked with a complete revamp: visually and programmatically. Mobile device sales people have to take a training course on each product from each company (Motorola and their competitors) every month and Motorola needed to stand out.
Our solution was a much more engaging and visually pleasing UI and content organization. The template is dynamic, utilizing page template for various types of content (video, HTML 5 animation, HTML chart etc.) and pulls data from a central JSON file for easy localization. Most stunning of all - there is even an IE8 solution, which was a requirement. This fully responsive course template can be used on multiple LMS applications across several different carriers and clients.
There was an additional need to be able to take a course and "wrap" it in what was called a reference tool - a more robust collection of content related to a product that Motorola wanted for easy reuse. While the e-training course is, by design, a linear experience, this allows the user to more readily access videos, comparison charts, and technical specifications for any product as well as revisit the training course, if need be.
Motorola wanted an aspect of fun in these courses so we designed the end quiz to be Android bot themed with custom scenarios and custom HTML 5 animations per theme. Animations are triggered by correct or incorrect answers as well as the end results (an animation for a pass and an animation for a fail). The themes are fun and whimsical to keep the content from getting too stuffy.
This video contains some of the animations created in the courses and quiz themes.
If all of that wasn't enough, the course template was coded with the ability to be wrapped up using Phonegap to create an Android mobile app (APK) for submission to the Google Play Store. This template truly became the "all purpose everything."
