2023
NFHS Network
nfhsnetwork.com
Background & Challenge
When I joined the NFHS Network team, the website faced significant challenges that affected user experience and the overall brand perception. The design lacked a cohesive, established design system, and there was a noticeable gap between the brand’s mission and how it was reflected visually. At the time, the platform had a very generic, dark blue color scheme with poorly executed event cards. The imagery was outdated, and it didn’t convey the energy or excitement associated with sports streaming platforms. It was clear that the website wasn’t positioned to compete with other industry leaders like ESPN or Fox Sports.
The challenge was not only aesthetic—there was a need to create a design system from scratch that could guide future work and enhance collaboration across the product team. Additionally, the site was difficult to navigate, lacked consistency, and didn’t give the user the sense of “action” and engagement expected from a platform focused on live sports streaming.
Collaboration
This project was truly a team effort. I worked closely with:
Project Manager (Derek): Managed timelines, cross-team communication, and ensured alignment across all stakeholders.
Lead Engineer (Matt): Helped translate design into development, identifying technical constraints and proposing solutions.
Front-End Engineer (Sam): Worked hand-in-hand with me on design implementation, making sure our vision came to life in code.
Senior Product Designer (Jack): Provided feedback and mentorship throughout the design process, ensuring the design aligned with the broader vision for the product.
The Approach for NFHS Network
Our goal was to reimagine the website to reflect the energy of high school sports while improving usability and establishing a design system that could evolve with the product. The approach combined user-centered design with an iterative, collaborative process that included input from the entire product team.
User Research & Pain Point Analysis:
We conducted interviews and surveys with our core audience—coaches, parents, and students—using the research tool Maze, to understand the challenges they faced on the platform and identify key features that could improve their experience.Design Vision Prototype:
I developed an initial vision prototype that reimagined the platform with a dark theme (commonly used by other streaming services) and enhanced imagery on event cards. This prototype introduced key features such as "clipping plays" and used sports-specific language to connect with our target audience. Although we faced technical constraints, we collaborated with the Product Managers and Developers to identify a path forward to bring this vision to life.Design System Creation:
We introduced the Carbon Design System as the foundation for the website’s design system. Over time, we tailored it to fit the NFHS Network’s needs. We introduced a fresh color palette and refined typography—switching from Montserrat to Roboto for readability and Sofia Sans Condensed for metadata.Improved User Features:
A standout feature that we added was the ability for users to favorite teams. This change addressed the fact that many users visited the site specifically to watch a particular event, such as those featuring a family member. By implementing this, we significantly improved usability and navigation.
Results and Impact
The redesigned website was a significant improvement, both in terms of usability and brand representation. Some of the key impacts included:
Increased Engagement: Users spent more time on the site, as the dark theme and modern design gave it the feeling of a true sports streaming platform.
Improved Navigation: The Favorite Teams feature, along with the updated event card design, allowed users to more easily find and engage with content they cared about, which improved overall user experience.
Scalability: The new design system helped streamline the process of creating new features and components across the platform. The use of Storybook for collaboration also enabled the development team to work faster and more efficiently.
Brand Cohesion: The revamped design captured the energy and excitement of high school sports, making the platform more engaging and visually aligned with other major streaming platforms like ESPN or Fox Sports.
While we didn’t have specific metrics on hand to measure the success of the redesign (though user feedback has been overwhelmingly positive), we continued iterating on the platform’s features, including further improving navigation, personalization, and search capabilities. We also began working on bringing design consistency across other PlayOn platforms, like Gofan and VNN School Sites, by sharing components like the event card design.
