February 16 – 19, 2014 Raleigh, North Carolina

Taming the Information Beast: Simple and Effective Techniques to Improve Your Website using the ADDIE Model

• Charles SmithInstructional DesignerUniversity of North Carolina at Chapel Hill

• Chris DericksonRegistrar University of North Carolina at Chapel Hill

Your Presenters

University of North Carolina at Chapel Hill

From the Office of Institutional Research and Planning (http

://oira.unc.edu)

Number of:

• Students: 29,127 (Fall 2013)

• Faculty: 3,608 (Fall 2012)

• Staff: 8,292 (Fall 2012)

Overview

This presentation will show how the

Registrar’s Office has improved its web

presence (online communication) using a

variety of simple and effective tools. 

Overview

The centerpiece of this effort is the

WordPress CMS (content management system)

platform.

The delivered feature set allowed the

Registrar’s Office to transform a previously

unwieldy website into a well-organized,

easily maintainable information platform. 

To further enhance the ability to

communicate additional tools were used

including:Facebook YouTube

Adobe Captivate Twitter

Adobe PDF

Overview

Using these tools the Registrar’s Office has

been highly successful with communicating

many of the changes that have affected

student records at UNC-Chapel Hill and

provide a highly usable web resource to the

campus community.

Overview

Agenda/Contents

• Introduction

• Website Re-design Project• Analysis• Design/Develop• Implementation• Evaluation

• Additional Tools

• Conclusion

Introduction

In the Spring of 2010 the Registrar’s Office

began looking at ways to improve their

communication strategy to:

• Alumni

• Faculty

• Staff

• Students

Introduction

The web re-design

project was created

to improve

communication to

the identified

groups.

Introduction

• Organized

• Graphically pleasing

• Maintainable content repository

The Main goal of the

web re-design project

was to develop a

website that was:

Introduction

Secondary goals included:

• Developing additional methods of

communicating to alumni, students, staff

and faculty.

• Creating a training area to host classes

and documentation.

• Developing a calendar tool for academic

events.

• Developing a simple form tool.

Introduction

The web re-design project was also a chance to

improve the current Registrar’s website.

(regweb.unc.edu)

Introduction

Regweb (created in 2003) is a hand coded

(PHP/MysSql) website.

Some of the issues affecting Regweb as an online

resource:

• Content was difficult to maintain (content was

out-of-date)

• Poor Website Usability (content was not

organized)

• Difficult to administer/maintain (Team of 4)

Introduction

Let’s take a closer look at the Website Re-design process…

After an initial

analysis of

available

solutions a

complete rebuild

of Regweb was

selected.

Website Re-design

The WordPress Content Management System

was selected to host the website to replace

Regweb.

WordPress is a free and open

source

blogging tool and a content

management system (CMS)

based on PHP and MySQL, which

runs on a web hosting service.

Website Re-design

Features include:

• Plug-in architecture (including forms,

calenders and SEO)

• Template driven system

Website Re-design

WordPress is used by more than 18.9% of the

top 10 million websites as of January 2014 a

figure that rises every day. Everything from

simple websites, to blogs, to complex portals

and enterprise websites, and even applications,

are built with WordPress.

WordPress combines simplicity for users and

publishers. This makes it flexible while still being

easy-to-use.

Website Re-design

To create a usable WordPress

site a partnership with ITS-

Web Services (a branch of

the central Information

Technology Services group)

was established.

Website Re-design

The advantages of this partnership included:

• Cost of development free due to early

adopter status

• Web Server administration/maintenance

taken off-site

• Centralized IT Service

• Allowed the focus to be on the content

The website re-design plan was developed using the ADDIE model:

• Analysis

• Design

• Develop

• Implement

• Evaluate

Website Re-design

This Instructional System Design model is ideal for reviewing continual or formative feedback while creating instructional materials.

This model strives to save time and money by catching problems while they are still easy to fix.

Website Re-design

The first step in the web re-design process

included taking a complete inventory of the

current website’s content and layout.

Analysis

To perform the inventory an existing site map of

Regweb was imported into an Excel

spreadsheet.

• This spreadsheet tracked the metadata

gathered on each page.

Analysis

Metadata is defined as

“data about data” or

data providing

information about one

or more aspects of the

data.

Analysis

Metadata was assigned to each page in the

matrix. This allowed for pages with similar

metadata to be grouped together.

3 examples of the metadata used in this project include:

Analysis

Content Area – used to determine navigation. (Example: Academic Calendar)

ID – used to determine site structure and navigation

Current URL – Curent URL in Regweb

The inventory of the Regweb site also included:

• Performing an audit of the current content

to ensure it was up-to-date and relevant.

• Identifying Key Process Flows (workflow).

• Identifying the Functional/Technical

Requirements of the new website.

• Identifying additional applications that

support web communications.

Analysis

Functional Requirements: These are

elements of the new website that are visible to

the end user-such as:

•Screen Layout

•Content Organization

•Navigational Flow

Analysis

These typically drive the functional/front-end

strategy & design work in the next phase.

Primary and Secondary

Navigations

Analysis

Example:

Technical Requirements:

In order to enable the capabilities described in

the Functional Requirements, back-end code,

configuration and processes were implemented.

• These features are typically “under the hood”

and not readily visible to the end-user.

Analysis

Example:

The Website Slider area was created by ITS-

Web Services based on the criteria specified by

the Office of the Registrar.

Analysis

The next step in the web re-design process

focused on designing and developing a website

that met the identified goals using the

information and metadata gathered during the

analysis phase.

Design/Develop

Actions included:

• Designing a usable site theme as well as

supporting template pages with ITS-Web

Services.

• Developing wireframes based on the

metadata contained in the Excel

Spreadsheet/Matrix.

• Reviewing the rough draft of website

(evaluation).

Design/Develop

A WordPress

theme and

accompanying

templates were

created by

working with ITS-

Web Services.

Design/Develop

Using the

metadata

gathered in the

analysis step

wireframes

were created.

Design/Develop

A website wireframe, also known as a page

schematic or screen blueprint, depicts the page

layout or arrangement of the website’s content,

including interface elements and navigational

systems, and how they work together.

Design/Develop

Complete Review of the website

With a team of subject matter experts each area

of the Registrar’s Office the new website was

reviewed.

This review focused on the:

• Layout

• Structure

• Content

Design/Develop

After the review (evaluation) the Registrar

signed off on the following areas:

• Content

• Website Structure

• Navigation

Design/Develop

The following tasks were required before the Go-

Live Date:

• Importing identified Regweb content into

WordPress templates.

• Creating New Registrar pages.

• Identifying the top 20 visited pages on

Regweb (using Google Site Tools).

• Creating Re-directs for the top 20 visited

Regweb pages. (using WordPress tool and DNS

updates).

Implementation

The first task in the Implementation phase was

determining whether to turn off the web Server

hosting Regweb or disabling specific content.

In order to support several reports written in

Java and Tomcat the Regweb Web Server was

kept running until the reports could be

converted or imported to an ITS hosted

solution.

Implementation

Implementation

Templates were created on Regweb to create

the same look-and-feel as the new WordPress

website.Links were

created on the

new WordPress

websiteto seamlessly direct

site visitors to the reports on Regweb.

To determine which links

were accessed most

frequently Google site

tools were used to

determine the top 20

most visited Regweb

pages.

Implementation

Redirects were then created using the

WordPress Dashboard to direct visitors to the

page on the new website.

Based on the metadata analysis pages were

turned off/re-directed, removed or kept in place

on Regweb.

To ensure visitors to Regweb did not get lost a

re-direct was also put into place to direct

unfilled page requests to the new Registrar’s

website.

Implementation

The example below shows the re-direct

message the visitor receives when

looking for content that has moved.

Implementation

As with the all of the steps in ADDIE

development model a review was conducted on

the re-directs to ensure that all heavily used

pages were pointing to a relevant page in

WordPress.

• Registrar’s Report pages were also reviewed

to ensure a similar look-and-feel was

maintained.

Implementation

The evaluation

phase was

conducted after the

Go-Live date. It

focused on all issues

discovered during

the re-design project

as well as thorough

review of the final

site structure and

content.

Evaluation

To add flexibility to the WordPresssite additional

tools were developed.

Additional Tools

• Calendar Tool

• Document Repository

• Simple Forms

• YouTube Channel

• Facebook/Twitter

The calendar tool in

the Registrar’s

WordPress site allows

visitors to view

Academic Dates as well

as Training Dates and

other important events.

Additional Tools

The Document Repository includes in-class training

manuals, smaller job aids as well as focusing on

specialized tasks within ConnectCarolina.

Additional Tools

The form utility allows the Registrar’s Office to

gather simple requests from visitors on:

Additional Tools

• Training Requests

• Proof of Enrollment

Requests

• Consent for Disclosure

of Information from Education Records (FERPA)

The Registrar’s YouTube channel was

created to host the training videos.

Additional Tools

While content may continue to expand the

Registrar’s Office WordPress website has the

ability to add new or edit existing content

without any

challenge to the

consistency of the

website.

Conclusion

Conclusion

Visitors to the website are now able to

easily find information either by following the

logical structure of the website or by using the

built-in search utility (a WordPress CMS

strength).

Conclusion

Finally the completed Registrar’s website also

presents a cohesive UNC-Chapel Hill web

presence.

Visitors to the site are presented with a

consistent web presence that reinforces the

University’s strengths.

Additional Links

• Registrar’s Website http://registrar.unc.edu

• WordPress http://wordpress.com/

Thanks for attending SACRAO 2014!