Using Prototyping to Streamline the Instructional Design Process

Session #TS105Using Prototyping to Streamline the Instructional Design Process

Lisa Whalen, MAT, MSIT, Waters Corporation

Orlando, FL • March 16 – 18, 2016

Using Prototyping to Streamline the Instructional Design Process

By Lisa M. Whalen, MAT, MSIT

What is a Prototype?

smartbuilder.comPrototypes are functional, interactive sketches that help you design meaningful learning experiences

http://searchmanufacturingerp.techtarget.com/definition/prototype In software development, a prototype is a rudimentary working model of a product or information system, usually built for demonstration purposes or as part of the development process. In the systems development life cycle (SDLC) Prototyping Model, a basic version of the system is built, tested, and then reworked as necessary until an acceptable prototype is finally achieved from which the complete system or product can now be developed.

What is a Prototype?

What is a Prototype?

Here is how I look at prototypes in elearning.

The development of a scaled down piece of an elearning project to show functionality and design concepts.

I work with a prototype on multiple levels: 1. a micro prototype with basic

shapes to show functionality2. a full prototype that contains

the actual design within that prototyped section

3. and finally, the full project replicated out from the prototype

Why bother?Isn’t that extra work?How complicated is it?How much time will it take?Where do I start?

Why Prototype?

Why Prototype?

These are all great questions.

Not only do we wear several hats in the field of instructional design, but we are also working on multiple projects, usually each of them customized. Even though a great deal of analysis takes place up front, there is still a struggle with the timeline at the end due to last minute changes in design or even ID concepts.

This is the wrong place to figure out that your design will not work.

Prototyping with usability design in the early stages can help you avoid this and relieve, if not eliminate, the pressures often associated with the end due date.

How will this session help?

Prototyping in small pieces allows you to work through design issues without spending additional time adjusting the entire project. This will give you more flexibility in your design by making revisions early in the process.

Prototyping allows you to ask “what if…”, and put your ideas to test while trying different things early in the process without putting the timeline in danger.

A complete prototype, that is approved, means you can now simply replicate the work out for the remainder of the project, relieving the stress of last minute changes that used to happen at the end.

Has this ever happened to you?

I don’t know about you, but I can say from experience that this is what has often happened to me. At one of my previous positions, my manager emailed me a Powerpoint file and said to turn it into an elearning module. I ask when it is due…2 weeks, oh and can you make it “fun”?

So, I work on the project and present it for review. The response: “oh, I was thinking of something more like…can’t you make it like…?” Now there are only a few days before it is to be released and the changes that need to be made are no small task.

In the scenario I just talked about, if I had created a prototype within the first day or so and showed my manger, when the questions came up about a different concept, it would have been much easier to answer that question something like this.“Yes, I can make some updates to this prototype this afternoon and see if that is more what you are looking for, I also have a couple other ideas that you might like.”

Benefits of prototyping in ID

…or“Based on what I have already created with this and knowing how long it will take to complete the project, to make your suggested changes, it would take X amount of time, which would cause the due date to be extended by X amount of days. If that’s ok, I can get you the updates to this prototype tomorrow afternoon. I also have another idea that could work based on your suggestions, now that I have a better idea of what you are looking for. I could have that ready for you this afternoon, and it would keep us on target for our due date.”

Benefits of prototyping in ID

More accurate estimatesFree-flowing exchange of ideasEncourages out-of-the-box thinkingFast, flexible & effectiveTrial & error on small piecesEasier QA processWorks great with the agile process

Benefits of prototyping in ID

More accurate estimatesOnce you have made a prototype, you have a better idea of how long it will take to finish the project. If there are changes requested, you can estimate this much better and advice intelligently about the completion date.

This is good on multiple levels. You are able to logically track production time and adhere to timelines better. It also give your stakeholder the option to extend the timeline, if needed.

Benefits of prototyping in ID

Free-flowing exchange of ideasThe stakeholders feel like they have more of a say and ability to share their opinions and contribute to design ideas early on. When there is no prototype, and they see it for the first time after all the work has already been done, there is little time for changes. This leaves your stakeholders feeling like even if they had a good idea, it could never be a contribution to the project.

Benefits of prototyping in ID

Encourages out-of-the-box thinkingBecause you have not had to put so much work into a completed project, and started with just a part of it, you have more options available to you in the creative design process to try different things and work outside-the-box. Often, the hardest part is getting that initial design “just so”.

Benefits of prototyping in ID

