Prototyping allows instructional designers to streamline the design process by creating early versions of parts of an elearning project to test design concepts and functionality before building out the full project. This allows designers to receive feedback and make revisions early in the process rather than late in the project timeline. Prototyping can improve estimates, encourage creativity, incorporate feedback flexibly, and integrate quality assurance testing more seamlessly. The presenter provides examples of how prototyping can shorten timelines and relieve end-of-project pressure compared to developing a full project without prototyping. Steps for prototyping include creating micro and full prototypes to obtain approvals before full replication.

1. Session #TS105
Using Prototyping to Streamline
the Instructional Design Process
Lisa Whalen, MAT, MSIT, Waters Corporation
Orlando, FL • March 16 – 18, 2016

2. Using
Prototyping to
Streamline the
Instructional
Design
Process
By Lisa M. Whalen, MAT, MSIT

3. What is a
Prototype?
smartbuilder.com
Prototypes are functional,
interactive sketches that help you
design meaningful learning
experiences

4. http://searchmanufacturingerp.techta
rget.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?

5. 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 functionality
2. a full prototype that contains the
actual design within that
prototyped section
3. and finally, the full project
replicated out from the prototype

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

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

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

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

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

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

12. More accurate estimates
Free-flowing exchange of ideas
Encourages out-of-the-box thinking
Fast, flexible & effective
Trial & error on small pieces
Easier QA process
Works great with the agile process
Benefits of prototyping in ID

13. More accurate estimates
Once 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

14. Free-flowing exchange of ideas
The 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

15. Encourages out-of-the-box thinking
Because 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

16. Fast, flexible & effective
Working 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

17. Trial & error on small pieces
One 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

18. Easier QA process
Now, 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

19. Works great with the agile process
I 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

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

21. 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 review
4 Design & build Prototype updates – full
5 Design & build Send for review/feedback
6 Design & build Replicate out
7 Design & build Replicate out & QA Process
8 Design & build Send for review/feedback
9 Design & build Ready for Publish
10 Design & build
11 Send for review/feedback
12 Make updates
13 Send for review/feedback
14 Ready for Publish

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

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

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

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

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

27. Steps for prototyping
within the ID process
1. Receive file, confirm project due date
2. Initial ID Analysis
3. Micro-prototype development
4. Review with stakeholder
5. 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 stakeholder
9. Revisions to full prototype (if needed)
10.2nd review with stakeholder (if updates were
required)
11.Confirm approval of full prototype
12.Replicate out to full build of complete
project from the full prototype
13.Review with stakeholder
14.Confirm approval of completed project
15.Publish project

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

29. 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/55253812d089f0e855d0
8900/mockups/55253813d089f0e855d08904

30. How to create prototypes for an
ID project
Invision
Invision 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/5812
346/screens
(you will need to create a free account to see this
sample)

31. How to create prototypes for an
ID project

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

33. Column Wars

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

35. Improve your ID process by
implementing prototyping in
your projects

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

37. 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 Tools
Invision – 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

38. Questions & Answers
Email:
Lisa_Whalen@waters.com
Twitter: @LMWConsulting
LinkedIn:
https://www.linkedin.com/in/lisa-whalen-
97245122