Quick-Learn Design 

Toolkit
Quick-Learn Design Toolkit

ii

This Quick-Learn Design Toolkit was 

prepared by the Educational Design, 

Continuing Education, and Learning 

Services Branch, Division of Scientific 

Education and Professional Development, 

Center for Surveillance, Epidemiology, 

and Laboratory Services, Office of Public 

Health Scientific Services, Centers for 

Disease Control and Prevention, Atlanta, 

Georgia. Please send questions and 

comments to learning@cdc.gov.

Thomas R. Frieden, MD, MPH 

Director, Centers for Disease Control 

 and Prevention

Chesley Richards, MD, MPH 

Deputy Director for Public Health 

 Scientific Services

Michael F. Iademarco, MD, MPH 

Director, Center for Surveillance, 

 Epidemiology, and Laboratory Services

Patricia Simone, MD

Acting Director, Division of Scientific 

 Education and Professional Development

Nancy T. Gathany, MEd, PhD

Acting Chief, Educational Design, 

 Continuing Education, and Learning

 Services Branch

This manual is in the public domain and 

may be used without restriction. Citation as 

to source, however, is appreciated.

Links to nonfederal organizations are 

provided solely as a service to our 

users. These links do not constitute an 

endorsement of these organizations nor 

their programs by the Centers for Disease 

Control and Prevention (CDC) or the federal 

government, and none should be inferred. 

CDC is not responsible for the content 

contained at these sites.

Use of trade names and commercial sources 

is for identification only and does not imply 

endorsement by the Division of Scientific 

Education and Professional Development, 

Center for Surveillance, Epidemiology, and 

Laboratory Services, Centers for Disease 

Control and Prevention, the Public Health 

Service, or the U.S. Department of Health 

and Human Services.

The findings and conclusions in this 

toolkit are those of the authors and do not 

necessarily represent the official position 

of the Centers for Disease Control 

and Prevention.

Suggested citation: Centers for Disease 

Control and Prevention (CDC). Quick-Learn 

Design Toolkit. Atlanta, GA: US Department 

of Health and Human Services, CDC; 2014. 

Available at: 

http://www.cdc.gov/learning.
Quick-Learn Design Toolkit

iii

Contents

Introduction ........................................ 1

Section I: Lesson Design Guide .......... 2

I-1. Needs Analysis.............................................2

I-2. Content Organization................................2

I-3. Learning Assessment.................................4

I-4. Storyboard and Web Development......4

I-5. Formative Evaluation.................................4

Section II: Storyboard Template ........ 5

Section III: Web Development Tips .... 7

III-1. Preparation and Planning......................7

III-2. Software Resources..................................7

III-3. Browser Support .......................................9

III-4. Content.......................................................10

III-5. Accessibility...............................................10

III-6. Common Accessibility Concerns.......11

III-7. Speech Browser Scans...........................11

III-8. Additional Accessibility Resources...11

Next Steps...........................................12
Quick-Learn Design Toolkit

iv
Quick-Learn Design Toolkit

1

Introduction

The Toolkit

The Quick-Learn Design Toolkit is a set of 

resources to assist instructional designers 

and web developers with creating QuickLearn lessons (http://www.cdc.gov/

learning/quick_learns.html). Quick-Learn 

lessons are a form of e-learning designed to 

address one or two learning objectives and 

require less than 20 minutes to complete. 

Through responsive web design techniques, 

the lessons are accessed through desktop 

computers and mobile devices alike, 

including smartphones and tablets. The 

Quick-Learn Design Toolkit comprises the 

following three sections:

■ Lesson Design Guide for instructional 

designers. This section describes five key 

instructional aspects to consider when 

creating a Quick-Learn lesson.

■ Storyboard Template

(http://www.cdc.gov/learning/local/ppt/

eqldt-storyboard.pptx) for instructional 

designers. This Microsoft® PowerPoint®

(Microsoft Corp., Redmond, Washington) 

template is used to lay out and evaluate 

lesson content.

