Interactive Timeline: ELH Challenge 315

March 20, 2021
Background image of runner running on an open road. Numbers 1-12 are presented on an interactive timeline in the foreground for a 5K training program.


I believe it is important in the world of instructional design to stay abreast of new, existing, and emerging technologies so that you are not limited by a specific authoring tool when proposing training solutions for clients. While Articulate Storyline is not a new tool, it is a popular industry standard for e-learning development. 

I learn best by just diving in head first and DOING something.

The best way, I've found, to keep up with technology trends is to experiment. Things don’t always turn out the way I first envision them, but I always come out the other side with some little nugget of knowledge or skill that I didn’t start out with. To that end, I have begun tackling some of the challenges Articulate puts out each week as part of their Articulate E-Learning Hero's Challenge series. I just have fun with these. I play around with them in my down time as a way to sharpen my skills and learn new techniques in the tool. I hope  you enjoy seeing what I’ve come up with. 

The Challenge

This challenge was to create an example that demonstrates how interactive timelines can be used in e-learning.

My Approach

The first obstacle for me in any of these practice projects is to determine what my topic will be and figure out what problem I want my example to solve. With no real client, I pulled an idea from my own experience. 

Due to Covid precautions, our household, like many others, is full of people. All day. Every day. With remote work and school, there is a lot of time being spent in front of a screen each day. To give ourselves a mental break, my daughter and I try to get outside and walk around the neighborhood. Recently, my daughter suggested that we step things up a notch and train for a 5k. I’ve walked many 5ks but never run one. I’m not sure it’s for me, but I’m trying to do the whole mother/daughter bonding thing, so I started looking for a training program for beginner runners.

Background image of runner running on an open road. Numbers 1-12 are presented on an interactive timeline in the foreground for a 5K training program.
Experience the Project

The program I found incrementally increases time spent running/walking over a period of 12 weeks until you have built your endurance enough to run (or, in my case, maybe slow jog) an entire 5k. Since requirements change over time in this example, I decided a timeline presentation would be a great application for this content. Users are directed to interact with the module by selecting a week number on the timeline. The training suggestions for that week will appear on the screen. I felt having all information closely clustered for easy comparison would result in a better user experience. Therefore, I designed click-to-reveal events that all occur from the main screen.

Conclusions and Takeaways

This was my first challenge to do in this series, and I had fun with it. I like the simple, straightforward interaction. If I were to change anything, I would select a different font to use in the pop-up areas. It looked quite different on the final player than it did in Storyline. I went back and adjusted the letter spacing a bit to adjust for this, which helped. Ultimately, it didn’t bother me enough to warrant redoing it since it was just a project for fun. 

If I were to play around with future add-ons, I might add a variable to track the weeks that the user clicks on and displays a congratulations message once they have viewed all 12 weeks. Another ELHC focuses on using lightboxes. The congratulations message would be a perfect place for a lightbox. There is definitely potential for this little project to grow.

Experience the Project