Meet the Team

storyline 360 design challenge meet the team
Click on the image to view the interactive demo

How many different ways is there to introduce a team to new starters? We’ve all been there and done that, and I find that unless the way this is done is visually engaging to some extent, or at least a little quirky, it can be pretty boring.

The Challenge

That’s where I started with this e-Learning Heroes weekly design challenge #244 which was to ‘design an interactive graphic to introduce an organization’s team members or key players’. I wanted to create something that was a little different.

Here are some examples of Meet the Team designs that I came across online that inspired me.

Things that move create engagement – check out this Humaan website, not to mention this interesting team portrait.

Click on the image to view the Humaan website.

I also love this one. You will need to visit this Lateral website page to get the full effect. I spent a good amount of time playing with this one, trying to work out how I could recreate this in Storyline 360 – maybe a job for a rainy day…

Click on the image to view the Lateral website.

I also really like this one by Carrot, initially because it’s so colourful, but also because it demonstrates that it can be engaging to allow your team members to show their personality. I also like the effect of using the same lounge for all poses – and particularly the ‘coming soon’ framed message for those staff images that are not available yet – very effective!

Click on the image to view the website

The Design

This Atlassian website design is the design that finally caught my eye and stood out as a doable design to recreate in Storyline 360.

Click on the image to view the Atlassian website

The DESIGN AND THE Process

Starting with cutting the heads of the team members off (always a fun way to start a design!), the real challenge for this design in Storyline 360 was how to make the heads ‘bobble’ as Storyline only has entrance and exit animations. I considered using states and triggers, but at times this can be problematic with flashing on state change, something I’ve recently experienced when designing conversation scenarios.

I ended up with the team members’ images on the base layer, then used layers and triggers, with a trigger to do show the first of these six layers on mouse hover over each team member. On each layer I added the head image, rotated on alternate layers. The timeline on the layers was very short, with a trigger to show the next layer when the timeline ended and looping back through the six layers for each team member.

I then added a trigger to each of the head images on each layer to show a layer with the lecturn and audio narration for each team member when clicked, with a trigger to hide the layer when the timeline finished.

I chose to use the ‘text to speech’ audio that comes with Storyline 360 for two reasons. I wanted to try this out on a published demo, but I also wanted to avoid cluttering the screen with the information about each team member once they were selected, as this would have been predictable!

If you’re wondering about how I did the Dymo label effect, you can check this out here.

THE RESULT

View the interactive demo by clicking on the image at the top of the page.

If you’re so inclined, you can just sit and hover your mouse and watch the heads bobble – for hours really! I never get sick of watching bobbleheads!

Okay – so the audio could obviously be improved with a professional voice over artist – but the Text to Speech feature of Storyline 360 is worth checking out, and I think it served its purpose for this demo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s