Fast, flexible & effectiveWorking in smaller chunks makes it quick and easy to create these designs. Once you have the design concept agreed upon, you can simply replicate that out to the remainder of the project. There is also much less pressure during those initial reviews. With a prototype you have the ability to tell your stakeholders that it is not a perfect and polished project, but a prototype of design ideas to confirm the concept before moving into full development. You can even use your authoring tool to make changes on the fly as suggestions start coming in. This is fast, flexible and very effective. And again, your stakeholders feel like they have a part in the design process of their project and will enjoy working with you in this way.

Benefits of prototyping in ID

Trial & error on small piecesOne of my favorite parts of prototyping is that you can work with numerous rounds of feedback trying different things in a short amount of time. Why? You are working with a very small part of the whole project. Isn’t it easier to make changes to a few slides then it is for a project of say 40 slides? Imagine working a detailed design on 5 slides, trying different things, making changes based on feedback, and only having to update a few slides vs several slides? Now, imagine that those few slides are complete, how much easier is it to replicate that design throughout the entire project?

Benefits of prototyping in ID

Easier QA processNow, here’s another thought. Imagine you documented what variables and triggers needed to be set on those few pages. Imagine you easily documented that in a spreadsheet. Now, imagine that you could use that as a “checklist” to ensure you didn’t miss any of those variables or triggers throughout the remainder of the project. Wouldn’t it be easier to create a QA process from a few slides that could easily be replicated and used for the whole project, especially if you created something more complicated, like a serious game or journey type module?

Benefits of prototyping in ID

Works great with the agile processI am a huge fan of agile project management. Working with prototyping in instructional design plays very nicely with this process. This just goes hand-in-hand with allowing for multiple changes throughout this process, especially when it comes to design elements.

Benefits of prototyping in ID

How prototyping can improve the ID process and shorten the project timeline

I’m going to stick with the 2 week timeframe from the original scenario to discuss how prototyping could improve the instructional design process and shorten the project timeline. The easiest way to discuss this is to do a timeline for this project with and without a prototype.

How prototyping can improve the ID process and shorten the project timeline

Day # No Prototype With Prototype

1 Receive content & ID analysis, start design/build

Receive content & ID analysis, prototypes-micro

2 Design & build Send for review/feedback

3 Design & build Updates, send for review4 Design & build Prototype updates – full5 Design & build Send for

review/feedback6 Design & build Replicate out7 Design & build Replicate out & QA

Process

8 Design & build Send for review/feedback

9 Design & build Ready for Publish10 Design & build11 Send for

review/feedback12 Make updates13 Send for

review/feedback14 Ready for Publish

How prototyping can improve the ID process and shorten the project timeline

The first column represents the days by number for the 14 days (2 weeks) to work on the project.

Looking at this table, you will see that the one with the prototype ended 5 days sooner then the one with no prototype. That may not seem like a big deal, but let’s consider something. Notice that the one with no prototype doesn’t have a QA process slotted into the timeline. When you work on a project to the last minute with content and design changes, what is the first thing to go, even though it should never be this way? QA is often something that does not get nearly the time it needs to have in this process. The project can get published on time, and “fixes” can happen later right? Isn’t that why we get so many software updates on our computers and phones?

How prototyping can improve the ID process and shorten the project timeline

Have you noticed something that is just not right about this 14 day project plan?

I don’t know about you, but I don’t plan to work on weekends! This is a nice 14 day schedule, based on two weeks, but we don’t have the weekend days blocked out in this example. What happens if we block out the weekend days?

Let’s take a look at this 2 week project again where the weekends are blocked off. Let’s also assume we are starting on a Friday, since that’s when I often get content, because the stakeholder had a Friday deadline to get the content done.

How prototyping can improve the ID process and shorten the project timeline

Day # No Prototype With Prototype

1 Receive content & ID analysis, start design/build

Receive content & ID analysis, prototypes-micro

2

3

4 Design & build Send for review/feedback

5 Design & build Updates, send for review

6 Design & build Prototype updates – full

7 Design & build Send for review/feedback

8 Design & build Replicate out

9

10

11 Send for review/feedback

Replicate out & QA Process

12 Make updates Send for review/feedback

13 Send for review/feedback

Publish

14 Publish

How prototyping can improve the ID process and shorten the project timeline

You may have noticed that for the No Prototype side, nothing changed other than losing 4 Design & build days. Four days when it comes to building out an entire module, especially a larger one, is a pretty big deal. This puts quite a bit of stress on the Design & build days remaining.

For the With Prototype side, we were able to move items down the list, because there were enough blank spaces to work with from the previous one. We didn’t have to cut anything out like we did for the No Prototype side.

How prototyping can improve the ID process and shorten the project timeline

