The Stuff That Résumés Are Made Of

I’d recently been admiring some examples of graphic résumés, but couldn’t imagine how I could ever do one. Turns out Articulate’s resident nudger, David Anderson, keeps an eye out for that sort of thing and his challenge this week is to come up with an interactive résumé or portfolio. So time for me to figure it out.

I haven’t had much call for a résumé since I’ve been independent, but creating an interactive graphic where I could play with the idea of a résumé sounded like fun, so off I went.

Click Image for Demo

Inspiration

My friend and talented freelance e-learning designer Donna Carson gave me edits for a bio I submitted with my DevLearn speaking proposals on Friday. The phrases she used made me want to both laugh and go conquer the world at the same time. Her description of my “fearless flair” in designing training inspired me to come up with “Fearless Designs!” “Bold Voiceovers!” and “Daring Development!” to describe what I do.

For graphic inspiration I turned to old movie posters. They had the expressive graphics and cool details I wanted, plus they could handle the dramatic phrases I had in mind.

My Graphic Inspiration

Design

Graphics: To start, I pinned old movie posters I liked and chose a color scheme that resonated with me. You can clearly see I used the colors and rough layout of the Charlie Chan at the Wax Museum poster. For text callouts and credits I used elements based on other posters including The Beast From 20,000 Fathoms.

Theme: I chose a detective theme because I was drawn to the idea of Humphrey Bogart’s Sam Spade. He’s on the right side of the law, but still seems a little shady. (His line that the Maltese Falcon is “the stuff that dreams are made of” inspired this post’s title.)

More Graphic Inspiration

The Theater: I wanted an entry screen so that, once clicked, the user’s full attention is on the initial visuals, music, and animation when they hit the main screen – and having them click a ticket to get inside made sense.

The way the overall flow works is based on the little theater I practically lived at as an undergrad at Humboldt State University in Arcata, California. The Minor, off the little town square, was an old art house movie theater that changed its double or triple features at least three times a week. I spent a few thousand of the happiest hours I’ve ever spent in my life there, and got to see a gabillion classic movies like the ones that inspired this piece.

The Minor Theater

When it was cold out, you’d come off the street through a thick red curtain, get popcorn and admire the old movie posters in the lobby, then go through another red curtain to enter the theater. So I was seeing my résumé as one of those old posters in the lobby.

Audio: I wanted to bring it to life with sound. There are effects for audience buzz, curtains being pulled aside, cheers, applause, police whistles, sirens, screams, breaking glass, etc., but I wanted a theme song. The whole time I was working on this I kept hearing a driving theme somewhere between Peter Gunn and James Bond. Lucky for me I’ve got an “in” with talented songwriter, musician, and freelance e-learning guy Dan Sweigert who was able to write and produce the theme song in no time flat.

Content

Résumé Elements: I kept it simple and included my (boldly-phrased) skill set, education, experience, and the main software I use. The sections for education and experience were by far the biggest creative challenges, but in the end I was happy to find a quick way to blow through them that still maintains the tone and theme.

Brevity: I find it endlessly entertaining that each of the links from the main screen shows just one screen of content (at best) that makes the audience go wild. I wanted to get in, show a glimpse of just a morsel of my work, and get out. The full versions of each piece are in my online portfolio, and the link to it is in the player tab at the top.

External Links: I renamed the player’s “Resources” tab to “UNCOVER MORE!” and had fun coming up with suspicious-sounding titles for the links to my blog, online portfolio, LinkedIn profile, and Twitter account. They make me laugh every time.

See It In Action!

Enjoy the vintage-inspired goodness right here.

 

 

Let’s Start at the End (Of Your Course)

This week’s Articulate E-Learning Heroes challenge is to send a little love to the end of your course. It can be lonely and confusing back there – (“Is it over?” “What am I supposed to do?”) – so this week we’re sending back a life line.

The Beginning of the End

Context & Theme

I wanted to indicate we’re starting at the very end of an interminably long course. My first choice was to start at the end of pi, but finding the end of pi is even more nebulous than the end of most courses, so that was out. (Maybe when I see Neil DeGrasse Tyson at DevLearn in October I’ll ask him if he’s made any progress on that Pi issue.)

So instead I created (the end of) a course called “Enough Already! 5,000 Little-Known Animal Facts”, which starts on the last part of the last fact about the last animal.

