Customizing Moodle to create a seamless online UX for learners

Organisations such as yours spend considerable sums of money on an attractive corporate styling. This is applied in all corporate utterances, from jackets to wear at a conference to the signs in the building and of course, on the website. Your customers are used to this look and feel. What if they take an online course with you? It would be nice if they feel at home in your learning environment. But what if that’s Moodle?

    • Moodle looks ugly!
    • Moodle looks so clean!
    • Everybody recognizes Moodle immediately from the 20th century “boxes”!

Well, does this course page look like Moodle?


People who are familiar with Moodle will probably recognize some features. But it sure isn’t the cluttered course page one is used to see.

Online Academy for Physicians

We have designed and programmed this theme for our client American Medical Systems. Dr. Glyn J. Burtt, International Director of Physician Education and Development, approached us with his ambition to create a corporate academy for their customers. AMS always supports physicians who work with their products extensively. An online platform to offer instruction and guide surgeons’ practice with, for instance the GreenLight XPS Laser, is an important instrument in their customer relations process. Dr. Burtts plan was to build the F. Brantley Scott Physician Academy.

Dr. Burtt had a seamless environment in mind for users who migrate from product support on the corporate website to learning on the Academy.  That’s why our reference was their corporate style. Have a look at this screenshot from the website.


Physicians Communicate and Learn Mobile

The home page is inspired by these styling features.


The  website is designed with being visited with a tablet in mind. AMS specializes in developing systems for urological treatments. Urologists are techies and they walk around hospitals all day. Our Moodle theme design should therefor also fit neatly within 1024 x 768. The instructional design followed this principle. Everything the learner needs to move to a next level, fits in one screen view.

Introduction video only shown once

You may have noticed the button Show/Hide Introduction Video.

Directly under the menu the tablet screen is filled with an introductory video inviting visitors to join the learning program. After watching the video they swipe or scroll down to see what else is there, or they use the menu to embark on their learning journey.

On their next visit to the home page the video is hidden. As they have seen it already, they will want to search the Course Catalogue or check the Calendar for training events. If they want to see the video again or show it to a collegue during a coffee break they tap Show and the video slides down to fill the screen again. A nice custom built feature we use in all the courses for the introductory videos.

A theme reveals learning functionality in corporate style

On the screenshots you see some elements that reveal the curriculum and the learning functionality in the instructional design.


On the left you see how the Course Catalogue is categorized in Product > Level.

Trainees can learn their way up from the level Foundation to Master (Masters train surgeons). These levels correspond with their skills development using the Greenlight XPS Laser System.

The levels also correspond with the instructional strategy.

The courses in Foundation are designed for surgeons who embark on their learning journey as urologists. These have an instructional strategy based on Acquisition, set in an individual learning context. The course can be taken anytime.A course like Laser Physics is aimed at bridging the current knowledge of a surgeon in this domain to what is needed for understanding principles underlying safe use of laser technology on a patient.


Typical Moodle 2.8 Course Page

The target group is always in a hurry. Time lost on finding what to do and where to go is time lost for learning. That’s why we stripped the standard Moodle Course Page from all blocks. A Course only contains the learning activities and resources to acquire the knowledge of this particular topic. So we also took out section titles and icons and links to the typical Moodle items as Pages, Scorm packages or forums and swapped them for buttons. All the courses in Foundation have the same instructional course format so we could give these buttons the same name in each course.

  •  There is a Pre Test covering the material in the Module. If 70 % or more of the questions are answered correctly, the learner can skip the module and still get a Certificate. If not he has to Take the Module. These are self paced modules created in Captivate with BBC Horizon-like video clips.


    Custom Course page for F. Brantley Scott Academy

  • If some concepts needs clarification the button Discuss with Expert leads the learner to a Forum. Posts can only be answered by the Expert. Users can read all discussions to see if their question might be already answered.
  • Learn More opens a page with resources for further reference.
  • Evaluate invites users to give a review of their learning experience.
  • After this mandatory reflection on their learning outcome they can download and print their Certificate. Their results are tracked in their progress report.

How did we get here?

Talking through the Pedagogical Design

Glyn Burtt contacted us because he wanted to use Moodle for his corporate academy. He liked the idea of open source and he had read my post on Certainty Based Marking, an assessment method that is apt for physicians who need to rely on their knowledge when the going gets tough in the OR. I analyzed his plans for the curriculum that needed to be reflected on the Moodle site. What instructional strategies would be deployed and what combinations of resources and learning activities would be most effective, considering the professional context of the users?

Drawing Wire Frames based on User Stories

Moodle can accommodate practically every kind of learning and can organize it as you please. Before diving into theming and configuration of the site, setting up course categories and throwing content in courses, I took two steps to check with Glyn if his wishes were clear to us and to find solutions for steps in the learning and communication processes he had not thought of yet (this was not much, to be frank).

First I wrote short user stories for all the different roles of participants in the academy. The technique of writing user stories originates form software development, but I think they are immensely valuable for designing learning experiences. If the user stories were valid, according to product owner Glyn, our team knew what to configure, what could be used from the default Moodle functionality and what custom stuff we needed to program.

Next I drew wire frames to visualize the user stories. Wire frames, using Gliffy for instance, are easy to talk about. Is this what you want your users to see and do on the page? And how many clicks to get there? Here is an example.

Course page

After Glyn and I had sufficiently moved the items around and decided where each item should be on the page, a wire frame was ready for my partner Michiel Boerman, who used it to design and program the theme for Moodle. You would expect Michiel would ask me to keep in mind what possiblities Moodle has to set up a course page. But no, he said “Forget your Moodle experience”, because not Moodle is the source of the design principles but the pedagogical design, maximum usability and the design of the corporate website are the anchors.

Designing and programming the Theme

Michiel compared the wire frames to the AMS’ corporate website to see which elements from the website he could reuse. Then he looked at the Moodle code to see how he could build the menu, a grid for the home page and a course format.

Moodle doesn’t normally allow you to add a background to a topic section, least of all with alternating colors and an image behind it. Neither are buttons with a custom lay-out the standard, as you have seen in the screen shots. And of course it’s responsive so it adapts to the screen the page is viewed on. This is all custom programming in the Moodle code. And Moodle Moodle being open source, this is no problem at all. Glyn could check each iteration until it was to his liking. Editing content in the theme needed only a little guidance from me.

When the course format, as part of the theme, was finished, Sebsoft quickened the configuration process of the website by creating all the courses with the same template for all the items and helped with some other typical “make Moodle your own”-work. Hosting and installation was also their job, along with helpdesking me wherever I couldn’t find my way in Moodle quickly enough.

A Satisfied Customer

In this post I only talked about the website part of my work with Glyn for AMS. We went through the same steps for the learning modules that were created with Captivate as content for the Foundation courses. I am very happy that he has appreciated our cooperation.

Isabelle stepped in to educate me on optimising the content I had already developed for adult orientated learning. Her sound advice ensured that the project delivered a quality result that will stand the test of time. She gave invaluable advice on LMS deployment and her team created a functional platform for our initial trials. I wish I had Isabelle on board from the inception of the project – I could have avoided a number of time-sacrificing, project delaying pitfalls that needed ironing out later. She rose to the new challenges of managing contributions from collaborators in India and even tried to manage me!