Taming the Information Beast:
Simple and Effective Techniques to Improve Your
Website using the ADDIE Model
February 16 – 19, 2014 Raleigh, North Carolina
Your Presenters
• Charles Smith
Instructional Designer
University of North Carolina at Chapel Hill
• Chris Derickson
Registrar
University of North Carolina at Chapel Hill
University of North Carolina at Chapel Hill
Number of:
• Students: 29,127 (Fall 2013)
• Faculty: 3,608 (Fall 2012)
• Staff: 8,292 (Fall 2012)
From the Office of Institutional Research and Planning (http://oira.unc.edu)
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 wellorganized, easily maintainable information platform.
Overview
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.
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
The Main goal of the web
re-design project was to
develop a website that
was:
• Organized
• Graphically pleasing
• Maintainable content repository
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…
Website Re-design
After an initial
analysis of available
solutions a complete
rebuild of Regweb
was selected.
The WordPress Content Management System was selected
to host the website to replace Regweb.
Website Re-design
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.
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
Website Re-design
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.
Analysis
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.
Metadata was assigned to each page in the matrix. This
allowed for pages with similar metadata to be grouped
together.
Analysis
3 examples of the metadata used in this project include:
Content Area – used to determine navigation.
(Example: Academic Calendar)
ID – used to determine site structure and
navigation
Current URL – Curent URL in Regweb
Analysis
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
These typically drive the functional/front-end strategy &
design work in the next phase.
Analysis
Example:
Primary and Secondary
Navigations
Analysis
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.
Design/Develop
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
Implementation
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
Templates were created on Regweb to create the same
look-and-feel as the new WordPress website.
Links were created
on the new
WordPress website
to seamlessly direct
site visitors to the reports on Regweb.
Implementation
To determine which links were
accessed most frequently
Google site tools were used to
determine the top 20 most
visited Regweb pages.
Redirects were then created using the WordPress Dashboard
to direct visitors to the page on the new website.
Implementation
Based on the metadata analysis pages were turned off/redirected, 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.
Evaluation
The evaluation phase was
conducted after the GoLive date. It focused on all
issues discovered during
the re-design project as
well as thorough review of
the final site structure and
content.
Additional Tools
To add flexibility to the WordPresssite additional tools were
developed.
•
Calendar Tool
•
Document Repository
•
Simple Forms
•
YouTube Channel
•
Facebook/Twitter
Additional Tools
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:
• Training Requests
• Proof of Enrollment
Requests
• Consent for Disclosure
of Information from Education Records (FERPA)
Additional Tools
The Registrar’s YouTube channel was created to host
the training videos.
Conclusion
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
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!