Responsive Elearning Framework

Build and easily updatable elearning that will render on any device


A project that I felt was necessary after building a bespoke e-learning skin for a client and saw the many disadvantages of this.
I hadn't seen any attempts at gaining in-depth research of user experience for e-learning templates. The research I had seen was dated and basic.

Each template is drastically different, if there is a best place for a play or back button we don't know where it is and we aren't finding it out by moving it all the time. E-learning templates aren't maintainable, they have no version controls and once one is completed then it isn't possible to improve it. The navigation controls tend to try and be quirky and fun, which detracts from and reduces the engagement of the actual e-learning


I was asked by other members of the team to add functionality that hadn't been researched to benefit the learner and didn't have a development time. I also noted lot's of functionality that wasn't explainable, the buttons and other options seemed to be a mixture of navigation, setting, resources and global controls. All pieces of e-learning I came across had far to complicated interfaces and everyone I spoke to reported bad user flow on all e-learning.

My first step was to try out some pieces of e-learning and try and gain complete insight into what the purpose of each of these buttons it. i.e. are the 'notes' a necessary part of the content or an optional extra piece of information, how does the learning know this? When is a resource an attachment and when is it further reading?


I removed all setting options to the top and all content options will appear within the content when necessary only the controls will appear where all the options originally appeared.

Once I did some development with some of the old templates I noticed that after adding accessibility options it was so much easier to navigate with the keyboard. I decided the navigation options could be made to fade out when the mouse isn't used and leave the learner to navigate the course with the keyboard undistracted.


The design is very simple as it is all about removing the complications and allowing the learner to interact with the course undisturbed. The responsive design is similar on each platform so it will seem intuitive to the learner if they take various courses across multiple devices. The swipe on a touchscreen device will become the preferred method for interacting with the course.


This project is still in it's first iteration. The only issue I have faced so far is that a past goal of the company was to offer totally bespoke design to their clients. There is a certain amount of explanation that is required about the difference between the design of the course and the design of the controls of the course.