Medical theme

Click on the image to view the demo

The challenge

This interactive presentation was developed as a submission to the Articulate e-Learning Heroes weekly challenge #69 Give Your e-Learning Skills a Checkup with the Medical Template Challenge. The challenge was to “build an e-learning game, presentation, or interaction for a medical topic or concept.”  The only stipulation was that the focus for the design should be around the medical industry.

The process

After looking through the resources kindly provided for this challenge, I started searching for medical infographics which eventually led me to this page on Erik Erikson’s Stages of Psychosocial Development on the Health Research Funding website.  I flagged a couple of other interesting medical topics as well, which could be inspirational for another project.

Medical Theme

On a personal level, I’m most interested in the psychological field of medicine and once I started to analyse the information in this infographic I thought it would make a good informative presentation for this project.

The design and development

Having decided to use the content from the infographic, it was fairly straight-forward to separate out the different stages and start thinking about how the course would flow.  In contrast to the way the infographic on the Health Research Funding page displays the information, I wanted to use a more linear approach and drew inspiration from this infographic.

I liked the idea of using silhouettes to represent the stages of development rather than detailed images, as I wanted the focus to be predominantly on the text content.  I find the infographic above a little “busy”, so I worked on my design being less visually complex and easier to follow.

This was a very basic template with just two slide master layouts – one with the silhouette characters and one without.  I formatted the background in slide master, using the Pattern Fill option – narrow horizontal, with two different shades of blue.  The rest of the design work I’m going to do in the actual slides.

The first slide I worked on was the slide with the 8 stages of development which is the one that has the slider (in Articulate Storyline 2).  My vision was that learners should know as soon as they get to this slide that there are 8 stages they will need to visit to view the entire presentation.  I worked with the black silhouette images to recolour them and added the recoloured images to the layout slide of slide master as a base for this slide.  I added the slider – at this point the slide didn’t look very balanced, but I needed to leave room for the text content.

Most of the time spent on development was in getting the slider to work.  This is the first time I’ve used sliders in a production and I’ll admit there was somewhat of a learning curve.  For this design, I wanted to show up front that there were 8 steps, whilst showing the progress and position the learner is at as they move along each of these steps.  I think I’ve finally got this to work the way I want it to.  The trickiest part was the initial step, because when learners navigate to this slide with the slider on it, I initially wanted them to see just the grey silhouettes with the first dark silhouette enticing them to start dragging the slider.

To get this to work I needed to set up an extra “initial” state for the image, which doesn’t have any information apart from the silhouette images, then I added the 8 states that coincide with the 8 steps on the slider.  I also set the slider to update “when the learner releases” the slider.  The other option is “while slider is dragged”.

Each numbered state has all the information relevant to the stage of development.

This is what the triggers look like – so they are set to change the state of the same image to one of the numbered states when the slider (which is a variable) is moved to one of the 8 steps on the slider.

Once I has this slide set up and working, I decided I needed to add an introduction.  Once again I wanted to keep this uncluttered and easy to follow, so with limited animation and transition effects, I added the introductory slides and content, keeping the look and feel in line with the design of the first slide I designed.

To maintain consistency throughout the presentation, I used the same 50% transparent white-filled shape as a background for some of the text content.  The fonts I ended up using are Gabriola, Whipsmart and Englebert, plus Adelle for the final slide (this font is one I’ve chosen for my branding – it’s on my business card, so I try to stick with this one for my name and anything to do with branding for The Knowledge Project).

I kept animations to a minimum, adding just a “float in” animation on the grouped background and text content revealed using the slider element.  The functionality of Articulate Storyline never ceases to amaze me – I wanted to add an animation to this element which was part of a “state” and I didn’t think this would be possible, but it was!

You can see how I’ve built a lot of detail into each of the states for the slider element in the image below.

The addition of the last slide was inspired by the design Kristen Anthony submitted for this challenge.  I thought this was a very effective touch to her presentation design and I hope she doesn’t mind me using it!  Thanks Kristen – here’s Kristen’s blog post on her design.

The result

Overall I’m pleased with the result of this design.  I think it is an informative and engaging presentation for the following reasons:

  • it’s visually appealing, with the graphic elements drawing the learners’ attention to the content
  • the design elements (colour, style and placement) are consistent throughout
  • the content is emotionally-driven and relevant to a wide audience
  • the learner has control of the navigation and can explore the 8 stages in their own way

One thought on “Medical theme

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