May 3, 2016

My instructional design process: ELH Challenge 127

In this post I will describe the thinking and design process behind my submission for the ELH Challenge 127: Learning Journals in Online Training. I hope this may be useful for those who want to know what does an instructional designer do, where the time goes and what does it really take to create a short and technically simple interaction. I'll also touch on the mechanics of this project, such as triggers and variables. For those who already know these things, this reflection may serve as a way to compare notes or encourage reflective exploration of your own practice.

Personal goal 

In addition to the purpose of the challenge, I had a personal goal for this project: to use photos in the design - as simple as that. Working in the extremely fast-paced environment coupled with the action-packed personal life, I have to be very conscious about my time budget. I often gravitate towards flat design and shape-based graphics because it is faster for me to create my own simple assets than rake through piles of royalty-free resources, trying to find the exact picture that I need. This time I wanted to incorporate photographic assets while staying within my time budget.

Choosing the subject

The example in the challenge already featured "compare your answer with expert's opinion" approach, which I have used myself quite often in the past and I wanted to make something different this time. In addition, I'm often skeptical about free-form writing in e-learning as it tends to produce gibberish answers. Of course, this doesn't mean that this technique should not be used, just that it should be used thoughtfully, providing some extrinsic motivation, benefit and/or purpose for the learner. Therefore, instead of creating an activity that would simply give you the correct answer regardless of what you typed in the data entry window, I wanted to have an interaction that would make the typing meaningful and necessary.

With this in mind, I narrowed my options down to three:

1. Setting personal learning goals for the module and reviewing them in the end.
2. Creating and presenting an elevator speech for your presentation.
3. Exercise in writing SMART goals.

I started prototyping an example for the first option, but soon realised that it doesn't fully match my personal goal of using photographic assets, even though I spent quit some time on finding the right background photo. Therefore I abandoned that topic and moved on to the second one, which matched my goal and was more practical.

Design and Development

The Structure

The elevator speech idea came from an instructor-led course on presentation skills. In the actual training, the learners are asked to create and then present an elevator speech to pitch their upcoming presentation. In my fist version of the challenge I went with the same approach: the learner would be asked to create an elevator speech using the provided form and then face a situation where they would have to present it.

The original sequence looked like this:

  1. Title slide
  2. Create an elevator speech
  3. Meet an important stakeholder
  4. Present your speech in the elevator
  5. The end

Since I was keeping in mind a "reluctant learner" persona who would be inclined to skip complex tasks where possible, I realised that when the learner meets the stakeholder on slide 3, they may not actually have the elevator speech and that I need to decide how to deal with this. Should I make this a learning point and tell them that the stakeholder was disappointed with their lack of preparation? Should I allow the learner to go back and come up with an elevator speech now that they know it's important? In the end, however, I realised that since I'm trying to provide a "user error recovery" option, the best strategy would be to prevent this error from happening.

With this in mind, I changed the flow of the interaction and made it more story-based:

  1. Title slide
  2. Meet an important stakeholder
  3. Flashback to creating an elevator speech "in the past"
  4. Present your speech in the elevator
  5. The end 
Now the course felt as a more coherent story rather than a bunch of activities strung together. Furthermore, the learner would be directed to the writing activity via flashback in a story, rather than as a weird "oops, let me go back a slide and fix this" option. In addition, the situation would immediately provide the learner with the context for the activity, rather than make them annoyed about having to go back after realising the importance of the previous slide. As a gamer, I'm quite familiar with the latter feeling and it's not something that people enjoy!

Turning the course into a story also helped me solve the problem with transitioning the learner into the timed presentation slide. I didn't want to start the timer as soon as the leaner enters the elevator, as they would need time to understand what is happening and what they should do. In other words, I needed to explain the task and give the learner control over when to start the timer. Also, I wanted to explain why the elevator speech suddenly appears as if it's written on the wall. Returning from a flash-back made the transition easier and saying "you prepared so well you can almost see it in front of you" explained the appearance of the elevator speech.

As I mentioned in the discussion of the challenge, the scene in the elevator is the one I would test on real learners before committing to it. I would really want to know if the learners would find the presentation part valid and normal. In addition to their feelings, I would need to consider the environment as well: for example, would it be possible for the learners to actually present in front of the screen? If they are doing this course while sitting in the open office, this most likely wouldn't be feasible. 


As you probably noticed, so far I haven't really said a single word about Storyline and how the course was technically created in terms of triggers, variables and other complex stuff. I think this is a great example that it's not the tools or technical complexities that are the key to instructional design, but our knowledge and creativity. 

In fact, the Storyline side of the module is quite simple, as I used the text entry fields to set values for the text variables and then displayed the variable values on "Your Speech" slide.

