Wireframes and Functional Prototypes in E-Learning #85

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.

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:

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

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. 

Resources

• OSHA Fall Prevention (PowerPoint, 194 slides)
• Here’s How to Build an E-Learning Template That Will Rock Your World

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:

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.