Motivation

Escape Room Game: When Birthday Parties Go Wrong

May 2, 2018 By Jackie Van Nice 17 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to create an escape-room-style game. (Scary!)

Party Equipment

The Idea

My first escape idea was going to have you desperately trying to catch your international flight before it took off, but the mega-talented Jodi Sansone beat me to it (great minds) and did a lovely job, so it was back to the drawing board. In the end I came up with the idea of frantically trying to make a last-minute birthday cake for a little girl’s birthday party: Let the terror begin.

The Design

Images

My first step was was to build a vector kitchen. As the days went by I couldn’t help but wonder if I could have saved time and energy by building a real kitchen.

The Kitchen Stage

These are mostly flat design vector images. I pulled a few from the 360 Content Library as icons or illustrations and manipulated their size, shape, and/or color (juicer, grinder, a few objects on the results screen, maybe the measuring cup… it’s all kind of a blur at this point), but I purchased most and manipulated them in Adobe Illustrator. The focus is on the table and mixing bowl in the foreground.

The Game

The Birthday Girl

I wanted three outcomes:

Success: You got the right ingredients in the bowl in the allotted time and achieved the desired result.
Failure: Your time ran out and things didn’t end well.
Keep going and try again: You put an incorrect ingredient in the bowl and have to dump out the bowl and start over, but the timer is still running.

The Timer

Update: I’ve made the timer available as a free download right here! The issue was the timer and finding a way to give it a two-minute duration that I could reliably start, stop, and restart. Very long story short – after trying lots of options I needed to design and build something quickly, so I winged it with an incredibly simple animated timer.

Timer recipe:

1 two-minute-long ticking sound effect
1 timer ding sound effect
1 image of a kitchen timer with a white face
1 inserted yellow circle shape
1 inserted red circle shape

Superimpose the yellow and red circles on the timer face, in that order, and give each one a 59-second wheel entrance animation. Place the red circle so it starts at the 59-second mark on the timeline. The clock and yellow circle start at the beginning of the timeline, along with the ticking sound effect. The ticking will end when you trigger the timer ding to go off at the end of the 2 minutes, at which point you could jump to a layer or another slide or whatever you’d like to do.

Once in action you’ll see the yellow circle animating in for the first minute, turning the face from white to yellow. In the second minute you’ll see it go from yellow to red, letting you know you’d better get that cake in the oven.

In this game the timer helps increase the sense of urgency, looks flat and cute, and serves its purpose.

The Drag-and-Drop

In the end, this was pretty straightforward. There are three items that require a two-step drop process before they can be used successfully, but you’ll find written hints to give you a clue about what to do and every item is labeled if you tap on it. Searching for clues and things you can use is all part of the game!

The Result

Ready to make a cake for the birthday girl? Grab an apron and make it happen!

Select Image to Launch Demo

New! A Deliciously Frustrating E-Learning Cereal

November 7, 2015 By Jackie Van Nice 10 Comments

Click Image to Launch Demo – With Audio!

This week’s Articulate challenge is to create an e-learning themed cereal box, so I did my best to channel a bit of Toucan Sam and some Michael Allen and got to work.

The Idea

I started by brainstorming the usual nouns on cereal boxes: Flakes, crispies, crunch, smacks, loops, etc. Once I got to “loops” I drifted to thoughts of frustratingly locked-down e-learning navigation and came up with “Locked Navigation Loops” as my cereal.

The Design

The Navigation Police

For the visuals, I like the classic cartoon-character-on-the-cereal-box look, so my first search was for a perky prisoner. Once I found her, I grabbed an image of a cereal bowl and a cartoon cop who could enforce the rules and mixed them together with some fonts and other graphic elements in a big bowl of milk.

The audio seemed necessary to get the goofball cartoon cereal feel, so I added lots of sound effects and a lovely cartoon-y tune I found at AudioNautix.com.

Once I synced images and music, I was pretty much done. Oh – and I added some frustratingly pointless feedback since that’s the only kind I ever see when viewing e-learning courses with locked-down navigation. Call it an “homage”.

Enjoy a Little Lock-Up Time Right Now!

Here’s my cereal box demo in all of its cacophonic glory. I hope you like it!

Click Image to Launch Demo – With Audio!

Video Backgrounds to Enhance E-Learning

August 16, 2015 By Jackie Van Nice 3 Comments

Click Image to Launch Demo (With Audio)