Indicating Completion and Next Steps

Spelling it Out

To be clear that you’ve reached the end of the course, I start with a congrats slide that also indicates you have a little more to do before you go.

Final Decisions

Final Decisions

Which leads to an animal-themed screen where you get to make decisions.

Hover State Visual: Hovering over each picture reveals where you’ll go if you click on it.

Hover State Audio: Hovering also reveals a bit of audio. Its purpose is to add a touch of interest, amusement, and wake you up – but there have been reports of startled coworkers and kitties as of late, so consider yourself warned.

Gate Screen for Feedback

Gate Screens

After you make a selection you’ll go to a gate screen to confirm your choice.

David Anderson had a gate screen challenge a few months ago where he talked about them, and you can also see the different examples created by members of the community.

Placeholder for Feedback

Room for More

In this example, if you choose anything other than “Exit” you’re taken to placeholder slides that could harbor summarizing thoughts, more resources, ideas for review, or a means of leaving feedback.

See it in Action!

Take a look at this wild little ending right here.

 

What Do I Think of Storyline? Well, Since You Asked…

This week’s E-Learning Heroes Challenge is to come up with a “Top 10” list of things you’d tell someone about Storyline. You can collect your favorite resource links and curate them any way you’d like.

I basically took everything that I normally say to someone who asks me about Storyline, put it all together with appropriate links, and tied a bow on it. (Not unlike last week’s challenge where I did the same for what I tell future freelancers.)

Opening Screen

The Design

One advantage of the gallery layout on my blog is that I can instantly see what sort of design I should do to contrast with my recent work. Since my last two entries haven’t had vibrant color palettes, and since spring is officially here, I went for bright and springy with a little bit of silliness and a little bit of elegance.

I also didn’t want a main menu with squares or buttons that linked to the 10 points. I wanted the menu to be a creative, vibrant, graphic embodiment of the theme. Once I made that decision, the idea for the springing-up flowers came easily.

Main Menu

Main Menu Flowers: I wanted flower shapes that I could fill with photo captures from their related content pages. So I took out my trusty Wacom tablet and started drawing the basic outlines of the flowers, stems, and leaves. I did it in Storyline by going to Insert > Shape > Lines > Scribble and drew them right on the slide.

Then I adjusted the outline weight and color and did a picture background fill for each shape using a tight capture from each of the larger flower photos.

To make the flowers pop in their hover states, I increased the weight of the flower’s outline by a pixel or two, and increased the size of each flower by about 4 pixels in width and height.

Audio: The sound effects for the flowers are two different sounds on top of each other. One’s a pop and one’s a spring. The singing birds are a piece of audio that I looped. I knew it was possible, but had never done it before. A quick Google search took me to this simple how-to. (Thanks, David!)

Content Page #2

Content Page Colors: To get colors for my text, fills, and outlines that went perfectly with the flower images, I used the heck out of the eyedropper tool.

Content Page #5

Photos: They’re all from Microsoft Clipart. I wanted big, clean, bold, colorful images.

Fonts: I’ve used the title font, Blue Chucks, a couple of times lately. Same with the paragraph font Copse. When you’re a cute font, you’re gonna get used.

Content Page #9

The Content

It is what it is! This is what I tell people who ask, and these are the resources I direct them to.

The Finished Product

You can see it in all of its springy loveliness right here. Enjoy!

 

This is Why Freelancers Need Floaties

This week’s Articulate E-Learning Heroes Challenge is to create a photo collage that tells a story.

I’ve just gotten home from a (great!) week at the E-Learning Guild’s Learning Solutions Conference in Orlando, and the theme that kept coming up was freelancing. Not just in sessions, but in countless random conversations, and I found myself offering a lot of advice to hopeful freelancers.

I Smell a Theme

So because there’s only so much space in my head and this is the topic currently on tap in there, my photo collage story this week is about a guy who wants to freelance. The points I’ve included are a summary I quickly put together for this piece, but it’s similar to what I was sharing all week.

The Story

If I’m going to tell a story, I need a starting point. So I overlaid our (miserable) hero on top of the rest of the photo collage so that I could establish his yearning-to-go-freelance motivation. The underlying photos and their content, each of which reveals a portion of our hero’s journey, can be visited in any order. And of course you get to see the result of his efforts at the end.

