eLearning Course Engine Responsive Uplift

The Project

The course engine powers ethics training courses so they can be served to clients. It was originally built in Flash, but as Flash support waned and mobile use surged, the need for a product redesign became clear. 

The project called for a modern redesign that would be:

  • Responsive
  • Accessible (WCAG AA compliant)
  • Translated (into 60+ languages)
  • Customizable

The Design Process

We wanted to keep the spirit of the original course engine so learners would feel like they were in a familiar environment. The team developed mood boards, then moved on to collaboratively designing the look and feel.

Accessibility

Making the product fully compliant with WCAG AA guidelines involved working closely with multiple teams.

Working with other designers, we had to ensure that the layouts and visuals were all clear and easy to understand. The course engine has 16 default color palettes to choose from, so we had to make sure each passed contrast standards throughout the product.

The majority of the work for accessibility was done with the development team. A lot of meeting these standards has to do with the way a product is coded, so things like keyboard controls and screen readers work properly., This was especially challenging on highly interactive pages, like the drag & drop activity. At the time, there was no standard keyboard controls for this type of activity, so we had to make our own. 

Educating content creators on the importance of accessibility was key. The course engine provides a frame for courses, but there are accessibility considerations when writing and choosing images.

Customization

The ability to create custom designs for specific clients also had to be considered. Working with the development team, we came up with different ways to make this possible, giving content creators more options and flexibility.

The sample courses below were designed by other designers in the company. My work was creating the ability to implement varied designs to different courses.

Language Support

Over 60 languages had to be supported. To make this happen, there was a lot of research and collaboration with the translations team. Many languages use different alphabets, have different grammar rules, or read from right to left. Right to left languages were the biggest challenge, and involved a lot of work with the development team as well, because almost everything had to be inverted.

The Results

Mobile usage on the product continues to rise, and new features are being added regularly. All the content created on the older Flash version can be used in the newly redesigned version, so plenty of content was available at launch. Clients were comfortable moving to the new design because it reminded them of the old one, making the transition seamless. Hundreds of thousands of learners around the globe have used the product for their compliance training.