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 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.
To answer the NCHSAA’s needs, we delivered a website built in the Drupal CMS featuring a new site structure and improved navigation, live score ticker, championships bracket archive and interactive school map.
WEBSITE NEEDS - AND SOLUTIONS
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.
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.
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.
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.
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 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 serve its several audiences by using the latest Web technology.