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! 

From instructional strategy to teaching-learning cycle on to your choice of tool

If you have a hammer, you see nails everywhere. It’s a cliché, but that doesn’t make it less true for learning designers. If your company is awfully good at producing e-learning modules, every learning need can be answered with a sparky SCORM package. If you have a pool of trainers and a building with classrooms every learning need needs a classroom session. Of course you preach the blended gospel, but you are not really free. Well, we are. How to use that freedom well?

Although we believe fully that one can learn like Socrates did with his pupils, we also know there are many great digital tools out there we can use to make other types of learning possible. Our quest is “how to choose”. I introduced Diana Laurillards Conversational Framework as a basis for designs for teaching. Here I connect the various teaching-learning-cycles in the Framework to learning strategies. If you have found the why and how of your teaching, you know what should happen in each mini process in the cycle and with whom. Only then you can focus your search for tools.

Laurillard reviews  strategies, each with its own cycle. Here I describe them as short as possible. (You really should read her book and keep following her work. Although she is mainly devoted to Higher Education, you can adapt it easily to learning in the workplace.) In the last post of my trilogy, I will show how this insight in strategy and the application of it in a cycle can help us to describe and find digital tools.

What’s a cycle again?



In the Acquisition strategy the cycle is always conceptual. The learner follows the narrative designed by the author or the teacher while watching a video, reading a chapter in a textbook or being present at a lecture. It can be an online resource. Distinctive for this strategy is the mostly passive role of the learner.

This strategy hardly ever suffices to really “get it”. It takes a big investment in content design and creation to motivate and make the learning stick if there’s nobody there, just a book or screen.

An Individual Cycle

In an individual cycle the teacher has wrapped herself inside a resource. I am on my own.

I have a goal > I make a prediction on how the short term memory works > I check the correctness of my prediction using the feedback from the conceptual resource I study (a diagram of information processed in memory) or from the response the real world (try to keep stuff in my own short term memory) gives on my action > Use the feedback t modulate my predictions on how it is

Teacher Communication Cycle

When the teacher comes on board and talks to me:

I have a goal > The teacher explains concepts in some kind of live presentation or she has organized the concepts in a (digital) resource > This explanation and her questions generate a response from me as a learner > The teacher gives feedback on my understanding of the concepts > I modulate my concepts. This goes – ideally – on until I can remember and have understood the new concept.


In Inquiry the learner is still in a conceptual cycle, but now she actively creates, or is guided to create, his own narrative by searching through (online) resources, libraries or specific collections, datasets or even physical locations with a “critical and analytical approach”. He tries to answer a question or find proof for a hypothesis. It is not about creating new knowledge, but about actively building a personal network of knowledge he needs to apply skills with reason, or, become a scientist. It’s usually called constructivism or problem based learning.

Peers Communication Cycle

Going on an inquisitive journey can be nicely done together. Find out how things work in your organization dividing observational questions among colleagues. Or a team can go on a webquest. The teacher can be asked for feedback on the team’s output.

In the way Laurillard describes Inquiry, I find a clear overlap, by the way, with Bloom, as Laurillard sums up in action verbs the skills that are trained during inquiry. Most of them would fit neatly in the domain Analyse in the wheel: “Students develop their skills […]: questioning, investigating, analysing, hypothesizing, designing, interpreting, sharing, arguing, synthesizing.”


This strategy you will always find applied in social constructivism. Discussion can be diverse. You can recognize discussion in designs under the name of buzz groups, seminars, tutorials and whenever students get the task to “talk about this in your group”. Either with or without the teacher present, synchronous in chats or asynchronous in a forum, text based, with audio or even with video.

Learning something through discussion alone, can be pretty hard. The Framework clarifies what is needed to make it work. Looking at it digitally, an asynchronous forum combined with a discussion scenario or role taking promises the most success.

We are still in a conceptual cycle, but no discussion without peers. Sometimes a teacher who moderates and corrects is useful.


With the practice strategy we move up from the cognitive activity to the level of application. In acquisition, inquiry and discussion a teacher or peer has to speak or write to the learner to express his feedback. In practice however, the feedback can be internal, by experiencing success or failure after an action. Think of role-play in communication training, where you ask someone to do something for you and he does something entirely different. But mostly we see practice applied as “homework” that needs correction from a model given by the teacher or by peers.

