Elearning Video Players


This week’s e-learning challenge is to share an interaction for presenting videos in e-learning courses. I’m in the middle of a video-rich project so this challenge is timely!

Concept for the Video Player

The design concept for my example was taken from a current project I’m designing to help newly hired nurses transition into the role of professional nurse.

The interaction’s focus is on people (nurses), so there’s a strong emphasis on personal stories told with video. My original design and layout works, but I knew I wanted something more playful to use for my challenge entry.

Nursing E-Learning Course

The best way to change an existing design is to flip it on its head. Using a slate-textured background, handmade display font, and doodle graphic elements, I could quickly transform my professional designs into something more playful and friendly.

It took a little longer to roughen the edges of each box, but I felt the effect was worth the time. The unique designs of each thumbnail represents the unique stories each character has to share.

Design Elements

For the characters, I wanted to do something playful that would entice learners to meet the team.

My first idea was to add audio rollovers to have the characters say their names or give a quick introduction. I decided against the audio rollovers since I wasn’t doing anything similar in the rest of the project.

Ultimately, I went with a more visual direction by giving the characters and exaggerated pose when moused over.

Elearning Character Rollover States

Developing the Video Player in Articulate Storyline

As usual, the video player development was much smoother and quicker than the design phase. I estimate spending about six hours for the new design and about an hour for development. This includes minor edits and republishing. Storyline’s easy that way!

Since the interaction follows a tabs-style design, setting up the triggers and slide layers was a piece of cake. Each character has one trigger that shows a new layer.

Articulate Storyline

E-Learning Production Tips

The best production tip I can share is for the character rollovers.

Whenever I build custom image rollovers in Storyline, I like to make the images the same size for each state. This makes aligning the persistent objects (thumbnail background) much easier.

Here’s a screenshot of the original images for Brianna’s normal and hover states. You can see that the hover state is significantly larger than than the normal state.


I find it’s a lot more work to align the hover image to the normal image when the images are different sizes. To get around this, I align the two objects in Photoshop and then export each based on the larger image’s dimensions.

Transparent Images Equal Size

Back in Storyline, I can use Change Picture… to quickly swap out the pictures.

Articulate Storyline States for Elearning Characters

Meet the E-Learning Experts

Excited to hear from the e-learning experts? Go ahead and see what they have to say by viewing the example.

  1. Nice work Montse! I like that you took the time to photoshop all those hover-over interactions…. I know it’s not always something an audience will say they noticed, (but subliminally they do!) which goes to show the overall quality you put into your designs. 
    Keep up the great work!

    1. Hi Jon,
      Thank you for your comment. I use Photoshop all the time for creating graphics and for storyboarding. It is extra work but the final results are worth it and it saves time during development.
      Thank you for stopping by!

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like
Read More

PowerPoint Backgrounds: Gradients

Here are 10 free background gradient background images for PowerPoint. Each background was created using PowerPoint’s gradient fills…