Week 10: Instructional Design—Developing Technology Integration Plans and Storyboards (Fall 2023 Webster)

Overview

In previous weeks, we examined common types of digital technologies used in education, and methods for evaluating and selecting appropriate tools for your needs. We also explored critical issues to consider when planning to incorporate digital technologies into your teaching and learning. You have already identified a teaching activity into which you would like to integrate technology, identified potential tools that you could use, and discussed how you will address technology integration issues. Now it is time to put all of the pieces together into a detailed plan for your Technology Integration Activity.

In Week 10, we will look at the importance of developing a blueprint, storyboard, or wireframe before beginning to actually build a learning activity that incorporates digital technologies. You will prepare your own blueprint or storyboard this week, and you will include this in Assignment 4: Technology Integration Activity Design. We will then turn our attention in Weeks 11 and 12 to actually building a web-based technology integration activity.

Topics

Week 10 is divided into four topics:

Learning Outcomes

When you have completed this week’s activities, you should be able to:

Resources

Adeboye, D. (2014, October 21). Principles of storyboarding for e-learning design [Video file]. Retrieved from https://youtu.be/l9PZ2bEuKFA

Ascuena, A. (2011, May 4). Unit planning: Organizing course content [Video file]. Retrieved from https://youtu.be/geEYjQmzAno

Bates, A. W. (2015). Appendix 1: Building an effective learning environment . In Teaching in a digital age: Guidelines for designing teaching and learning . Vancouver, BC: Tony Bates Associates Ltd. Retrieved from https://opentextbc.ca/teachinginadigitalage/part/chapter-5-building-an-effective-learning-environment/

Gutierrez, K. (2014, September 25). A simple guide to creating your first eLearning storyboard [Web log post]. Retrieved from http://info.shiftelearning.com/blog/a-simple-guide-to-creating-your-first-elearning-storyboard

Marie, C. (2015, August 15). How to wireframe a website [Video file]. Retrieved from https://youtu.be/PmmQjLqJQlY

Penn State. (2016). Course blueprint and audit template . Retrieved from http://facdev.e-education.psu.edu/plan/audit

Wikipedia. (2018). Website wireframe. Retrieved from https://en.wikipedia.org/wiki/Website_wireframe

Topic 1: Technology Integration

A Unit of Instruction

Good planners of instruction understand the parameters guiding the outcomes and content they will work with in designing a course. In some cases they will have to determine how much of a larger curriculum to attempt in a given course. They will then divide these topics into units of work, and sequence them in a logical order for delivery in the classroom. Finally, they will analyze the material for each unit and break it down into lessons that are sequenced in a logical order. There may even be opportunities to allow your students to approach the unit in a self-directed process while using the resources you share with them in conjunction with resources they find on their own.

As you consider the lessons that make up a unit, ask yourself these questions:

If you do not plan for these learning opportunities in advance, they probably will not happen. And, if you begin planning for learning experiences that employ information technology tools, then you can keep that plan in your teaching toolkit and improve it in the next round of teaching.

Your Technology Integration Activity

For your Technology Integration Activity project, you are asked to develop a single technology integrated learning activity that includes:

Your Technology Integration Activity could be part of a larger unit of instruction. Or, it could be a standalone learning experience. If your activity is intended to be part of a larger unit of instruction, it is helpful to consider the aspects of the complete unit as outlined above. You would want your learning activity to fit cohesively into the larger whole. If your activity is part of a larger unit, include a short paragraph outlining the unit and your activity’s place within it. Don’t create the entire unit.

Resources: Unit Planning for Online Teaching

Andrea Ascuena (2011) from the University of Western Idaho describes, in Unit Planning: Organizing Course Content, the importance of unit planning, and some key considerations when you will be delivering that unit of instruction, or component learning activities, in a digital environment.



Source: YouTube, andreaascuena

As you watch Ascuena, make note of key considerations that are going to be important to you as you prepare your detailed Technology Integration Activity Design.

Optional Reading: Extend Your Understanding

For a detailed look at the important aspects of an online learning environment, review “ Appendix 1: Building an Effective Learning Environment ” from Tony Bates’ (2015) Teaching in a Digital Age.

Blueprints, Storyboards, and Wireframes

You are likely already familiar with the use of templates to develop lesson plans and unit plans for classroom teaching. Such plans serve a number of purposes, including:

The same principles apply when developing a web-based learning activity that incorporates digital technologies. In light of some of the technology integration issues that we have explored in previous weeks, the development of a detailed plan is perhaps even more vital in this context, since students are often navigating and interacting with your digital resources without you physically present to steer them in the right direction, and to assist them if they are lost, confused, or experiencing any other barriers to engagement.

The development of a detailed plan for a web-based technology integration learning activity is sometimes referred to as the creation of a blueprint or a storyboard. In the web development world, this process is referred to as wireframing. What it entails is creating a detailed (non-functional) map of everything that you will build.

Storyboarding for Success

