Building a Modern Content Management System: University Web Redesign Series

Jun 06, 2014Christopher Hallahan

A huge part of the Kent State website redesign was transitioning to a modern content management system that would provide:

A better editing experience for content authors, who typically do not have website expertise

A faster and more stable environment

Functionality for maintaining the hundreds of college, department and microsites housed within the university content management system

Discreet content types that would further separate content from presentation

Integrating a front-end framework that would ease the transition to responsive design and allow better use of existing design patterns and libraries

Easier integration of multimedia, such as photos and videos - with cropping and image optimization built in

A simplified system for managing new content, bringing multiple types of content into a single content type

Our Information Services technology department chose Drupal for these needs, which was robust enough to handle these requirements, but allowed for extreme customization to fit our specific needs.

CONTENT MODELING

The process started with content modeling, where we worked with the IT group to map our content types into fields, field types and help text. Some examples of content types included Profiles, News Articles, Basic Page, Organic Groups, Infographics and Forms. Designing and mapping content types to the content management system is a user experience project by itself and was challenging for the team, as the presentation layer wasn't yet available to validate how our fields would display.

Overall, I wish we had segmented content into more discrete fields, as customized content, such as landing pages and pages with columns, were extremely difficult to edit and maintain in a single content chunk.

MIGRATING CONTENT

A big part of any redesign is migrating existing content. The challenge is deciding what content is actually useful, well-written and well-structured. Many times, the team found that content could be combined or simplified greatly. We paid attention to structuring content with headings, bullet points and graphics. Thousands of news articles and content pages were migrated and edited over a few months time.

DESIGNING THE TEMPLATES

Concurrent with content migration, the IT team began building out page templates, mapping our content types and design concepts to actual HTML and CSS. This process proved to be a monumental task, and we found many flaws in the original design concepts that would not translate well to responsive design, or features that took a hit on performance. Testing the concepts in a more robust prototyping phase would have resolved many of these problems early on. Additionally, the lack of access to CSS proved challenging to the design team, who could not make design changes on the fly. Our team did end up building custom landing pages and recruitment pages using HTML/CSS, collaborating on GitHub and then transferring to the CMS later. A design early-on to utilize the ZURB Foundation 4 template in Drupal made responsive design and design pattern creation (see http://patterns.kent.edu) a simpler process.

Finally, the WYSIWYG interface presented many difficulties throughout the design process, as we tried to balance robust content formatting without providing too much access to HTML and JavaScript.

INFORMATION ARCHITECTURE

Much of the information architecture was recycled from the current website, with many sections combined, or labels modified based on testing feedback. Drupal's robust menu system allowed for much easier menu creation and organization than our previous content management system. Some new feature sections included our landing pages, Discover Kent State, an introduction to Kent State's campus, the city of Kent and attractions beyond Kent. A combined calendar page brought together three disparate university calendars into one location for the first time.

TESTING, OPTIMIZING FOR PERFORMANCE AND LAUNCH

Performance became a huge concern near the end of the content management project. Many features - such as the many sliders and gradients we had originally proposed on the home page design - simply did not translate well to smaller screens and caused a huge performance hit. More testing early on may have helped ease this phase. Additionally, an expedited schedule meant that many parts of the smartphone and tablet interface were squeezed in at the last minute. The team also performed accessibility testing, using screen readers like JAWS, to ensure features were compliant with government standards and were accessible to the Kent State community.

Despite many moments of panic, late nights and weekends, the website, www.kent.edu, launched according to schedule on May 4, 2014. This included thousands of migrated content pages, a new and modern design and brand new content management system. The next phases of the project, where academic and administrative departments are brought into the new system, will take place throughout 2014.