This week’s challenge is to show how video backgrounds can be used to make elearning more engaging. Thanks to some free assets, it was a quick way to have some fun this week.

The Idea

As challenged, I wanted to design e-learning start screens, but make them more engaging using simple video backgrounds to lure learners in.

The Design

I started by browsing some of the free video assets David Anderson linked to, and found these videos at Coverr. I was looking for something that would loop well and that I was inspired to play with. After that it was a matter of coming up with course topics and visual and audio design elements to fit.

Entry #1 – Busking

I’m sure there are countless reasons someone would be outdoors playing with a yoyo, but it made me think of street performers and buskers. I added a font that looked rather string-like and buttons designed to mimic the color, shape, animation, and position of the yoyo. I also added a bluesy acoustic bit of music from audionautix to complete the scene.

Entry #2 – Inspired Color Palettes

To me, the most stunning part of this video was the gorgeous natural palette that had developed on this railing at the beach, so that became my theme. The button shapes mimic the clouds in the sky, and I looped an audio track of ocean waves beneath the video. Of course, the most important part was to integrate the natural palette on the railing into my own color scheme, and you’ll see it in the text colors. The sans-serif font is Century Gothic and the serif font is Centaur.

See (and Hear) Them in Action!

Ready to see if video backgrounds make these courses seem a little more appealing? You can decide right here:

Click Image to Launch Demo (With Audio)

Making a Simple Prototype

August 4, 2015 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s challenge is to create a functional prototype of a course using existing OSHA fall prevention content, so I whipped up some stick figures and headed for the job site.

The Idea

Original Content

David Anderson gave us a 194-slide PowerPoint presentation to use as our source material, the idea being to choose a few slides to work with. I chose a section about preventing falls involving floor holes.

My goal was to focus on the instructional design approach, basic layout, and functional design (as opposed to visual design) to show how I’d approach and design the entire course.

The Design

The Process at the Point of Need

Naturally I wanted to start with a compelling scene featuring the learner as the protagonist. After adding proper context and a scenario where the learner would need to apply the information being presented, we’re off and running.

Once the problem was established, I was able to present the basic structure of this mini-course – the steps required to deal with the problem – at a point of need to give the learner a reason to want to find out what to do next.

A Real-World Challenge

At each step I then presented a simple challenge to roughly approximate what they would need to do in a real-life situation. I didn’t bother with up-front content presentation, so each challenge requires the learner to use his or her predictive abilities to ponder, guess, and explore the options. I’d call it Engagement 101.

This approach means that feedback (in addition to the scenario itself) needs to provide the information the learner needs. I kept the feedback brief and subtle in this demo, but would use more detail in the actual course.

The Result

It’s a simple and straightforward prototype that shows you exactly how I’d approach the content. The visuals and details to be added later are – compared to this – the easy part.

David wanted us to spend an hour or two on this, but for me I can’t imagine designing a course approach, layout, and basic functionality in that amount of time; though I certainly admire anyone who can. Let’s just say this took longer.

If you’d like to enjoy it in all of its stick figure glory, you can start preventing falls right here.

Seriously – How Do You Navigate This Course?

August 1, 2015 By Jackie Van Nice 3 Comments

Select Image to Launch Demo

Do you know how many times I’ve heard about a learner getting confused about course navigation? Close to zero. Nonetheless, organizations like to include instructions, and those instructions tend to get short shrift. So when David Anderson challenged us to get a little more creative with navigation intros – I was in.

The Idea

I wanted an approach that was simple and replicable; but unique enough to capture the learner’s attention. I hadn’t used photographic characters for awhile, so I grabbed one and riffed off of his lab coat to determine the topic.

Though my process was backwards, the idea is that you can theme your navigation instructions to match your course content. It makes it more fun and gets the learner ready for the topic.

The Design

I like Coolors’ navigation tutorial, so I played with their center-of-screen dashboard approach, which then gave my lab-coated gentleman the freedom to point out navigation elements on the rest of the screen.

Coolors’ Navigation Start

My Navigation Start

Coolors’ Navigation Navigation

My Navigation Navigation

I also made sure that if you choose to skip the navigation intro that you’re confronted with a nurse with some good advice, but your consequences are your own.

The Result

It’s simple, but still more interesting than any of the standard navigation instructions I’ve done. With more time I’d refine it, but this gives you the general idea.

If you’d like to navigate these white-coated waters, you can see it right here!

Select Image to Launch Demo