Visual Design

I kept the visual design pretty simple. The photos are framed in a pseudo-Polaroid fashion. The caption font on the top photo is Dawning of a New Day. The title font on the pop-ups is Swiss921 BT, and the main pop-up font is Candy Round BTN Condensed.

I reused a beach and palm tree from a recent post about freelancing, mostly because I wanted the tree for the end scene.

And I reused poor Ian again. I’ve forced that poor man into service as an airline pilot and a beer-guzzling traveler in recent weeks and wanted to give him a rest, but I needed someone who could fit into the outfit at the end, and he had the perfect figure. (Sorry, guy.)

Storyline Design

When clicked, each photo in the collage pops up on a slide layer with more info. Then I have each photo disappear after viewing it. That way I was able to set up a new layer of interest below. (Not unlike my approach to this menu.)

That interest includes having each photo, in miniature, drop down into the palm tree and hang there like an ornament. You can then click on those ornaments to review their content. I did this by adding a second slide layer for each collage photo.

And, of course, I had to show Ian’s transformation after he’d followed his own plan, but I could only show that after all photos had been viewed. To do this, I created a variable for each photo. After all of them have been visited, Ian and his final outfit are triggered to appear.

See the Result!

You can see Ian in all his freelance glory here.

I’ve not had this happen before with Storyline, but I found I got very erratic results in getting Ian to show up at the end when viewing the published files. I published to Web and included HTML5 and Articulate Mobile Player on iPad output.

Ian always came in just fine when viewed on the iPad – but on Chrome, Internet Explorer, Firefox, and Safari it would sometimes work and sometimes not – even after endless rounds of cache clearing.

But I’m hopeful you’ll see Ian at the end just fine. Enjoy!

We’ll Always Have the US Passport Office

As excited as I am about packing up and heading down to this year’s Learning Solutions conference in Orlando in a few hours, I wanted to squeeze in some time to play along with this week’s E-Learning Heroes Challenge, which is all about creating interactive screenshots.

Post-Traumatic Budget Analyst Syndrome

I’m pretty sure David wanted us to focus on software for this challenge. I keenly noted this about the time I was posting my completed entry.

He’d remarked in his post how much training all of us create based on documents, charts, and software (then clearly outlined his software challenge in detail) – but “documents” apparently struck a nerve and I was suddenly having a flashback to my life as a Budget Analyst in a very large, document-heavy organization where a big part of the job was getting my peers to understand and (ostensibly) care about reams of vital-yet-soul-deadening documents and forms.

So my reeling mind started working on creative ways to present a stultifying form using the interactive screenshot approach.

The Boring Document:
The US Passport Application

The Boring Document

Looking for a dull form? Who ya gonna call? Though the IRS has nothing but contenders, I chose the US Passport Application because:

1. I understand it. (Enough.)
2. I knew I could set up a quick bit of context to show when and why someone would use it.
3. I was hopeful that the context would tap into the learner’s own motivations enough to make them want to, you know – be motivated.

A Midcentury Looney Tunes Design

The Style

Choosing Paris as a motivational destination was pretty easy. And after I chose the character, the background, the groovy font, and the clipart, it had become sort of a midcentury Looney Tunes kind of thing. So that worked.

Oh, and I liked the blues, but I detested the passport form’s own mustardy color. But I eventually realized it would be a lot easier to integrate it into the color scheme rather than try to mitigate it with other colors.

The Views

But mostly I wanted to focus on a design that made it easy to navigate and understand the document. So I planned three views:

The Multiple Page View

The Multiple Page View: Treating the multiple-page form like a tabbed interaction seemed like a clean approach, so I created my own tabs on the right. It’s simple, with just two pages, but you could make the tabs much smaller and use it for a far more extensive doc, too.

I also put a “Finish” tab there so you could escape at any time, and because I wanted to show the happy aftermath of having effectively used this form, and I needed a link to get there.

The Single Page Overview
Using a Mouse Hover

The Single Page Overview: This is on the same page as the multiple page view; it just requires hovering your mouse. I chunked the form into numbered sections. When you hover over a number, that section becomes highlighted on the right, and on the left a short explanation appears. The hover effects are simply states attached to the number icons.

