Commemorating 100 years as the governing body of North Carolina high school athletics, the North Carolina High School Athletic Association partnered with the team at DesignHammer to create a new website featuring improved navigation and organization, a live score ticker and interactive school map.
As a voluntary nonprofit organization, the NCHSAA administers the state’s interscholastic athletic programs, coordinating and organizing playoffs in 23 sports. The organization annually certifies the eligibility of more than 200,000 student athletes from nearly 400 member schools, as well as organizes training for more than 6,000 game officials.
“Over the last decade, the NCHSAA website has become a primary resource for information for our membership, the media and the general public,” said Quanta Holden, assistant director of communications at the NCHSAA.
The NCHSAA needed solutions for content management and navigation, and looked to incorporate modern technologies into the new website to provide visitors with real-time information.
DesignHammer and the NCHSAA collaborated to create a well organized, well designed website that could be easily navigated and viewed on a wide spectrum of Web-browsing devices.
“DesignHammer’s creativity, professionalism and desire to provide us with the best site possible has been outstanding,” Holden said.
DesignHammer delivered a new website built on the Drupal 7 platform, the current version of the popular content management system.
The Drupal CMS allows for easy access to and management of website content, and is used by prominent sports organizations such as the NCAA, Major League Soccer and National Basketball Player’s Association.
In addition to creating a custom design for the website, DesignHammer utilized responsive design. This optimizes user experience by adapting a website to the size of display it is viewed on, facilitating easy navigation and reading for mobile users as well as desktop users.
Planning for Success
To serve the various NCHSAA audiences, the new website provides clear entry points to key information, and was carefully architected to do so.
The NCHSAA and DesignHammer closely collaborated on how the new site would be organized and designed by using various methods, including mind mapping. Mind maps are visual diagrams that outline webs of information, proving to be incredibly useful for showing links and connections in a website.
The initial map connected navigation and every page of the original website, which yielded hidden links and lack of context for some pages.
DesignHammer then created a second map to indicate specific connections, navigation and content hierarchy to be used in the new website, all of which were simplified and streamlined.
For the website’s appearance, lead designer Frank Yonnetti utilized Style Tiles to direct elements of design. Style Tiles visually organize the colors, fonts and interface elements that make up a website’s visual brand.
Yonnetti said style tiles are a great tool to open channels of communication between a designer and client.
“Style tiles contain elements of design as well as adjectives to verbally describe visuals, and serve as a reference point for discussion between the client and designer,” he said.
Holden said the method was helpful for providing a clear, visual idea of the direction DesignHammer would take in building the site.
Improved Functionality and Features
With nearly 400 member schools, the NCHSAA needed a well organized way to manage up-to-date information.
DesignHammer built an importer that would allow the NCHSAA to upload a CSV with data about the schools, which would then import into Drupal’s database.
The data dynamically populates an interactive map of all member schools, as well as detail pages for each of the schools. Each school detail page is complete with a Google map, link to Google directions, contact information, website, classification, conference and mascot.
The new home page features a scrolling ticker of final scores from playoff 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.
Because the NCHSAA serves as the source for information on playoff and championship games, the new site needed an organized way to present tournament brackets. Competition brackets generated in MaxPreps are 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 brackets are organized by sport and classification, and can be filtered by year for more organized searches. New brackets created are interactive with links to individual schools and stats in MaxPreps.
Holden said one thing he looks forward to most about the new website is that it will be the stand-alone resource for current information that can be accessed 24/7.
“With the amount of information on the site, the way it’s organized, and the incorporation of excellent features and additions,” Holden said, “we hope to eliminate any extra steps or hassles for people trying to obtain information.”
Add new comment