■ Web Development Tips. The tips include 

technical aspects to consider when 

developing the Quick-Learn lesson’s 

content for online delivery.

Quick-Learn lessons 

are a form of 

e-learning designed 

to address one 

or two learning 

objectives and 

require less than 20 

minutes to complete. 
Quick-Learn Design Toolkit

2

Section I: Lesson Design Guide

During the process of building a QuickLearn lesson, multiple instructional best 

practices should be considered. This 

section, Lesson Design Guide, focuses on 

five key areas for developing an effective 

Quick-Learn lesson: needs analysis, 

content, learning assessment, storyboard 

and web development, and formative 

evaluation. Because instructional designers 

have varying degrees of experience in 

creating electronic learning (e-learning) 

we recommend this guide be used in 

conjunction with the E-learning Essentials 

suite of products available at 

http://www.cdc.gov/learning/quality/

essentials.html. Although this guide 

is primarily intended for instructional 

designers, the inclusion of web developers 

throughout the lesson design process is 

crucial for successful lesson execution.

I-1. Needs Analysis

Typically, a Quick-Learn lesson is best suited 

for providing information or just-in-time 

training or for reinforcing learned skills. It 

is not ideal for teaching an elaborate skill 

set, a topic requiring in-depth content, or 

frequently changing content. Quick-Learn 

lessons should have only one or two simple 

learning objectives. If the scope of the 

desired lesson is complex, consider another 

approach, such as a training module that 

contains multiple lessons. For content with 

more than two objectives, consider creating 

a series of Quick-Learn lessons with one 

objective per lesson. Examples of training 

well-suited for the Quick-Learn format 

include the following:

■ updates to manuals, changes in 

procedures, or simple concepts or 

processes with a limited number of steps 

or variables (e.g., illustrating the steps 

for handling biohazardous waste while 

collecting a blood sample);

■ refreshers of key concepts learned in a 

course (e.g., providing a quick reference 

guide for reading laboratory test results);

■ succinct case studies and realistic 

examples requiring learners to apply key 

concepts from learned lessons; and

■ just-in-time training that guides learners 

through a specific task.

Ask the following questions during the 

needs analysis process:

■ What learning need will be addressed 

with this Quick-Learn lesson?

■ What skills and experiences does the 

learner already have? 

■ How will the learner demonstrate 

mastery of the content?

I-2. Content Organization

If the Quick-Learn approach seems 

reasonable after conducting the needs 

analysis, begin thinking about the content. 

This involves a logical organization of text, 

graphics, or media such as audio, video, 

or animation, to help explain concepts. 

The text should be concise and follow 

plain language guidelines (http://www.

cdc.gov/healthliteracy/developmaterials/

PlainLanguage.html). Plain language does 

not mean that content has to be understood 

by everyone. It should be relevant and 

clearly written for the intended learner. 
Quick-Learn Design Toolkit

3

Consider the following principles when 

writing a Quick-Learn lesson:

■ Keep the content short and focused and 

include only essential information. Each 

content screen should include three to 

five sentences at most. The text should 

not require scrolling, and it should be 

visually aligned to allow learners to skim 

information quickly (see Example 1).

■ Use relevant images and graphics to 

illustrate important concepts or complex 

ideas. Remember a picture is worth a 

thousand words (see Example 1).

■ Design interactions to promote interest, 

inquisitiveness, and challenges to engage 

the learner (see Example 2).

— Use an animation to 

demonstrate procedures.

— Develop a role-based simulation.

— Provide explorative 

learning opportunities.

■ Consider the challenges of navigating on 

a mobile device and include only buttons 

and links that are critical for functionality 

(see Example 1).

Example 1

Concise text, relevant graphic, 

and easy navigation buttons

Example 2

Interactivity consisting of a 

question with feedback 

authentic to the learner’s role
Quick-Learn Design Toolkit

4

I-3. Learning Assessment

Early in designing a Quick-Learn lesson, 

determine your assessment strategy to 

ensure the lesson is effective in achieving 

