Functional Prototypes in E-Learning

Rapid Prototypes and Wireframes #86: Challenge | Recap

It’s Monday morning and you just sat down with a potential client to discuss their safety training. The client is new to e-learning and wants to convert their existing classroom materials into online training. Because this is their first experience in e-learning, they’d like to first get a feel for how their content and activities will work as an online course.

You recommend starting slow and building out a functional prototype using some of their material. You really want this contract, so you agree to send them an example by the end of the day.

Challenge of the Week

This week, your challenge is to build a functional prototype using the OSHA Fall Prevention PowerPoint slides.

Select a range of slides for your prototype making sure to include different types of content slides (objectives, navigation, quiz, scenarios).

Remember: This is not a design challenge! Your objective is to create a working prototype to show how you might approach this content for a real-world project. We’re not looking for anything overly polished this week—simple  boxes and arrows is enough!

When you submit your prototype, please tell us how long you spent on the project.

Example of a Rapid Prototype

There are many ways you can approach this week's challenge. One way is to build out several slides to show how the client's content will look and function.

Another approach is to build the skeleton of the course using placeholder text and graphics. Here's an example that uses real and placeholder content. It took me just over two hours to put this together.

Example of a Rapid Prototype

View the functional prototype

Tom's 3C model is another way to think about functional prototypes. He uses a simple scenario model to help designers (and clients) visualize a 3-choice interaction:

Build Branched E-Learning Scenarios in Three Simple Steps

With the 3C framework, you can use placeholder graphics to build out working prototypes to share with your client:

Three C’s of Scenario-Building

Those are just a couple ways to approach this week's challenge. What I'm most excited about seeing is the different ways to build functional prototypes. 


Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
  • Facebook: Share your work on our Facebook page by replying to this Facebook post with a link to your example.


Last Week’s Challenge:

Before you rapidly prototype this week’s challenge, slide over and check out the interactive slideshows your fellow community members shared over the past week:

40+ E-Learning Examples of Image Galleries, Slideshows, and Sliders

Image Sliders and Photo Galleries #84: Challenge | Recap

Wishing you a functional week, E-Learning Heroes!

New to E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Tracy Carroll

Hi all, I'm almost brand-new to the challenges. (I posted something last week to an old challenge, but I doubt anyone has seen it!) I decided to see what I could do with this challenge in under 2 hours. First I outlined the elements the course would contain: Then I immediately decided to check and see if a likely template was available for download on the Articulate website. I found Allison LaMotte's Sleek Custom UI Template, thought it was beautiful, and decided to go with that. I had Tim Slade's Trivia Game template already. I tweaked the appearance of both templates, and dropped in some dummy text & images. I didn't get much into specific scenarios or interactions, though! (I confess I didn't read much of the PowerPoin... Expand

Jane Maduke
David Anderson
David Anderson
David Anderson

It's a little like e-learning improv. One of the things we frequently do at conferences is build working demos for people who ask how something could be achieved in Studio or Storyline. This is more true for Storyline but we still receive similar questions for Studio. I like to think of it as elearning improv because folks are throwing all these instructions and conditions at us and we respond by adjusting our prototypes. Typical booth scenario: "How would you build a 3-question scenario where each choice is given a different score. After three questions, I want to show specific feedback based on the learners score." There's no time to make things look good--you have to move quickly to keep up. That's where simple shapes and specific colors help. Red, yellow, green are helpfu... Expand

Jane Maduke
Jeff Kortenbosch
Jane Maduke
David Anderson
Mary Cropp
Cary Glenn