CASE STUDY: Problems in the Oral Cavity E-learning module


Project title: Problems in the Oral Cavity E-learning module
Audience: 1st year students of the medical school
Created using: Articulate Storyline 2, Photoshop, Illustrator, After Effects

Interactive Patient Case Scenarios for Students

The University of Dundee School of Medicine is at the forefront of digital teaching. Students not only get to experience lectures and smaller group sessions but they are also exposed to a whole array of online tutorials and resources. These resources focus on encouraging students to link basic sciences, such as anatomy, biochemistry and physiology, with the core clinical problems that a patient may present with.

Currently the Medical Education Institute and TILT are hard at work redeveloping existing paper and digital resources into interactive online and mobile learning modules. Since the project first started the team have produced a number of E-learning modules that have been integrated into the curriculum. With that came valuable feedback from the medical students who completed them. It was evident, from the student feedback, that further development was needed—especially when it came to finding useful clinical images, illustrations and animations.

After a few projects they realised that they needed the skills of a medical artist/designer to contribute to the redevelopment. Because of that I’m excited to say that I’ve been brought on to help in this production and offer any advice on certain aspects of the design and functionality.

The Pilot Project

It was our first time working together as a team and we had a lot of modules to go through in the upcoming months. For that reason we decided that working on a pilot would help us gauge how long it would take as well as how we could best work with each other.

“Problems in the Oral Cavity” (“Oral Care” for short) was the first module we decided to pilot since it had all of the elements we wanted to assess production times on: illustrations, interactivity, imaging data outreach, questions/answers and providing feedback.

What Could We Achieve?

In my first meeting with my project lead, Penny Lockwood, I wanted to get a sense of what she was hoping to achieve with these redevelopments. As we conversed I found that Penny had a lot of great ideas on how to improve the existing modules—she just needed help from someone like myself to make them attainable. We narrowed it down to three criteria. It had to:

  • Be web and mobile friendly
  • Have more relevant interactivity
  • Contain our own medical illustrations and animations

As part of our first discussion Penny expressed that she would like to see a wider range of interactivity. She really wanted to see some kind of 3D rotation but was unsure of whether it was possible with the software we were using.

That was the kicker; I had to admit that I was unsure as well as I had never used the software before—all of the modules were being created in Articulate Storyline. On that account I went away and did some R&D in the program to familiarise myself with its capabilities.

Research and Development

Even though I had no prior experience with the software it didn’t prove to be a setback. The Articulate online community is very extensive and rich with helpful tutorials and useful forums. I had no problems when it came down to interactivity development and found the interface extremely easy to use.

I came back to Penny with a whole bunch of new interactive options (3D rotation included) as well as some suggestions and notes on potential interface designs for the Oral Care module redevelopment.

I proposed that we redo the entire layout design of the module to bring it up to date and also get rid of some of the clip-art like images.

It was really great to hear Penny’s feedback—this was more than what she expected and was impressed with the results. I think that this set a really good tone for both of us as we moved forward with the rest of the project.

Getting Down to Production

I approximated the Oral Care production to last from 1 month to 1 ½ months. Now it was time to put that estimate to the test. There were so many elements that needed to be included in the final product as well as have it go through a student review on its effectiveness.

My to-do list started to grow:

  • Create medical Illustrations
  • Insert medical illustrations into an interactive
  • Layout design of module
  • Create icons/buttons for module
  • Interactive design of module
  • Clinical imaging outreach and gathering
  • Write directional copy
  • Prep and gather student feedback from reviews of final product

1. Choosing the colour palette

When I was coming up with concepts and ideas I wanted to avoid using black on white—I felt like it wasn’t engaging enough, especially when it came to the question and answer sections. I settled on a combination of blues that could also compliment the imagery used as well as still have white text legible.


2. Chosen layout design of question and answer sections

A few layout designs were created during my R&D session. Below are some screen shots of the concepts and the final layout chosen:


3. Icon designs for easier navigation

The older module was a little hard to navigate (in that the links to other pages were hidden in a background pictures or in unusual places). Because of that I created a set of unified icon designs and implemented it into the new version.


It was great to see a few students commented positively in this design choice:

“I like that students can just go to the anatomy section, can go to the resource section and its there. And we don’t have to look for it ourselves.”

“…It feels easy to navigate especially with the patient return button…”

4. Interactivity developed using Articulate Storyline 2

The great thing about Articulate is that it exports the module in formats so that it’s viewable on most modern web and mobile devices. It made learning on the go for the students much easier!


When we tested a near final version with a group of students we got a really good response about the learning effectiveness of the question and answer part of the module:

Question to student:
What do you dislike most about it?

Student feedback:
That I can view Dr Gray’s answers before I put my own answers, therefore there is no challenge to the module if it is to be used as a text of students’ knowledge.

Because of that we modified the final module so that the students needed to input their own answer before receiving feedback or background information about the questions asked.

5. Medical illustrations with an interactive twist

The old module relied heavily on multiple medical illustrations of the head to help the student figure out anatomy of the parotid gland and its surrounding anatomy. I would have completely agreed with the choice of using public domain images but then I saw the set of medical illustrations that they were using and for what purpose.

They were from different artists with different styles and varying orientations. There was a lack of visual continuity between the medical illustrations shown. When viewed individually, they worked as a teaching aid, but when asked to relate one to another, I had a hard time trying to piecemeal it together in my head to form an understanding.

Because of this I decided that a layered illustration, depicting the various anatomical layers that surrounds the parotid gland, would better tell the story. For more explorative freedom, these layered illustrations were put into an interactive that allowed the student to dig into the deeper layers of the head.

Various anatomical layers were sketched out in pencil on tracing paper before being scanned into the computer.


Layers were then colourised in Photoshop. The nerves were laid out in Illustrator before being imported into Photoshop for further rendering.



All rendered layers were then imported into After Effects where I animated leader lines and labels. A PNG sequence was then rendered out and brought into Articulate. A little bit of fiddling with the scrubber interactive and the below animated gif is an example of what the student would see as the final interactive.


It was great to see the feedback from the student review of this interactive:

Do the illustrations help you in your understanding of anatomy and pathology? ​
“Yes the anatomy is fantastic and is an incredibly useful tool alongside the module, the more of it the better”

What do you like most about the module? 
“The anatomy illustration, will be bookmarking the page for anatomy revision!”

 6. Image resources for lecturers

As part of project wrap up, the head illustrations created for this project were also placed in a PowerPoint presentation for lecturers to copy and paste into their teaching material.


Here’s a link to a public friendly version of the interactive. Stay tuned for more interactive E-learning module case studies this year.

Thanks for watching!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s