the intended results. Within the context of 

e-learning, an assessment is any interaction 

from which data is collected with the intent 

of making an inference about the learner. 

Assessment provides practical, objective, 

and measurable evidence that learning 

goals are achieved and ensures a degree 

of product integrity. Because e-learning 

assessment methods provide reliable results 

quickly, training decisions also can be made 

quickly. Moreover, assessment improves 

learning through interaction and feedback, 

identifies learner knowledge strengths and 

weaknesses, and helps to evaluate the 

effectiveness of the instruction. Consider 

including a posttest with multiple-choice 

questions and immediate feedback. Consult 

the E-learning Essentials suite of products 

(http://www.cdc.gov/learning/quality/

essentials.html) for best practices in 

developing high-quality learning assessments.

I-4. Storyboard and Web Development

When the needs analysis, content 

organization, and assessment strategy 

are complete, the next step is laying out 

the Quick-Learn lesson. The Quick-Learn 

Design Toolkit Storyboard Template 

discussed in Section II is available for this 

purpose. The Storyboard Template is a 

Microsoft PowerPoint file and provides 

placeholders for interface and content 

elements. Web developers will use the 

completed storyboard and the Web 

Development Tips section of this guide 

to create the functioning lesson. We 

recommend that web developers be part 

of the design and storyboard planning 

process so they can convey any technical 

considerations that might affect the lesson. 

As an integral member of the design team, 

the web developer’s involvement in the 

storyboard process can assist his or her 

understanding of the overall goal for the 

Quick-Learn lesson.

I-5. Formative Evaluation

Formative evaluation should occur 

multiple times during storyboard and 

web development. To ensure that any 

problems hindering learning are detected 

and corrected before launch, have an 

instructional designer and sample group 

of learners perform the steps outlined in 

the storyboard. To confirm the accuracy 

of the content, have subject matter experts 

review the content while it is still in 

storyboard form.

After the web developer builds the 

functioning lesson, pilot test the lesson 

with a sample group of learners. Thorough 

pilot testing will reveal inconsistencies 

in the training and ensure the learning 

objectives are achieved. Pilot testing also 

will help gauge usability and functionality 

and ensure that the content presentation 

and learning activities function correctly 

on multiple devices (computers, tablets, 

and smartphones).

...determine your 

assessment strategy 

to ensure the lesson is 

effective in achieving 

the intended results.
Quick-Learn Design Toolkit

5

Section II: Storyboard Template

The Storyboard Template is provided as 

a starting point for designing a QuickLearn lesson. The complete storyboard is 

a Microsoft PowerPoint file and available 

for download at (http://www.cdc.gov/

learning/local/ppt/eqldt-storyboard.pptx). 

A PDF version of the Storyboard Template 

is available at 

(http://www.cdc.gov/learning/local/pdf/

eqldt-storyboard.pdf). 

Web developers will use the finalized 

storyboard to create the fully functioning 

lesson. For more information about using 

this template and developing for online 

delivery, continue to Section III: Web 

Development Tips.

Examples 3, 4, and 5 are excerpted from the 

Storyboard Template.

Example 3 

Lesson layout
Quick-Learn Design Toolkit

6

Example 4

Section page with 

image placeholder

Example 5 

Section page with 

knowledge check
Quick-Learn Design Toolkit

7

Section III: Web Development Tips

The following web development tips assist 

web developers with determining the best 

technical solutions for developing the 

Quick-Learn lesson for online delivery. 

Before web development begins, the 

instructional designers responsible for the 

content of the Quick-Learn lesson should 

have reviewed Section I: Lesson Design 

Guide to determine the lesson content. 

They also should have laid out the lesson 

by using the downloaded storyboard 

template from Section II in collaboration 

with the web developer. Web developers 

will use the final storyboard to create a 

pilot-test version and then the final version 

of the functioning lesson.

III-1. Preparation and Planning

The web development of a Quick-Learn 

lesson can be a substantial undertaking. 

Preparation and planning are key to 