Mundane as homework sounds, Diana reminds us that: “This is the goal-action-feedback-revision cycle, the modelling cycle, which is fundamental to the natural learning cycle.” Our job as teacher is to give excellent feedback.

Digital activities one can think of are simulations. A complex concept like “pricing” is explained easier if you see what happend with supply and demand if I lower the price of the Dutch cheese I sell.

Teacher Practice/Modeling Cycle

When I practice with the teacher:

I have a goal > The teacher elicits an action from me to put a new concept in practice (design a slide in an e-learning module that is based on the concept of what I think a STM can hold) or asks me to learn from a modeling environment (to ask different people to study my slide and report how their STM works) > I receive feedback on my work, either extrinsic from the teacher who is an expert or intrinsic feedback from my test persons, or both > I modulate the way I put my concepts in action and review my work.


This can comprise inquiring, discussing or practising alone or together but goes beyond. “Collaboration is a coordinated synchronous activity that is the result of a continues attempt to construct and maintain a shared conception of a problem”, cited by Laurillard from Roschelle and Teasley 1995. A group of students builds some kind of output containing new knowledge (if you take the term “knowledge” broadly). Outputs can be varied: an article for a trade journal, an instructional video, a press statement, etcetera.

Ever since communication technology became available for learning, there has been a search for the ideal tool for Computer Supported Collaborative Learning. Laurillard focuses on the wiki, discussion tools and microworlds that, by their design, support the collaborative problem solving or construction process. Interesting stuff!

Peers in the Practice/Modeling Cycle

Peers can do the same as teachers, and more. They can ask questions, challenge my understanding, ask me to write or produce something that shows my thoughts, correct me, model behavior, respond to me in a way that tells me if I have communicated successfully or edit my work if we are collaborating on a shared project. Peers can each represent a different background, perspective, experience or work style and enrich our production. But, if the teacher is not present, face to face or virtually, synchronous or asynchronous in time, she has no influence on the quality of the modulations the learners makes in this cycle.

Over to the tools

As a designing teacher, who is not afraid to use software or an app, I can choose something that facilitates every step in the cycle, for me or for my learners.

Something to:

  • Present and organize concepts in text or other media and store and retrieve them
  • Generate ideas or actions from others, set a task to think or practice
  • Practice with new concepts and behavior in a virtual environment or live
  • Share and edit output in text or media
  • Respond to output personally
  • Give automatic feedback (as a learner I can’t do this, only as a teacher I can program it)

What kind of technology suits me best, depends on my experience and expectations. Which part of my cycle is transformed in such a way that effectivity is significantly higher than with another tool, or with a conventional method or medium for my learners?

The book Teaching as a Design Science contains a really good comparison from conventional and digital technology one can use for each strategy. This will help us to describe and categorize those 1000 tools from Joost Verbrugge’s list (if we think this helps us).

View Table 6.3 “Types of Learning and the Different Types of Conventional and Digital Learning Technologies that Serve Them” from Teaching as a Design Science.

In the next and last post I suggest a list of fields to populate with data and options one could tick off when describing a tool in a database, with the focus on finding a tool that fits your needs.

How would you set up a Database that helps to select a tool?

databaseIn my previous posts I described two models that can be helpful for learning designers who want to select a tool to effectuate their instructional design. Not only your learning outcomes or instructional strategy determine what kind of tool you need, but also a number of organizational and technical matters. Suppose we would configure a database, what fields would you need to allow a quick search with a fitting selection of hits?

Let’s give it a try. My commadres and a few -padres from LOSMakers (and everybody else) are welcome to help. This is a concept of a list of fields with the options one can (multi-)select while adding a tool. From experience I know a database is not built in a day, so this is just a start. And maybe it doesn’t have to be a database, but just a good tag cloud?

In the following ideas for describing tools I try to combine the Pedagogy Wheel and the Conversational Framework. See my previous post for images of those models. The wheel is helpful because it actually categorizes tools; most of which we know. The Framework is good because it describes  complete Teaching-Learning cycles. Diana Laurillard has already done some of the sorting work in chapter 6 of her book Teaching as a Design Science. I combine these pedagogical features of a tool with practical information you need to choose well.

