Michigan High School Athletic Association
The Michigan High School Athletic Association (MHSAA) is a non-profit organization that coordinates the membership of over 1,500 public and private school athletic programs in the state of Michigan. The goal of the MHSAA is to develop common rules for athletic eligibility and competition, with their organized events, tournaments, and state championships drawing close to 1.6 million spectators per year.
Past Successes
Gravity Works has a long past of working with MHSAA on website builds and app development. We previously developed the MHSAA public-facing website that high school sports fans, administrators, and coaches alike use to keep track of scores, update school information, and find resources for upcoming athletic seasons. This initial website build led to the development of the MHSAA iOS and Android apps for score tracking and updating, along with the story-driven sibling site Second-Half, which garnered a large following from sports fans looking to learn more about Michigan student athletes.
The Next Evolution
In early 2020, MHSAA partnered again with Gravity Works to conduct a complete website refresh, one that would not only combine the statistics and record-driven main site and the story-focused Second-Half into one cohesive platform, but also provide a more visually appealing and mobile friendly experience for their users. The mobile-centric experience was imperative as MHSAA’s audience began to shift towards primarily mobile users who are looking for access to information on-the-go.
The site refresh began with designs that highlighted the fan-first approach MHSAA was looking for. The latest feature stories for each sport are showcased in each of their respective sports pages, alongside the results and event information users look for on a regular basis. Our UX team prioritized the content structure for high traffic pages to ensure that the most important and referenced items on the MHSAA’s website were easy to access and share. From there, we began the process of developing the layout and structure of the new website in a Drupal 9 CMS, to prepare the migration of the previous MHSAA website from a DNN environment to Drupal.
Key Features
Merging Websites & CMS Migration
For the new website, we combined the MHSAA’s main website, which focuses on scores, sport information, and resources, with the association’s sibling site Second-Half, which focuses on writing recap articles and feature stories on student athletes and teams. The main website was hosted in a DNN environment while Second-Half was built in Drupal. We used Drupal 9 to host the new MHSAA website and transferred data from both sites into the new environment. The resulting merge created a website that not only provided scores and data the fans want in a visually appealing environment, but also brought the stories of the athletes that make up those statistics front-and-center. This created a web experience that caters more to the fans of high school sports.
Live Data Updates
One of the biggest pulls that draws visitors to MHSAA’s website is the ability to stay up-to-date on the most recent game scores, locations, and times, no matter what school in the state you root for. To ensure that visitors always have the most recent information, we created live React components that integrate within the website’s structure. Scores by team or sport, school directories, Michigan Power Ratings (MPR), and district assignments can all be searched, filtered, and categorized so the user can find exactly what they are looking for. Components such as MPRs and Scores automatically update based on submissions from MHSAA account holders and staff, both saving time for MHSAA site administrators and ensuring that fans always have the most current information at their fingertips.
We used Drupal’s taxonomy structure to create the website’s sports pages. This allowed us to develop the site to adapt to content changes. Where content is added in one section of the taxonomy structure, identical content is changed automatically sitewide, saving both time and effort when conducting website maintenance.
The new MHSAA website allows site administrators to easily add content to any page while ensuring it matches the site’s design framework in the process. Pre-made paragraph types and intuitive full HTML text options give members of the MHSAA staff enough customization to encourage creativity in an easy-to-understand structure.
Multiple Site Admin/User Roles
Many users log in to the MHSAA’s website on a daily basis, but for different reasons. Students, parents, and fans log in to update game scores or look up any necessary documentation to play for the upcoming season. Athletic directors log in to create “Games Wanted” lists and update coach information. Coaches log in to download coaching resources, take courses, and submit rating reports for officials. To support all of these different user needs on a single platform, we created multiple user roles. These user roles are imperative to maintaining the MHSAA experience. Administrators and coaches can access information specific to their needs without having to worry about general site visitors having access. Additionally, site administrators have the ability to assign editorial roles in Drupal that vary in editability and site access for all levels of the organization.
Role-Based Catered Content
One of the primary goals for the new website is to serve each audience type (parent, student, fan, coach, athletic directors, etc.) with an online experience catered specifically to their needs. As part of our UX phase, we conducted extensive research with MHSAA stakeholders to understand the unique needs of each user role and design a content strategy to ensure no one would have to dig through the site to find what they’re looking for. The “I Am A” section is a new online space with dedicated landing pages for each major audience type. These landing pages place important information and resources in a single location, as opposed to scattered throughout the website. This work was a huge collaborative effort with various members of the MHSAA staff to determine the most critical needs for each audience type and how those needs should be prioritized.
