NSU Florida

Project Goals

To enhance the nova.edu ecosystem by producing a playbook of best practices, while addressing web technologies, information architecture, content management, and search engine optimization. A large part of the project was to evaluate 96,000+ pages of existing content and 100+ subdomains on nova.edu. From the overall evaluation of the nova.edu site, there was a determination a site migration from Cascade CMS to Omni CMS was needed. We found Cascade CMS was too limited to work with, especially when it had to meet the needs of various subdomains owned by different colleges. There was a need to update a large portion of the 96,000 pages from an older Legacy look and feel to the newer current BTS design standards.

Primary Goal

The purpose of the CMS migration was to migrate the main nova.edu and subdomain pages from Cascade CMS to Omni CMS. All the page elements and templates were updated and recreated in Omni CMS.

ADA Compliant Review

As part of the migration process, the updated NSU website branding guidelines included colors, fonts, and image tagging made to follow ADA-compliant guidelines. For this to happen, Siteimprove was used to completely audit all pages for any visible and content issues not entirely AD compliant. ADA-compliant standards needed to be consistent for both mobile and desktop formats.

Website Identification and Mapping

A general overview of the nsu.edu site evaluated any visual inconsistency or irregularity in content formatting, icons, colors, or image tagging.

Personas

Personas were created to help understand a user's needs, experiences, behaviors, and goals. In-depth analysis studies were conducted to review behavior patterns, background information, skills, goals, and problems. Personas helped identify the typical visitors including students, parents, and working professionals looking for post-graduate degrees. They also helped when the tailoring copy needed to appeal to certain demographics based on their lifestyle, income, and location.

Previous Main Page Templates

The following shows a list of page templates being used in Cascade CMS. Most of the page layouts on the nova.edu site were based on one of these templates. The templates list was made up of older Legacy-looking templates that needed to be updated to meet the same look and feel of the newer-looking templates. Eventually, the older style Legacy pages were transitioned to the new CMS templates.

CMS Blocks List

The block list created was broken down into 4 main categories, used in Cascade CMS. For the migration to a new CMS, the list was examined to see if any of the blocks could be combined or removed to cut back on the number of library blocks. Each block was tested to see how it appeared in different viewports revolving around desktop and mobile formats. As a key point, the blocks were designed to be easy to understand if used by a novice or experienced creator.

Page Template List

The revised templates under Omni CMS were split into 3 main categories; named College Level, Graduate Level, and Misc. All of the templates were incorporated into the final blocks. Permission levels could be assigned to allow who can modify, remove, or add any blocks.

Competitive Analysis on Navigation

A competitive analysis was completed to see what other competing Colleges were doing. Elements, including navigation types, colors, layout, and the level of responses when going from a desktop viewport to a mobile viewport were all examined.

Navigation Types Research

Based on the analysis, we noticed school competitors used navigation types based on either a progressive menu or a mega navigation type. Low-fidelity mockups were created for the two different types which were later used in a couple of online first-click tests presented to several paid participants.

The first click tests were set up to compare progressive navigation to a mega navigation type. All testing was completed using Lyssna, a company that allows you to set up and run interactive tests to be completed by paid participants. Each test was customized to run using the same demographics shown below. The survey outline used multiple-choice questions, short answers, and first-click tasks. Completed results from the testing usually took 1-2 days per test.

Progressive Test Results

The results below display a heat map of user first-click impressions hotspots. From the results, we can see which areas are receiving more clicks based on the size of the red areas. Seeing the length of time it took to complete each step, helped to determine how easy and effective the navigation type was.

Mega Nav Test Results

Below is a heat map made up of user first-click impressions. The heat map results are quite different from the progressive test. The amount of time to complete was significantly less due to the lower number needed to complete the same task.

Progressive vs. Mega Nav Test Results

The results below display a heat map showing user first-click impressions hotspots. From the results, we can see which areas are receiving more clicks based on the size of the red areas. Seeing the amount of time it took to complete each step of the test helped to determine how easy and effective the navigation type was.

Main Navigation Color Preference Test

With the Mega Nav being the clear winner, 2 different color schemes were created and tested next. Using Lyssna, a preference test was conducted. From the results compiled, the white version was the clear winner of the two having a 90 percent confidence that the results are accurate.

Bottom Footer & Mobile Navigation Adaptation

Next, a redesign for the bottom footer, mobile top nav, and mobile bottom footer was completed. The updated components were made increasingly legible by increasing the font size and CTA's to help encourage first-click rates.

Revisited Website Color Pallet

The initial review of the nova.edu site showed some of the colors used were not entirely ADA-compliant. The website color pallet was simplified to have more color usage consistency across the nova.edu and subdomain sites. This resulted in a more ADA-compliant website.

Website Design Element Specifications

The final specifications for each CMS component were documented in detail, which would be used by the front-end developers and content editors. The document specifications cover fonts, colors, spacing, CTA buttons, CTA button states, and image sizing for any interactive components including drop-down navigation menus.

Final CMS Templates

Using the final page templates, high-fidelity mockups were produced. These templates were made available in the new CMS for the nova.edu and subdomain to be used. Each of the templates has both locked and unlocked areas. Locked areas would include the top navigation and bottom navigation. Editable regions could be any main content areas in between the navigational elements.

Conclusion

With the completion of the updated branding guides and templates, all of the specifications were handed off to front-end developers who are a part of OMNI CMS. The new design guide was distributed across nova.edu and all of the subdomains. Using Siteimprove will continue to crawl new pages and produce reports for any possible broken links and elements not ADA compliant.