february 16 – 19, 2014 raleigh, north carolina taming the information beast: simple and effective...
TRANSCRIPT
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!