Jackie Van Nice

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

March 30, 2014 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

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.)

Main Menu

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.

Content Page #2

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.

Content Page #5

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

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.

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

“How Did You Get Started as a Freelancer?”

March 7, 2014 By Jackie Van Nice 4 Comments

“How did you get started as a freelancer?” is the most common question I’ve gotten in the last 10 years, and it’s a great one.

There are an infinite number of ways you can get started, and everyone’s story is different. But in case it helps you, or any fledgling freelancers you may know, here’s how I got started and how I continue to build.

My Sneaky Plan

I knew a year or two before taking the plunge that I couldn’t take being an employee anymore. At the time, I was a software and training consultant on the road.

I opted to skip all of the usual fretting and worrying about how to start a new business, how to keep money coming in without a regular paycheck, how to reposition myself in the marketplace, and how to find new clients. Fear and worry are a waste of time. I took the quickest route I could think of.

My brilliant idea was to pick one potential client and sneak up on them. And that’s what I did.

Client #1: They Thought They Were Getting an Intern

I started by finding a certificate program at a local college that included an internship requirement. It was a mostly-online program that took a little over a year, and I completed it in my spare time while traveling for work. I already had plenty of degrees and certificates and experience, so I didn’t need the classes or the certificate. They were fine, but not necessary. The key was the internship.

My strategy was to leverage my well-connected instructors to get into the door of an unsuspecting company that thought it was just getting a contract, freelance intern.

It worked like a charm. As soon as I was approved to find an internship, which was my responsibility to find, I put just one feeler into my network asking for what I wanted. And a connection of one of those well-connected instructors came through.

Within two hours I was communicating with a woman looking for an intern to do instructional design work. She immediately took me on at the “intern” rate, but within a week or two, as soon as I’d finished my first assignment, she took me up to the full rate. I contracted from her for several years. All of those projects were for instructor-led-training.

Client #2: I Built It and They Came

When I decided to transition to e-learning I learned as much as I possibly could about it, invested in the tools, learned the tools, and ever-so-casually mentioned to everyone I talked to that I was now doing e-learning. Within three weeks I got a call from a large company asking if I was available for some e-learning projects, and they’ve kept me busy ever since.

Client #3: Expanding Through Volunteering

As busy as I was, I knew I had to develop more clients over time. So I decided to find a large nonprofit and volunteer my services to design and develop whatever e-learning they might need. They were thrilled. Unfortunately, I’m still waiting for their content several years later – but they stay in touch and are very sweet and always thank me for helping and being on the team. They just can’t get it together.

In the meantime, one of their directors moved to a different nonprofit. I made the same volunteer offer at the new place, and she said she’d let me know if they ever decided to start doing e-learning. A few weeks later she called and said they’d decided and that they’d like me to work on contract. They’ve kept me busy for the last few years, too.

Clients #4 and Beyond

Others have become clients just by sitting next to me at a conference and asking for my card, seeing me on LinkedIn and contacting me to do work (this happens quite a bit), and by word of mouth from current clients.

And just today I may have a new one who saw my work in the Articulate E-Learning Heroes Challenges that David Anderson puts together. (The flowers are on the way!)

You’ll notice I do no advertising or marketing or promotion, other than getting myself out there a little bit and doing some minor networking in ways that are very natural – including some blogging and tweeting. I put far more of my energy into learning more and doing the best work I can, and everything else just flows.

But if you’re a natural salesperson and joyful networker – great! My advice is to stick with the approach that feels most natural for you, because that’s the right one.

So that’s how I got started, and that’s how I keep cruising along.

If you’re a current or future freelancer, does any of that help or give you new ideas?

A Revealing Submenu

March 6, 2014 By Jackie Van Nice 5 Comments

Click Image to Launch Demo

You’ll see this simple-but-fun submenu when I post a portfolio sample for another course – but I like it, so it’s 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 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