North Carolina High School Athletic Association

Client Description

Commemorating 100 years as the governing body of North Carolina high school athletics, the North Carolina High School Athletic Association worked with the team at DesignHammer to create a website that would serve as a stand-alone resource for the latest news from the Association, with the ability for visitors to access information 24/7 on a range of Web-browsing devices.

As a voluntary nonprofit organization, the NCHSAA administers the state’s interscholastic athletic programs, coordinating and organizing playoffs in 23 sports for its nearly 400 member schools.

The Challenge

The NCHSAA wanted to update the look and feel of its website, as well as transition to a modern, open-source content management system (CMS) that would easily allow for frequent updates by several users.

The Solution

Content Management

With several staff members overseeing and maintaining different areas of content on the website, the NCHSAA needed a content management system that allowed for multiple user roles and an easy-to-use interface.

DesignHammer built the new website in version 7 of Drupal, a popular open-source content management system used by prominent sports organizations such as the National Collegiate Athletic Association (NCAA), Major League Soccer, and the National Basketball Player’s Association.

Drupal allows NCHSAA staff to independently add content, without needing assistance from a developer.

To best serve the various NCHSAA audiences, the new site was architected to provide clear entry points to information. Mind Mapping techniques were used to help DesignHammer and the NCHSAA organize existing content, and collaborate on the new structure.

Optimized Mobile Browsing

To provide an optimal user experience for both mobile and desktop users, the DesignHammer team utilized Responsive Web Design techniques.

Responsive design allows a website to “respond” to users’ environments, adjusting how the page displays based on factors such as Web browser, orientation, and screen size. This facilitates easy navigation and reading for users on a range of devices.

For the NCHSAA, having a responsive website means visitors can easily access and view the live score ticker, find directions to championship events, and see the latest news on N.C. high school athletics from a smartphone, desktop, or tablet device.

Dynamically-populated Interactive School Map

With nearly 400 members, the NCHSAA needed an easy and well-organized way to manage up-to-date information for each school.

DesignHammer built an importer that allows the NCHSAA to upload a CSV with data about each school, which then imports into Drupal’s database.

Map of all member schools

The data dynamically populates an interactive map of all member schools, as well as detail pages for each school. School detail pages are complete with a Google map, link to Google directions, contact information, website, classification, conference and mascot.

Detail page of a member school

Live Score Ticker

The new home page features a scrolling ticker of final scores from playoff and championship games. The scores are pulled from the latest live updates from MaxPreps, an online publisher of scores, photography and video clips for high school athletics in the United States.

Live feed score ticker on homepage

The DesignHammer team built the score ticker from scratch, using an XML feed provided by MaxPreps. Fine-grained control of how score information fit within the custom-built ticker was accomplished by manipulating the XML feed using jQuery and CSS.

To achieve optimal user experience, the ticker’s functionality was created with a keen awareness of how users would view and interact with the page using different devices. Each element needed to be carefully considered during development:

• The number of games displayed
• Scrolling animation
• Navigation arrows to move between sports and classifications
• Type of browser and size of browser window

This feature was heavily tested for different dimensions of layout and browsers.

To maximize performance and minimize load time, Lazy Loading was used to only load information when requested by the user. This works especially well for mobile users when download speed may be limited.

Championship Bracket Archive

Because the NCHSAA serves as the source for information on playoff and championship games, the new website needed an organized way to present tournament brackets.

Competition brackets are generated in MaxPreps and then dynamically added to the brackets archive on the NCHSAA website.

Integration with MaxPreps allows for a one-step transfer of information and eliminates the need for the NCHSAA to separately upload bracket files to the website.

The bracket archive contains tags organized by sport and classification and can be filtered by year and sport for more organized searches. New brackets created are interactive with links to individual schools and stats in MaxPreps.

News Archive

As the go-to source for news on its member schools, championships, and other events, the NCHSAA posts articles regularly to its website; this created a challenge for content migration as more than 2,800 news stories existed on the old website.

Using CasperJS, DesignHammer wrote a custom migration script to move this content into Drupal, while also reformatting and removing old HTML tags no longer needed.

The Results

The new NCHSAA website accommodates users in today’s growing mobile Web, and delivers the latest information while also preserving the Association’s archived history.

By delivering content through a stand-alone resource, the NCHSAA can continue to maximize how it serves its several audiences by using the latest Web technology.