Architects prepare blueprints before contractors set about building houses or office towers. Engineers prepare schematics before technicians construct complex machinery. The same process holds in e-learning development. As Adeboye’s (2014) Principles of Storyboarding for E-Learning Design explains below, without preparing a map of what an online module should look like, it’s easy to suffer from scope creep (the scope of the project continuously growing, because there are now criteria to indicate what needs to be done, and when it is done). It’s also possible for you, as a developer, to get lost and start feeling in over your head. Adeboye also describes some of the key components that you should be including in a storyboard for an online teaching module.



Source: YouTube, Daniel Adeboye

Gutierrez (2014) provides some more useful tips on how to get started in her article “ A Simple Guide to Creating Your First eLearning Storyboard .”

Unit or lesson blueprints or storyboards can be created using many different tools. Some are text-based, using a table like the one below to outline the structure, and content of the individual pages that students will interact with in your learning activity.

Table 1: Sample text-based blueprint structure

Other forms of storyboarding are more visual in nature. Some planners sketch out what the overall website, and individual pages, will look like. That can be done using applications such as Microsoft Word or PowerPoint, or more specialized software. This process of wireframing provides an opportunity to carefully plan the visual aspects of a web-based learning activity, and gives a map for developers to follow when building the final product. Figure 1 illustrates two different varieties of visual storyboards.

Figure 1: Visual storyboard examples (Power, 2013)

Wikipedia’s (2018) ” Website Wireframe ” page provides an excellent detailed overview of what wireframes are, and how to develop them. Watch Charli Marie’s (2015) How to Wireframe a Website for a good introduction of how to put wireframing concepts into practice, and stay focused on getting the macro scale design elements right before focusing on the little details.



Source: YouTube, CharliMarieTV

Topic 2: Technology Exploration

Activity 1: Creating a Blueprint, Storyboard, or Wireframe

You know your topic. You have selected technology tools. You have considered key technology integration issues. And now you have seen how important it is to map out how
you will piece everything together before you start building a web-based learning activity. So, what approach do you think would work best for you as you start this planning? A text-based blueprint? A more visual storyboard or wireframe?

Use an application like Microsoft Word or PowerPoint to create a blueprint, storyboard, or wireframe of what your learning activity will look like when you create
it on a web page or website. Whatever method you choose, keep your web development platform in mind. Platforms such as Weebly, Wix, WordPress, or a learning management system, will impose certain design and functionality restrictions on you. These restrictions should be accounted for in your planning.

Useful Templates:

Penn State provides downloadable blueprint templates that you can use to complete this part of your project plan. Or, you could download a Sample Blueprint Template or Storyboard Template here. Alternatively, you could create your own template, or use one from your own institution.

Your completed blueprint, storyboard, or wireframe will be submitted as Assignment 4: Technology Integration Activity Design. Be sure that your plan focuses on and
includes:

Topic 3: Community Engagement

Activity 2: Discussion Questions

Your instructor will post questions in the course discussion forum related to this week’s topics. Respond to these questions, and check out (and reply to) some of the responses posted by your classmates. Feel free to use the course forum to post any thoughts or questions you may have related to this week’s readings and activities.

Activity 3: Sharing and Exploring Blueprints, Storyboards, and Wireframes

Create a portfolio post to share the blueprint, storyboard, or wireframe that you developed for Assignment 4: Technology Integration Activity Design. Once you have completed and shared your design plans, take some time to explore and comment on those shared by your classmates. Are there any design ideas that you could use to help tweak your overall design, and make the learning experience smoother and more engaging for your students?

Activity 4: Peer Support

Schedule a time to meet up with your study partner (the classmate you connected with in the Week 6 Technology Exploration Activities). Use a personal video conferencing application of your choice (i.e. Skype, Google Hangouts, FaceTime, etc.) to connect, share, and discuss your Technology Integration Activity Design plans. Help each other to tweak your plans, and discuss the tools that you could use to complete the process of actually developing your Technology Integration Activity project.

Topic 4: Assignment 4 Submission

By the end of Week 10, you will submit a completed copy of Assignment 4: Technology Integration Activity Design. Submit a copy of your Technology Integration Activity Design document to you instructor, using the following file naming format:

Refer to the Assignment 4: Technology Integration Activity Design assignment guide for further details about specific assignment completion requirements.

Due Date: End of Week 10.

Week 10 Summary

This week, we have examined the importance of creating detailed plans to map out what a learning experience will look like in a digital learning environment. Creating blueprints, storyboards, or wireframes helps to ensure that your activity includes everything that needs to be covered in terms of content, and that you optimize engagement and learning for your students. It also helps you to focus on getting your activity design right, before you need to shift your attention to the technical skills of actually building your learning resources. We will turn our attention to those skills and tasks in Weeks 11–12.

References

Adeboye, D. (2014, October 21). Principles of storyboarding for e-learning design [Video file]. Retrieved from https://youtu.be/l9PZ2bEuKFA

Power, R. (2013, April). Create your own mobile RLOs (reusable learning objects) for situated active learning. Workshop presentation at Technology in Higher Education 2013, Doha, Qatar.