The Section Detail View

The Section Detail: When you click on one of the numbered sections (and this is where the interactive screenshot part of the interactive screenshot challenge comes in), you go to a detailed view of that section. I put each of these on a slide layer.

To make the details a bit more involving and helpful, I added some abbreviated instructions and a little demo of what should happen on the form using sound effects and animations.

Of course, these detailed sections could include any number of things. You could have a video showing or telling why a particular item is critical, you could link out to other resources or help, or you could come up with other ways of illustrating what you need to convey for that section.

Attaching the Document: I also thought it made sense to attach the full doc in the player. If this were a real e-learning piece, I’d certainly do that.

Success = Paris!

Success = Paris!

Or at least it does in this piece.

See it in Action

Here’s the finished piece. I hope you enjoy it, and may you always have great ideas for presenting forbidding documents of your own.

A Revealing Submenu

You’ll see this simple-but-fun submenu when I post a portfolio sample for another course – but I like it, so its getting its own post.

I created it for a subsection covering the nine parts of this organization’s code of conduct. I wanted it to be attractive, responsive, kind of fun, meaningful to the organization, and track which sections had already been visited, while still making each one easy to revisit.

The Idea

I thought it would be fun to have it look a bit like a game board. As the learner clicks on each section, it reveals part of a photo.  Once the photo is fully revealed, you’ve finished that section. I had lots of photos to choose from, but narrowed it down by looking for one that:

• I could make square to fit the tic-tac-toe/Brady Bunch layout I had in mind,
• Included people from the same general part of the world that learners would be from,
• Would show people involved in an organization-related activity, but I didn’t want to reveal what they were doing until the learner had visited almost all nine sections of the code.

The Pieces and Parts

The Grid: I used the bright course color palette to create the nine boxes. Since the organization refers to their Code sections by number, it was appropriate to label them with each section’s number, as opposed to a description or image. Looks more like a game that way, too.

The Basic Grid Design

The Side Reveal: So learners could see the name of each Code section before visiting it, I added a trigger to each square in the grid. When you hover over each one, a slide layer shows the section name on the right side.

Side Reveal on Right With Mouse Hovering Over Grid Section #5

The Photo Reveal: The photo is on the slide master. I created each square as an inserted object on the slide, then keyed the text directly into it. When the learner clicks, the visited state is revealed. The only difference between the normal and the visited state is that I removed the fill color for the square. I still wanted the number to be visible after the square was visited so that it would be easy to go back and revisit the section, and I liked the different-colored outlines that remained after the fill color was gone.

Clicking Reveals a New Piece of the Photo

See it in Action

This is just a demo of the menu, of course. The section header slides it branches to in the real course take you off into scenarios and all kinds of fun stuff. But you can see the menu sample here.

Thank You, Tim!

By the way, in this sample you’ll briefly see the section header slides I used in the course. These slides are heavily based on Tim Slade’s lovely – and free! – template that he so kindly shared on his site.  Tim’s a gifted and generous designer and you should check out the rest of his site while you’re busy getting the template. (Thanks, Tim!)

Section Header Slide Based on Tim Slade’s Design

At Last! A Drinking Game I Can Win

For this week’s Articulate E-Learning Heroes Challenge, David Anderson dared us to create a simple game. (Oh, it’s on.) I created an Oktoberfest Quest game, wherein our hero drinks his way across Germany in order to reach the hallowed beer tents of Oktoberfest in Munich. Somebody had to do it.

A Triumvirate of Inspiration

Timing: David put out the challenge only hours after I’d participated in the weekly #lrnchat discussion on Twitter. Everyone was terribly serious as they discussed how to work collaboratively in groups – until someone brought up beer as a motivational tool. Well, THAT got them dancing in the Twittery aisles, and the whole evening changed. I don’t drink much, but I made a large mental note of what got them engaged: The mere mention of beer.

Topic: As they say, go with what you know. After collecting entirely too many degrees in German, teaching German, and studying, working, and living in Germany – I thought to myself: “maaaaaybe something German…?”

Potential Game Features: I wanted to focus on designing a game board and some sort of progress meter. Since a map of Germany seemed like a natural game board, and a giant Maßkrug slowly filling with beer seemed like an outstanding progress meter, I decided to try those.

Design

