Characters

The Stuff That Résumés Are Made Of

April 22, 2014 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

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.

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.

See It In Action!

Enjoy the vintage-inspired goodness right here.

This is Why Freelancers Need Floaties

March 24, 2014 By Jackie Van Nice 11 Comments

Select Image to Launch Demo

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

Select Image to Launch Demo

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.

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. Enjoy!

We’ll Always Have the US Passport Office

March 16, 2014 By Jackie Van Nice 12 Comments

Select Image to Launch Demo

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

The Boring Document: The US Passport Application

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

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!

Or at least it does in this interaction. Here’s the finished piece. I hope you enjoy it, and may you always have great ideas for presenting forbidding documents of your own.

Select Image to Launch Demo

At Last! A Drinking Game I Can Win

February 27, 2014 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

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.

Maßkrug

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.

Progress

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

Linear Progress

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.

Beer Progress

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.

Update! Free Template Now Available

Since creating this, I’ve designed a free Storyline template of this game and done some videos to help you customize your own. All the scoop you need is right here!

What if I Just Dreamed I Made a Great Template?

February 12, 2014 By Jackie Van Nice 2 Comments

Select Image to Launch Demo

That darned David Anderson and his e-learning challenges. Why am I hooked on these? This week, as a good citizen of the world, he put forth the challenge to build an e-learning template themed for the 2014 Winter Olympics in Sochi. Since sports-related design is waaaaaaay outside of my comfort zone, it was irresistible. I grabbed my design skis and headed for the nearest Black Diamond drawing board. Here are the 5 template slides he wanted:

The Cover Slide

Title

I knew I could slap in a lot of images from the official site, but I wanted it to be inspired by them rather than looking like a dead-on copy. So I took the official logo, seen below, and made my own cover slide based on that – finding a similar font and replacing the Olympic rings with a logo placeholder.

Title Slide

2014 Olympics Logo

Background

I then found a nice, frigid landscape for the background and ended up using that throughout the template.

Sound Effects

I knew that having the design elements come schussing in to skiing sounds would be an obvious choice, but I did it anyway. For some reason I really wanted the cry of an unseen, anguished skier at the end of this slide. I put it in to entertain myself, not knowing whether I’d find a reason to keep it, and moved on.

What to Design Next?

My inclination was to design the objectives slide next, but I wanted to present them in context and at a point of need. Unless I care about why I’m going somewhere in a course, I’m not inspired to design it – much less subject learners to it. I thought Tom Kuhlman did a great job of illustrating the idea in this post about making objectives interesting. His demo of the emergency-preparedness kit objectives being presented in an involving way was along the lines of what I wanted. So I knew the scenario had to come next.

Scenario Slide

Since I had already established that our as-yet-unseen protagonist had been skiing in a generic frozen landscape and that something alarming had happened, I decided he was lost and had skied his way to the games by accident, and that he had no idea where he was.

So he needed to figure out where he was and what was going on. I gave him the option of asking a guy with a gun (who could be a biathlon participant – or not), or visiting some random computer kiosk nearby.

Scenario Slide

Scenario Decision

So the scenario establishes the context (I’m lost on a frozen mountain), which gives him the motivation to take action. Once we get him to the “Need Help?” button on the kiosk screen, he’s on his way.

Objectives Slide

NOW I was ready for the objectives. I used the title font and Olympic ring colors and had each objective come schussing in over the mountainous background.

Hovering over each one reveals its general content, and clicking takes you there. I like to express objectives as questions, since they’re more involving, so that was the general scheme.

Objectives Slide

Figuring our protagonist might like a map and the general lay of the land, I had the “where is…” section point to some Olympic park venue content for him.

Interaction Slide

In the interest of keeping this simple, I used an interactive map that starts with an overview of the area. You can choose to see more detail for a particular section, and from that detail you have the option of pulling up a PDF to see the extreme detail and lots more information.

Interaction Slide

Of course you could also present interactive content here using video, games, tabs, links, or whatever you’d like.

I used variables so that the button that allows you to continue doesn’t show up until both map sections have been visited. Because I could.

Quiz Slide

Which brings us to the big payoff. What have we learned on this mountain today? It occurred to me that my “correct” answer could explain how this guy ended up here – and offer him some medical help as his reward – so that’s what I did. Who doesn’t like a story with a happy ending?

Select Image to Launch Demo

Have a Look!

If you’d like to see this baby in action, it’s right here.