It may seem like the new version only saved a day in the process compared to when the weekend days were left in as work days; however, did you remember that 4 Design & build days were lost on the second version with No Prototype? Those days were needed previously and now got crunched. This also shows that there is still no time for changes or QA process and it’s really cutting it close to the deadline. If the second feedback/review brings any more changes (which it often does), it will be too close to the deadline for a timely review and publish.

Also notice something very important. The side with No Prototype has only 2 review/feedback sessions. The side With Prototype has 3 review/feedback sessions with room for more and includes the QA process.

As I mentioned previously, I am a huge fan of agile project management, and the With Prototype scenario in this table works perfectly with agile methods.

Steps for prototyping within the ID process

1.Receive file, confirm project due date2.Initial ID Analysis3.Micro-prototype development4.Review with stakeholder5.Revisions to micro-prototype (if

needed)6.2nd review with stakeholder (if updates

were required)7.Full prototype development (includes

design, graphics and full functionality of one section of the project)

8.Review with stakeholder9.Revisions to full prototype (if needed)10.2nd review with stakeholder (if updates

were required)11.Confirm approval of full prototype12.Replicate out to full build of complete

project from the full prototype13.Review with stakeholder14.Confirm approval of completed project15.Publish project

How to create prototypes for an ID project

I’ve talked about the benefits and the process, but let’s see how that actually looks in an example.

Sticking with the original 2 week project scenario, here are the details of what the stakeholder is looking for. Our SMEs need a tool to help them write SMART objectives for their courses. The Powerpoint I just sent you has the content that needs to be in this tool based on Blooms Taxonomy.

There are a number of ways to get started with your micro-prototype or wire frame of the project.

How to create prototypes for an ID project

Prototype on Paper First I will mention a couple of free (for one project at a time anyway) online services for prototyping.

Prototype on Paper allows you to snap pictures of hand drawn pictures, link items on the slide to other slides and send for review. Here’s an example of a paper drawn prototype turned into a clickable prototype:https://popapp.in/w/projects/55253812d089f0e855d08900/mockups/55253813d089f0e855d08904

How to create prototypes for an ID project

InvisionInvision also allows for online collaboration, real-time design collaboration and tours, version control and sync, unlimited user testing with video capture of users testing your prototypes and even has project management built right in.

Here is an example of a web app prototype: https://projects.invisionapp.com/d/main#/projects/5812346/screens(you will need to create a free account to see this sample)

How to create prototypes for an ID project

How to create prototypes for an ID project

I like to use my authoring tool (Articulate Storyline2) to make prototypes because I can start with one file, and just build on that right through to the completed version. I save different versions along the way, but it is easy to keep building this way if my authoring tool is going to be what I build the project in.

I normally up-rev to multiple versions throughout the development process, but for demonstration purposes, I’m going to show you this example in one file with a different scene for each version, micro-prototype, full prototype and final version.

Column Wars

Column Wars

To show you this on a larger scale project, this is an example of a serious game that I created based on a game like Civilization or those other territory war games you may know.

I did this first with just one territory. Once that full prototype was approved, I was able to expand that out to the remaining territories. Had I not use prototyping, this project would have been a nightmare. This took several months to complete, due to the immense size and game development process. However, had I not prototyped, with all the changes that took place during the prototype phase, it would have been more like a year to get to the final production. Developing the QA process during the prototype also saved an immense amount of time, not only for the testing, but also for the building, because I made a checklist of variables and triggers to use during the full prototype phase.

Improve your ID process by implementing prototyping in your projects

Improve your ID process by implementing prototyping in your projects

Based on what you learned in this session, how can you improve your ID process by implementing prototyping in your projects?

I think you got a great start here today by learning about the benefits as well as the process. So you started the LEARN part. Your next step is to go and PRACTICE this in your own projects. Everyone has their own way of doing things, and I get that. I have given you an introduction and guidelines today, but I’m sure as you bring them into your projects, you will IMPROVE them according to your own process. If you continue to work with prototyping in your ID process, you will be successful in streamlining your implementation process.

My gift to you

Cathy More – Prove it with a prototype

eLearning Industry – 6 Reasons To Use Prototype in eLearning

SHIFT – SHIFT’s eLearning Blog

Smartbuilder.com – Unleash your Creativity

Free Prototyping ToolsInvision – Prototypes, Feedback, Collaboration, Workflow, User Testing, Boards

POP – Prototyping on Paper

Authoring Tools (not free)Articulate Storyline 2

Adobe Captivate 9

7 Top Authoring Tools – Learning Solutions Magazine

Questions & Answers

Email: [email protected]

Twitter: @LMWConsulting

LinkedIn: https://www.linkedin.com/in/lisa-whalen-97245122