August 31, 2017

My E-Learning Design Process: Taking out the Trash

It will sound strange, but it's true: the most fascinating part of my life in Germany is recycling. To be more precise, the sorting of trash. Wait, don't go yet, this will actually be about e-learning! To give you an idea of the importance of this question, here's a photo of a document I received in the mail some time ago. If you're curious, it contained the news about the new color of our "bio-trash" bins. Serious business.

So, do you receive important news about your trash very often?

Of course, when I saw the title ("Keep It or Toss It") of this week's ELH Challenge, I could not resist. I had to come up with an interaction dedicated to the complex intricacies of the trash sorting. You can see my submission here.

In this post I'd like to talk about the making of this interaction, focusing on three points:
  • Thought process behind the making of this interaction and some instructional design.
  • Fast and efficient way of making a drag and drop interaction without the "Freeform" option. 
This is a reflective post and not a tutorial. I often enjoy reading reflective posts by designers and developers, as it helps me understand their thoughts and approaches to the task at hand. So, I hope you will enjoy it too, particularly if you're at the beginning of your e-learning development journey. For your convenience, I've summed up some "lessons learned" after each part.

Instructional Design

Yes, there's actually some thought and not only humor in this small piece. As you will notice, it doesn't have any theory or "help resources" included to support the learner. This is neither due to the lack of theory (there are plenty of schemes and manuals), nor an omission by accident. 

In fact, I first thought about adding an explanation of which trash goes where. But, my intention was not to test people's memory. Instead, as is my usual approach when designing training, I wanted users to learn by making assumptions and testing them. In a real life, you probably wouldn't read a manual about taking out the trash. Instead, you'd separate it however you feel is logical and be done with it. Thus, the only difference from life in this case would be an opportunity to get feedback on your assumptions.

Speaking of which, my original intention was to include the most confusing trash items. In fact, I selected 8 items at first, but decided to cut it in half, considering that ELH Challenges are usually short.

In short: 

  • Create life-like contexts and tasks
  • Devise activities based on popular misconceptions


It took me slightly less than 3,5 hours to create the "course" from complete nothing to finish. 

This may seem like a huge amount of time to spend on something as simple as 6 trash cans, a draggable object and some text. That's absolutely true, but only if you have a solid idea or a prototype to work from. Getting to this prototype is what's complicated and requires time. The biggest chunk of time (around 2 hours) was spent on ideation - coming up with an idea, scouting for available assets, choosing fonts and colors, and deciding on the final look. The rest was spent on creating assets, slides, interactions, as well as writing feedback, publishing, bug-zapping, and, most importantly, admiring the end result.

When I work on ELH Challenges, I do some formstorming and play with different ideas on paper before choosing one and developing it further. I have to say, unless a brilliant idea suddenly dawns upon me from the start, the more I engage in the formstorming, the better the result. So, the time spent on it should not be seen as a waste. This may be an obvious statement, but if you're locked in a "rapid e-learning development" environment, it's hard to stick to this opinion.

Formstorming is something I've learned in the Fundamentals of Graphic Design MOOC. As Lupton and Phillips (2015, p.13) define it: "Formstorming is an act of visual thinking - a tool for designers to unlock and deepen solutions to basic design problems. [...] Formstorming moves the maker through automatic, easily conceived notions, toward recognizable yet nuanced concepts, to surprising results that compel us with their originality." There are different ways to do it, but the approach I use most often is to create as many iterations of a subject as possible. If you're interested, this is a great example of 100 iterations of a letter A.

In this particular case, however, everything was defined by the trash cans. I made these directly in Storyline, so the rest of the module had to match in form and style. Still, even with this quite specific goal in mind, there were some questions to mull over:

  • How do I make sure that the user identifies the material of an object correctly? Since the assets are not photographic, it might not be obvious of a bottle is made of glass or plastic.
  • Where to place the drag object?
  • Where to put initial instructions?
  • Where and how the feedback will appear?
  • What about a progress indicator?
  • Should I add sound effects?
  • Should I add some limits to the amount of mistakes?
  • Fonts?
  • Colors?
And probably some more. I went through approximately 10 different slide design variations before settling on the final version. For example, I've tried adding a wall behind trashcans and writing the object description in the graffiti-like font (it didn't work well with a "cutesy" flat design) or adding a progress tracker.  

In short:

  • Formstorming is not a waste of time, because...
  • The more design questions you answer before starting with the actual development, the faster you'll develop.
  • You can formstorm in Storyline, but I recommend starting on paper first.
  • Next time someone asks you, "But how hard can this be?!", you can show them this post.


As I often say, once you know what you're doing, development is easy. In this case I followed my own advice and finalised one activity slide, before copying it several times and making small adjustment.

I didn't use any special tricks to create the activity. It is made from scratch, but you can achieve the same effect with the "free form" option. I prefer my own triggers, unless I'm really pressed for time (mostly because I feel more in control). The triggers are very simple:

"What's that with the layer 'Object?", you might ask. Excellent question. The layer "Object" is actually showing the description of the trash item:

Object "name" and description on a separate layer

The purpose here is to automatically get rid of this text when the feedback layers appear (instead of hiding it on each layer's timeline). I sometimes do this when I have layers and need to either hide a lot of objects at the same time and quickly, or show something only once. While this is not hugely beneficial for an interaction with just two layers, if you have to do this for let's say 10 layers, you begin to see the benefit.

The only other point I would highlight here, is that it might be tempting to see each trash can as a separate object and set up the triggers for each individually. In this case, however, as you most likely noticed from the triggers, I used two hotspots instead: a small one for the correct can and a big one, spanning across the slide, for all the others:

Green (correct) hotspot is placed over the red (wrong) one.

This way it was easier to create additional slides by duplication, as I didn't need to re-do the triggers at all. Instead, I simply moved the "Correct" hotspot to the right bin. An optional touch was to hide incorrect bins on the feedback layers, but this was also easily adjusted.

In short:

  • Consider moving objects from the base slide to a layer, if you want to consistently hide them when other layers appear.
  • Avoid extraneous work whenever possible (do you really need to have 6 drop targets where 2 are enough?).
  • My advice from this post is actually good. :) 


Lupton, E. and Phillips, J.C., Graphic Design The New Basics, New York, Princeton Architectural Press, 2015.

Liked this post? Hated it? Want to hire me or get in touch? Let me know in the comments below or ping me on LinkedIn. I also do freelance projects.

No comments:

Post a Comment