Making an Interactive Org Chart Using e-Learning Software

Org charts! Pretty boring, right? Just a bunch of names and titles laid out in a tree.

Let's see what we can do to spice things up a bit with some e-Learning software.
A (not so) recent challenge in the e-Learning Heroes community tasked participants "to design an interactive graphic to introduce an organization's team members or key players."

That's where we come in today. I'm going to let you behind the curtain to see how I went about tackling this challenge.

The Inspiration
The first thing that came to mind when I thought of "interactive org chart" was the way the characters in The Brady Bunch look at each other during the opening sequence (in that 3x3 grid). It's quite possible that my youngest son was watching the show at the time. 

The Plan

What I had in mind was a recreation of that opening sequence, where the characters would turn their heads to follow your mouse movements.
In order to pull this off, I figured I'd need some source material. Time to pop the Brady Bunch DVD into my laptop and take some screenshots. Then I sorted through them, hoping to find enough good poses to work with.

I didn't quite get all the poses I wanted, so I did what any good e-Learning hero would do: I improvised. If you look carefully at the images above, you'll notice that the one on the right is the mirror image of the one on the left... close enough, right?

Images in hand, it was time to fire up Articulate Storyline, my e-Learning authoring tool of choice.
First, I set up the images. To make things easy on myself, I did each one separately. For each image, I created 9 states (one for each of the 9 positions in the grid). 
After that, I put in 9 hotspots (over the images) and got to work on the triggers. For each hotspot, I added triggers to set the corresponding state for each of the images (e.g. when you hover over hotspot 8, or Mike, all the images change to state 8 so that the characters face him).

That's about it.

The files
Here are your links to:

• the completed org chart
• the Articulate Storyline source file (Brady.story)

What can you do with this?
It would certainly be a fun way to introduce people to team members, management of any other group of (ideally one with 8 or 9 members). The Brady Bunch are iconic, you can piggy-back off that recognition to add some fun without having to get too silly.
Leaving the org chart concept completely, you could use a Brady style layout for your table of contents or review screens.

Have you got other ideas? I'd love to hear them! Sound off in the comments or drop me a line on Twitter.