remaining on schedule and delivering a 

quality education product.

Preparation

Keep in mind that the amount of space 

for website content on a mobile device is 

often considerably smaller than the space 

available on a desktop computer screen, and 

scrolling horizontally might be impossible 

or impractical. Be sure to communicate 

these space limitations with the instructional 

designer(s) during the design and 

storyboarding stage of the project.

Planning

The length of time for web development 

will vary on the basis of the lesson 

content. Consider working with the 

instructional designer(s) to draft a project 

schedule with clear milestones. Keeping 

a log of activities to track the project’s 

progress as well as ideas for revisions to 

make in future iterations of the lesson 

also will be helpful.

III-2. Software Resources

Intermediate experience level with 

Dreamweaver® (Adobe Systems, Inc., 

San Jose, California) and other 

web-authoring and development tools 

is recommended. Table 1 highlights the 

capabilities of leading industry standard 

web development applications.
Quick-Learn Design Toolkit

8

Table 1

Web Development Software Comparison

Features Dreamweaver* 

CSS and Later Expression† KompoZer§ Captivate¶

WYSIWYG X X X

Server-side 

scripting X X

Mobile device 

support

X X

Template support X X X X

FTP support X X X X

ASP.Net and Visual 

Studio®** support

X

CSS support X X X

JQuery support X X

SEO support X

HTML5 X X

Preview pages 

in different 

browsers

X X

Accessibility 

support

X X

Price comparison $$ $ Free $$$