General information

Description and screenshots

A few lines of text about the purpose of the tool and how you can use it. Screenshots give an idea of styling and usability.


Where to find the tool?


Who made it and who owns the tool?

Target groups

  • Children under 6 (who can’t read)
  • Children under 12
  • Teenagers 12 -18
  • Students in vocational education
  • Students in Higher Ed
  • Professional adults

Database fields by Learning Strategy

Do we distinguish between what a teacher can do and what a learner can do? Most tools can be used by both sides. Sometimes, for instance in a Learning Management System or Virtual Classroom the teacher has more capabilities than the learner, but it’s practically always possible to upgrade a user to a role with more powers, so I think it’s more informative to look at the functionality then at the user. Although, often a teacher wraps the concepts she wants her learners to study or tasks she wants them to work on, in digital technology. I will mention that explicitly when necessary.


Bloom: Remember, Understand

Conceptual cycle, with or without teacher

Consume digital media

  • Read text
  • Watch video
  • Watch animation
  • Listen to music or podcast

Produce or edit media to be studied, containing concepts and/or tasks

  • Write and structure online text
  • Tell a story
  • Produce and design a presentation
  • Produce a video
  • Capture a lecture
  • Edit a lecture
  • Share/stream a lecture
  • Edit video
  • Produce animation
  • Produce music
  • Edit music
  • Produce podcast
  • Present data collection or image gallery
  • Reveal or clarify structures and relations between concepts, guide study behavior

Study media, process concepts or have understanding corrected

  • Summarize or annotate text
  • Answer questions in a text or posed with a resource and save your answer(s) to be corrected automatically or personally
    • Asynchronously by teacher (essay task)
    • Synchronously with (conditional) automatic feedback or model answers
    • Synchronously during a presentation
    • Answers can be represented graphically
  • Annotate presentation slides or video
  • Create a glossary
  • Collect concepts from various resources and restructure them (mindmapping)
  • Create and save study questions
  • Produce media, other than text, in response to a study task within the same tool/platform


Bloom: Analyze

Conceptual cycle with a teacher and sometimes with peers

  • Make available a (collection of) dataset(s), digital collection of resources or virtual museum
  • Search through digital collections or resources
  • Guide a digital search (webquest)
  • Collect, select, label or structure information, URL’s or files
  • Conduct a survey to collect opinions or other data from people
  • Analyze data
  • Represent data or result of analysis in a digital medium


Bloom: Evaluate

Conceptual cycle with peers and teacher 

  • Discuss asynchronously
    • In text
    • In audio
    • In video
    • In graphical representations
  • Discuss synchronously
    • In text
    • In audio
    • In video
    • In graphical representations
  • Organize/structure discussion by topics or groups
  • Combine resources with discussion
  • Vote on statements
  • Moderate discussion with super powers
  • Evaluate contributions


Bloom: Apply or Create

Teacher Practice/Modeling Cycle (with peers) with intrinsic feedback

  • Create practice exercises in multimedia with automatic feedback
  • Create adaptive practice exercises in multimedia with automatic feedback
  • Analyse received feedback automatically
  • Monitor your progress automatically
  • Reflect on your progress
  • Design a (role playing) game  that provides intrinsic feedback
  • Play a game individually or with peers
  • Experiment in a virtual lab, simulation or authentic microworld that provides intrinsic feedback
  • Experiment in a virtual reality environment that provides intrinsic feedback


Bloom: Create

Peers Practice/Modeling Cycle

  • Create a shared output, using
    • Text
    • Graphics
    • Animation
    • Video
  • Discuss the development of shared output in relation with the output
  • Organize and structure the collaboration process
  • Document and represent the collaboration process graphically
  • Analyze and guide interaction automatically

Pedagogical use case with screen shots

I think it’s very important to show a use case. A teacher explains the pedagogical cycle she has designed for her learning goals and how she has chosen and deployed the tool, or combination of tools, to facilitate it online. Screen shots give an impression of the learning environment she created. She reports on the results and could give advice on other teachers who consider application.

(Laurillard is working on a website where pedagogical patterns can be shared. See the Learning Designer).

Practical information