The interesting part of the course is the "timer" in the elevator scene. Each elevator button has two states: "normal" and "selected", with "selected" being a customised built-in Storyline state. The "selected" state is triggered when the slide timeline reaches specific value. I didn't use cue points since I knew the exact second values I needed (i.e. 60 seconds divided by 9 floors).

To ensure that only one button at a time stays lighted (i.e. in the "selected" state), I assigned all of the elements to the button set. This way the state of any button automatically changed to "normal" as soon as one of the buttons within the group was "selected".

It can be pointed out that by adding "selected" states, the buttons became physically clickable, which is true. To hide my shortcut, I simply covered the button group with a triggerless hotspot and in its properties, disabled the option "Show hand cursor on hover", to be sure:

If you're a purist, you can simply create a trigger for each button to change it's state to normal based on the states of other buttons, but that takes quite a bit of time.

The learner is taken to the next slide as soon as the time runs out. You can use a trigger based on the timeline, but I used the trigger based on the state of the last button: as soon as floor 9 lights up, the course moves to the next slide.

Look and Feel 

I tend to spend a lot of time on playing around with colors, shapes and pictures. It gives me a lot of personal satisfaction, but doesn't always get the job done, so to avoid any time-sinks, I force myself to first create a colorless black-and-white course prototype, containing all the text and placeholder elements that I would need for the course to function (e.g. buttons). Once I know what I will have in my course and how everything will need to behave, I start selecting fonts, adding colors and other visual elements. Not only this approach keeps me focused on the right things at the right time, it also gives me a better idea where, how and if I can use slide masters and color schemes to speed up my design process. Coincidentally, it also matches well with the Elements of User Experience framework I mentioned previously.

The defining element for the color scheme was the elevator image as it was much easier to adjust my color scheme, than to find a good elevator photo that matched my idea.

For the typeface, I wanted to have a clear sans-serif that would look good in all caps, produce bold (rather than elegant) headings, as well as a readable body text. In the end I found my font inspiration in this Dribbble shot and used FontSquirrel to find a free font matching the one in the picture (Raleway). With the title font selected, choosing the body font was mostly about finding a nice pairing and my final choice was Roboto.

Get the file

If you want to take a look at the file itself, it is available here. Please note that you may need to install Roboto and Raleway fonts if you want to keep the original look and feel. I release this to the world under this Creative Commons license, so as long as you attribute some of the credit to me, you can do whatever you want with it.

Naturally, if you simply want to use any Storyline tricks (e.g. how to build a timer) or other things you may have learned, you don't have to credit me, but feel free to let me know in the comments if this was in any way helpful to you.

Areas of Improvement

Since my main limitation was the time budget, not all of my ideas made it into the final version of the challenge. Most of them, of course, concern the elevator presentation. As some of the commenters pointed out, the slide felt a bit too static. I have to say that I certainly agree with that and the static version was intended because of my time budget rather than not because I haven't thought about this. In fact, I had a lot of ideas, ranging from simple to complex, such as:

  • Test the elevator scene with the realistic text that a learner may type. I have discovered that if you enter >400 words into each field, the course "breaks down" and does not show any values at all, so you probably don't want to encourage essay writing. In addition, I'm not sure how the text box would react to large amounts of text - I would suggest building a scrolling panel just in case.
  • Making the avatar more animated (e.g. by changing her facial expressions) - this was actually something I later implemented, although I'm not fully happy with the result.
  • Adding some "hmms", "ahas" and "rights", to simulate passive listening. 
  • Making a transparent elevator cabin so that the learner could see some movement outside of it and feel that the elevator is actually moving. 
  • Adding ambient sounds throughout: sounds of the lobby noises, elevator arriving, doors opening, elevator moving, etc.
  • A hypothetical video that could be done inside the actual elevator.
  • Blue-sky thinking: adding a possibility for the e-learnign to analyse learner's speech and provide feedback, as well as adjust the avatar's expression. 
However, since my resources were not unlimited, I had to make do with what was feasible within my budget/scope and matched the goals of this challenge. I also think that any imperfections are sometimes more valuable and encouraging learning points than ideal models. If you see a perfect product, you may feel that you will never be able to achieve that state and be awed and intimidated and discouraged in equal proportions. If you see an imperfection, you may get an idea how to improve it and be inspired to act upon it, ending up feeling better about yourself.


Some of the learning points from this challenge and this reflection:
  • Use a story to create a coherent structure of your course content and activities. 
  • Have a complete prototype with all the text and elements before desining the look and feel.
  • Use "Button set" if you need only one element out of many to be highlighted at a time.
  • Identify the dominant and hard-to-change elements of your course and align the easy-to-change elements with them. 

No comments:

Post a Comment