Since my primary elements, the map of Germany and the Maßkrug, were better suited to a portrait orientation, I flipped the standard Storyline layout so they could inhabit the full screen.

Once I decided to use the game to teach German dining customs, I put a wooden background underneath the map to evoke the feel of a restaurant table, and the checkered tablecloth behind the Maßkrug for the same reason.

I also knew that sound effects would be critical, especially for filling the Maßkrug. I got lucky and found some evocative ones.

 

Game Progress

There are two measures of progress: linear progress on the map, and liquidy beer progress in the Maßkrug.

Linear Progress: I thought a little Krug at each completed stop on the map would be a good tracker, and moving by train would make it feel like you’re making game progress, and also evoke the sense of traveling through Germany.

At each stop I used a zoom region to zoom in tightly on the city, and then an immediate “Box Out” transition on the following question slide so that, together, it would feel a bit like you’re zooming from the macro map to the micro restaurant where our protagonist needs some help. 

Beer Progress: Every time you answer a question correctly, the Maßkrug fills up a little more. By also using it to briefly recap the teaching point, it doubles as a bit of learning reinforcement.

And speaking of learning stuff, I chose to make it an all-or-nothing game. You’re required to answer each question correctly in order to go forward. One wrong answer and you’re back in Dresden waiting for the train.

I credit Michael Allen with this torture. I saw a banking example of his where you decide whether or not to approve a series of checks for payment. One wrong decision, and you’re back to check one. It ticks you off just enough that you get determined to beat the stupid thing, and while you’re at it, you learn the principles being taught.

The Big Finish

I won’t spoil it for you, but it’s kind of awesome.

Play It!

My Oktoberfest Quest game is here, but you should also check out the other creative, amazing, and beautiful game ideas posted by others in the comments section of David’s original post here.

No One Loves The “Next” Button Until It’s Gone

I haven’t participated in many of the weekly design challenges that David Anderson puts out to the Articulate community, usually because of a looming project deadline. But if so many other busy designers are doing it, what’s my deal?

So this week, casting all current deadlines to the wind, I took up David’s gauntlet and spent my Friday night Storylining away.

This week’s challenge is based on his blog post about hiding the “next” button until the learner completes a challenge about what’s just been presented. (Or it can be used as a sort of pre-test to unlock the “next” button and allow the learner to skip ahead.)

From an instructional design perspective it would have to be used incredibly judiciously; though if sprinkled in a few key places in just the right course, it could be effective. But this challenge was about the technical aspects of building it, so that’s what I focused on.

My Example

I chose the HR Audit topic because it seemed appropriately dry. I’m picturing a nodding-off learner who’s about to get a disappearing-“next”-button wake-up call.

Basically, at the end of the slide you ask the learner a question about what they just saw.

Here, I ask them to enter a certain number they just saw. The “next” button is visible but disabled.

If their answer is incorrect, they get a message asking them to try again, or to review the slide content.

Once they get it right, the “next” button is enabled and they go on to their glorious reward in the final slide.

The Tech Side

David wanted a text-based entry field for the learner to complete in order to unlock the “next” button, so in Storyline that means adding a data entry field. I’d never had a reason to use them before, so I used a post on the E-Learning Heroes site from Jeanette Brooks that explained how to set them up. It would help to have some experience with variables, but it’s probably not necessary for the average intrepid Storyline user.

After that it was all about the layers and states and triggers. I won’t get into extreme detail, but on the main slide I added a trigger so that at the end of the timeline it would show a layer. At the end of the timeline I also animated out any potential answers on the slide so they weren’t visible.

On the layer I put the question, the data entry field, the “next” button (set to an initial state of “disabled”), a line of text feedback if the answer is incorrect (set to an initial state of “invisible”), and a “review” button so they could see the slide content again if the answer is incorrect (also set to an initial state of “invisible”.)

Then I just got all trigger-happy until it behaved properly.

Here’s my published version.

Does Nepal like Submit buttons?

I’m redesigning an e-learning course I did for an international nonprofit’s US audience so it can be deployed to their offices in Asia and Africa, and I’m excited about it. I love this stuff!

Here are some of the adaptations I’ll make:

Simplifying Language
As someone who’s worked and studied in countries where I was a non-native speaker, I know it’s tough to get things done if you’re distracted by words and phrases you don’t know or can’t quite catch.