Besides the pedagogical use a teacher can make of a digital tool, practical conditions are also important in the selection process. A tool might be perfectly fit for the teaching-learning cycle you ant to facilitate, but too expensive, too difficult to install, it will not pass the security thresholds your IT-department has laid out, only works with the very latest browser, or too difficult to learn if you only use it once…

Accessibility for teachers

  • Software can be used online after creating account, without downloading and installation
  • Software needs to be downloaded and installed, may require permission from institution

Accessibility for students

  • Is embedded in a HTML page, no extra  Login needed
  • Can be opened with a link, no Login needed
  • Can be opened from a learning platform with single sign-on
  • Can be opened with existing Gmail, Facebook or LinkedIn account
  • An account needs to be created
  • Student has to download and install software
  • Mobile use on tablet or smart phone

System requirements

  • Operating system independent
  • Browser independent
  • Requires Windows version x or OS y
  • Requires specific browser versions
  • Requires Flash
  • Popups have to be allowed
  • JAVA needs to be installed
  • Not functioning within Citrix

Communication with other tools, platforms or systems

Is it easy or even possible to integrate a tool in an existing platform or to make it exchange data with other systems or tools? Here my technological knowledge limits my ideas about useful describers.


  • Styling can not be adjusted
  • Own logo can be shown in header
  • Colors can be adjusted
  • Types and sizes can be adjusted
  • Styling is limited to a chosen template
  • Styling can be fully customized

Costs per user

  • Free
  • Under €5 per user per year
  • Between €5 and €10 per user per year
  • Over €10 per user per year
  • One time purchase of software included updates under €100
  • etc

Usability as reported by users

How to specify this? Make comparisons with software everybody knows? Required learning time? This is so dependent of people’s experience with technology and attitude towards it. For some people 5 minutes of concentrated exploring of menus and buttons is already too big an effort.

Are instructions available? Online help? A community?


It would be nice if visitors to the database can rate their experience, and…


write reviews, commenting on how they used the tool. One could create a form for this so user experiences can be collected in a standardized form. This would allow comparing.

I end with an afterthought…

How to describe tools that can be used in one or more cycles for wholly different stategies?

Laurillard states that usually one type of cycle will not suffice to fully master new knowledge or skills.  Suppose I am studying to become a really good designer for learning. Would just the strategy Acquisition, where a teacher comments on an essay I write, will get me there? I’d probably need to do lots of Inquiry to find out what we know about learning and what digital technology can do for learning, Practice by teaching learners in a virtual classroom for instance, Produce learning material for different environments, Collaborate with subject matter experts and multi media specialists and chew on the feedback I receive from them and from expert designers. Each unit or module in a course can play out a strategy.

I categorize functionality by learning strategy. The strategies are discussed in the second post of this trilogy.) Maybe this is not the best way, because we will see that many functionalities in tools can be used in multiple strategies, but for the inventory it helps me to follow the structure of Laurillards book. I think we will also see that each strategy activates a higher level of thinking and also contains the first strategy and often also the functionality and tools used.

An example with the very versatile tool Mindmeister

Suppose I am learning to become the best designer for learning in the Western Hemisphere, and I happen to be rather fond of Mindmeister. I could study Laurillards book taking notes using Mindmeister (Acquisition). Search for comparable design frameworks or methods and again, use Mindmeister to structure my notes and collect URL’s and files (Inquiry). Next I am using Mindmeister to create statements in the Notes fields. I share my mindmap with peers and my teacher and I invite them to respond to my statements (Discussion). We use the results of the discussion to choose three different design methods and bring them into Practice to map out a learning scenario. Again we can use Mindmeister for our designs. In our last learning cycle we pick the best design to Collaborate on a design that we will develop as a new course, using Mindmeister to define the sequence, collect learning materials and divide and manage tasks.

Where will this take us?

Some Losmakers have shown enthusiasm for the idea of a database to facilitate their daily work. We decided during our Meetup on January 28 to describe the five tools we looked at, using fields from the list above. We discuss these descriptions using one of those tools, the platform Learning Stone. This will give us a good idea of the usablility of this platform. What we conclude there will be taken over to the discussion in our LinkedIn-group, to involve the greater community. Then we will see if and how a database or tag cloud or combination of both will evolve. At least we will have a better structure to conduct our monthly tool exploration.