february 16 – 19, 2014 raleigh, north carolina
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/1.jpg)
February 16 – 19, 2014 Raleigh, North Carolina
Taming the Information Beast: Simple and Effective Techniques to Improve Your Website using the ADDIE Model
![Page 2: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/2.jpg)
• Charles SmithInstructional DesignerUniversity of North Carolina at Chapel Hill
• Chris DericksonRegistrar University of North Carolina at Chapel Hill
Your Presenters
![Page 3: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/3.jpg)
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)
![Page 4: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/4.jpg)
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.
![Page 5: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/5.jpg)
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.
![Page 6: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/6.jpg)
To further enhance the ability to communicate additional tools were used including:Facebook YouTube
Adobe Captivate Twitter
Adobe PDF
Overview
![Page 7: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/7.jpg)
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
![Page 8: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/8.jpg)
Agenda/Contents• Introduction• Website Re-design Project
• Analysis• Design/Develop• Implementation• Evaluation
• Additional Tools• Conclusion
![Page 9: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/9.jpg)
Introduction
In the Spring of 2010 the Registrar’s Office began looking at ways to improve their communication strategy to:
• Alumni• Faculty • Staff • Students
![Page 10: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/10.jpg)
Introduction
The web re-design project was created to improve communication to the identified groups.
![Page 11: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/11.jpg)
Introduction
• Organized • Graphically pleasing• Maintainable content repository
The Main goal of the web re-design project was to develop a website that was:
![Page 12: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/12.jpg)
IntroductionSecondary 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.
![Page 13: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/13.jpg)
Introduction
The web re-design project was also a chance to improve the current Registrar’s website. (regweb.unc.edu)
![Page 14: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/14.jpg)
IntroductionRegweb (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)
![Page 15: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/15.jpg)
Introduction
Let’s take a closer look at the Website Re-design process…
![Page 16: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/16.jpg)
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.
![Page 17: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/17.jpg)
WordPress is a free and open sourceblogging 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
![Page 18: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/18.jpg)
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.
![Page 19: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/19.jpg)
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.
![Page 20: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/20.jpg)
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
![Page 21: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/21.jpg)
The website re-design plan was developed using the ADDIE model:
• Analysis• Design• Develop• Implement• Evaluate
Website Re-design
![Page 22: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/22.jpg)
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
![Page 23: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/23.jpg)
The first step in the web re-design process included taking a complete inventory of the current website’s content and layout.
Analysis
![Page 24: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/24.jpg)
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
![Page 25: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/25.jpg)
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.
![Page 26: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/26.jpg)
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 navigationCurrent URL – Curent URL in Regweb
![Page 27: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/27.jpg)
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
![Page 28: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/28.jpg)
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.
![Page 29: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/29.jpg)
Primary and Secondary Navigations
AnalysisExample:
![Page 30: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/30.jpg)
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
![Page 31: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/31.jpg)
Example: The Website Slider area was created by ITS-Web Services based on the criteria specified by the Office of the Registrar.
Analysis
![Page 32: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/32.jpg)
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
![Page 33: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/33.jpg)
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
![Page 34: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/34.jpg)
A WordPress theme and accompanying templates were created by working with ITS-Web Services.
Design/Develop
![Page 35: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/35.jpg)
Using the metadata gathered in the analysis step wireframes were created.
Design/Develop
![Page 36: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/36.jpg)
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
![Page 37: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/37.jpg)
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
![Page 38: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/38.jpg)
After the review (evaluation) the Registrar signed off on the following areas:
• Content• Website Structure • Navigation
Design/Develop
![Page 39: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/39.jpg)
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
![Page 40: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/40.jpg)
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
![Page 41: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/41.jpg)
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.
![Page 42: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/42.jpg)
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.
![Page 43: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/43.jpg)
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
![Page 44: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/44.jpg)
The example below shows the re-direct message the visitor receives when looking for content that has moved.
Implementation
![Page 45: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/45.jpg)
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
![Page 46: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/46.jpg)
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
![Page 47: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/47.jpg)
To add flexibility to the WordPresssite additional tools were developed.
Additional Tools
• Calendar Tool• Document Repository• Simple Forms• YouTube Channel• Facebook/Twitter
![Page 48: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/48.jpg)
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
![Page 49: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/49.jpg)
The Document Repository includes in-class training manuals, smaller job aids as well as focusing on specialized tasks within ConnectCarolina.
Additional Tools
![Page 50: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/50.jpg)
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)
![Page 51: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/51.jpg)
The Registrar’s YouTube channel was created to host the training videos.
Additional Tools
![Page 52: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/52.jpg)
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
![Page 53: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/53.jpg)
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).
![Page 54: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/54.jpg)
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.
![Page 55: February 16 – 19, 2014 Raleigh, North Carolina](https://reader035.vdocument.in/reader035/viewer/2022062501/568167e2550346895ddd47e4/html5/thumbnails/55.jpg)
Additional Links
• Registrar’s Website http://registrar.unc.edu
• WordPress http://wordpress.com/
Thanks for attending SACRAO 2014!