This adaptation isn’t too hard. The audience speaks English, but they are non-native speakers. Language simplification will involve cutting out slang, simplifying sentence structure, and using simpler words when possible – and keeping voiceovers crystal clear, of course.

Amplifying Context
Since a huge part of language comprehension relies on context, I’ll make sure there’s little doubt about what’s going on at any given time. My designs are already driven by characters and situations that I present in a clear visual style.

I’ll present scenarios as I usually do and add additional visual and language cues to quickly and easily convey meaning. The bottom line is that I expect to add more slides (and/or layers or states, for you Articulate Storyline fans) so that less is left to the imagination.

Staying Culturally Aware
I’m double checking with my client about all kinds of choices I don’t normally need to ask about: Character names, hand gestures, clothing choices, etc., and my guess is that after testing it in the field they’ll come up with other tweaks we haven’t thought of yet. (I’m excited to learn what they’ll be!)

Learning & Using Articulate Storyline: So Far So Happy

I have a good excuse for not posting since discovering Articulate Storyline: I’ve been busy producing courses with it. I knew when I first tried it last March that it had great potential. After having used it consistently for the last six months, I can report that it has delivered beautifully.

Here’s my experience learning and using it so far: I learned it (keeping in mind that I was already fluent in the Articulate Suite programs) by:

1. Taking a one-day workshop at the E-Learning Guild’s Learning Solutions conference in Orlando last March, and Ron Price from Yukon Learning was an outstanding instructor.
2. Buying and referring to Diane Elkins and Desiree Pinder’s book E-Learning Uncovered: Articulate Storyline.
3. Referring to, as needed, Articulate’s extraordinarily helpful blogs and tutorials: http://community.articulate.com/tutorials/products/articulate-storyline.aspx.

My user experiences so far:

• Software-wise it’s stable, quick, and a pleasure to work with. (Quizmaker can only dream of stability like this.)
• Instruction-wise it lets me easily design courses and interactions that are creative, engaging, and effective.
• Development-wise it lets me build those courses quickly and easily. My first course took longer to build than those I’ve done since, of course, but once you’ve got your first course figured out, you’re on your way.
• Client-wise, my clients are thrilled with the variety of features and interactions I can now include, and they’ve never had issues delivering the courses to their learners via LMS.

So that’s what I’ve been up to. How about you?

Highlight of Learning Solutions 2012? Articulate Storyline!

No, I don’t work for Articulate. I’m just a hardworking, in-the-trenches e-learning designer & developer striving to produce the best possible courses in the most efficient amount of time so my clients get the best deal I can possibly give them.

It just so happened that when I went to this year’s E-Learning Guild conference in Orlando last week that I suddenly became an Articulate Storyline beta tester by virtue of signing up for an introductory class for this soon-to-be-released product. I’d heard great things – but who can really say until they get their hands on a piece of software and start using it?

The outstanding news is that it’s a fantastic product that I will buy the moment it comes out. The less fantastic news is that I’m probably not supposed to say much of anything about the details of what it does – but I’m good with that.

Keep your eyes open for upcoming webinars and events done by the fine folks at Articulate (I know Tom Kuhlmann has a series of 4 free webinars coming up via the Training Magazine Network), and who knows… maybe you’ll be a fan, too!

Tell Me a Story!

Learners love stories. The reason even old-school boring PowerPoint-laden instructor-led training can be mesmerizing is because the trainer is someone who brings real-life experiences that matter – to life.

So it’s no mystery that adding engaging stories to the rather sterile world of e-learning is a big plus for learners. Once they’ve been captured by a character they can follow, be surprised by, relate to, and/or learn from – they’re hooked.

I’ve been developing a couple of courses this week, and in both I’ve introduced a main character up front and used them as the framework for the trainings. The most entertaining part has been developing characters for a sexual harassment course. It’s clearly not an amusing topic, but bringing the “villain” to life has been an awful lot of fun, and the learner has a far better chance of remembering the (boooooooring) content by relating it to a character. (You’re welcome, learners!)

Cammy Bean from Kineo does a great job of giving examples of storytelling and use of character in her “Yawn-Proof Your E-Learning” presentation, a version of which you can probably find online if you take a look around. I highly recommend taking a look.