* Adobe® Dreamweaver, Adobe Systems, Inc., San Jose, California (http://www.adobe.com/products/dreamweaver.html).

†

 Microsoft® Expression, Microsoft Corp., Redmond, Washington (http://msdn.microsoft.com/en-us/expression/default).

§

 KompoZer is open-source software (http://www.kompozer.net/).

¶ Adobe Captivate, Adobe Systems, Inc., San Jose, California (http://www.adobe.com/products/captivate.html). Captivate is not a 

 web authoring tool but a tool used to develop interactive e-learning content and integrates with Microsoft PowerPoint®.

** Microsoft Corp., Redmond, California.
Quick-Learn Design Toolkit

9

III-3. Browser Support

The tips in this section cover methods that help ensure correct display of the lesson on 

different browsers and devices. The tips apply to the following programming languages:

HTML

Verify that the HTML code is free from errors by using an HTML validator. Two validators are 

as follows:

Validator Link

W3C®* http://validator.w3.org/

Mozilla® Firefox®† https://addons.mozilla.org/en-US/firefox/addon/html-validator/

* W3C is open-source software. 

†

 Mozilla, Mountain View, California.

CSS

Apply CSS fallback techniques to optimize the lesson content for different browsers. For 

example, when using a CSS3 gradient to fill in a background, a browser that does not support 

the gradient will not render the background. Provide a solid background color or a gradient 

slice image to eliminate this problem.

JavaScript®

JavaScript’s (Mozilla, Mountain View, California) polyfills, shims, and Modernizr® can be used 

to emulate more advanced functionalities, such as HTML5 and CSS, in nonsupportive browsers. 

The following are examples:

Example Description Link

Respond.js

Used to ensure media queries work correctly in 

older versions of Internet Explorer® (Microsoft 

Corp., Redmond, California).

https://github.com/scottjehl/Respond

HTML5 shiv Used to force older versions of Internet Explorer 

to render HTML5 correctly. http://code.google.com/p/html5shiv/

Modernizr®* Used for feature detection to ensure polyfills and 

shims are used only when needed. http://modernizr.com/

* Mozilla, Mountain View, California.
Quick-Learn Design Toolkit

10

III-4. Content

The tips in this section cover considerations 

when designing components of the layout 

for the Quick-Learn lesson. For more 

information regarding the lesson’s layout, 

review Section II: Storyboard Template.

Layout

To achieve more flexible displays of the 

layout, use Responsive Web Design to 

ensure effective readability and navigation 

across different browsers and devices. 

Consider having at least three versions 

of the lesson to accommodate diverse 

browsers or devices that display at different 

pixels per inch, such as the following:

■ 320 × 480 – Mobile

■ 640 × 960 – Mobile

■ 640 × 1,136 – Mobile and tablet

■ 768 × 1,024 – Tablet and desktop

■ 2,048 × 1,536 – Desktop

Images

Create fluid images by starting with a larger 

image that can be scaled down without 

distortion. The Adaptive Images tool, 

developed by Matt Wilcox, will assist with 

creating this functionality. It can deliver 

device-appropriate, rescaled versions of 

images. The tool is available at 

http://adaptive-images.com

III-5. Accessibility

When developing the Quick-Learn lesson, 

be sure the lesson is accessible not only to 

persons who use different types of browsers 

but also for persons with disabilities. 

Web developers should also be certain to 

determine if the lesson assessments and 

interactivity meet accessibility requirements 

and are supported by a range of browsers 

and devices. For example, Adobe Flash®

(Adobe Systems, Inc., San Jose, California) 

is not supported by all devices. Consider 

collaborating with the accessibility 

contact(s) in your organization early in 

the development process. The tips in this 

section include resources that will help 

ensure accessibility compliance according 

to the Section 508 Amendment to the 

Rehabilitation Act of 1973 (additional 

information is available at 

http://www.fcc.gov/encyclopedia/section508-rehabilitation-act).
Quick-Learn Design Toolkit

11

III-6. Common Accessibility Concerns

To ensure popups and dialog boxes are accessible, add Accessible Rich Internet Application 

(ARIA) (W3C®, open-source software) properties. The following links provide more information:

Tool Link

WAI-ARIA http://www.w3.org/WAI/intro/aria.php

Create an accessible 

dialog box http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/

III-7. Speech Browser Scans

The following are tools and products for testing and remediating lessons for Section 508 

accessibility compliancy:

Tool Link

Screen-reading software

Jaws® for Windows* http://www.freedomscientific.com/products/fs/jaws-product-page.asp

Web-based accessibility testing tools

Web Accessibility 

Evaluation Tool (WAVE) http://wave.webaim.org/

Web Accessibility Toolbar† http://www.visionaustralia.org/business-and-professionals/digital-access/

resources/tools-to-download/web-accessibility-toolbar-for-ie---2012

* Freedom Scientific®, St. Petersburg, Florida.

†

 Freeware developed by Steve Faulkner in a collaboration between Vision Australia, the Paciello Group (Europe), 

 and Jun of the Web Accessibility Tools Consortium.

III-8. Additional Accessibility Resources

■ Web Accessibility Initiative (WAI) (http://www.w3.org/WAI/)

■ HHS.gov: Section 508 (http://www.hhs.gov/web/508/index.html)

■ Section508.gov: Opening Doors to IT (http://www.section508.gov/)
Quick-Learn Design Toolkit

12

Next Steps

Thank you for using the Quick-Learn 

Design Toolkit.

■ Let us know if you have questions or 

suggestions regarding how to improve 

the Quick-Learn Design Toolkit. 

E-mail: learning@cdc.gov.

■ Get ideas and inspiration for your QuickLearn lesson by reviewing those already 

available: http://www.cdc.gov/learning/

quick_learns.html.

■ Also, let us know when you have 

created a Quick-Learn lesson. We might 

be able to promote it on the CDC 

Learning Connection: 

http://www.cdc.gov/learning.

When developing the 

Quick-Learn lesson, 

be sure the lesson 

is accessible not 

only to persons who 

use different types 

of browsers but also 

for persons with 

disabilities. 
For more information, please contact 

Centers for Disease Control and Prevention

1600 Clifton Road, NE

Atlanta, GA 30333

Telephone: 1-800-CDC-INFO (232-4636)/TTY: 1-888-232-6348

E-mail: cdcinfo@cdc.gov

Web: http://www.atsdr.cdc.gov

Publication date: February 2014

CS245963