Client: Varsity News Network
Role: UX Design
Problem: Low customer engagement, high bounce rates.
Solution: Create a new platform for VNN’s partners that fix usability issues, adds mobile support, and streamline content creation.
Discovery & Research
The research was split between design and product management. We started by interviewing VNN’s partner athletic directors, and worked our way through their network of parents, staff, and coaches.
Athletic Directors would often mention their difficulty communicating seasonal scheduling changes with their communities. Coaches and staff were also suffering from similar issues, as well as the inability to contribute their team’s content to the school’s history.
The original suffered from long load times, unintuitive navigation, and lack of mobile support. Combination of these issues left many users getting lost, or only engaging with one piece of VNN’s suite of products.
We identified existing issues with the product’s structure before addressing any usability concerns.
Wireframes & Prototype
To address the usability issues, we built a prototype for testing that lead us to some incorrect solutions in our initial designs. During user research, we learned that some of our users only concern were a few teams per site. Our initial plan was to add features allowing users to follow and filter content by teams. Our usability tests revealed that users still preferred the existing product’s route to team content. The real issue was team content filtering was happening in the wrong place. Filtering was happening by ‘program’ when it needed to happen within the navigation, to a ‘team’ specific portion of the site.
After testing the prototype, it was time to create the visuals to be used for Sports Hub. We needed flexible theming options for VNN’s partners, but the product still called for a solid foundation for the visual rules to avoid usability issues.
To make sure the project remained consistent throughout our product iterations, I created visual design documentation for the theme styles to help both existing and future product team members as they build upon the product. These rules borrow heavily from more established design languages, like Google’s material design and atomic design methodology.
The most basic pieces of the site that contain no value on their own.
Composed of atoms, but contain values that are lost without context.
Composed of Atoms and Molecules, Organisms are blocks of content that make up a page.
Capturing 1700+ Unique Brands
Maintaining the integrity of the school’s branding, while using a single ruleset for the product turned out to be incredibly difficult. Accessibility was a goal for Sports Hub, but all the schools had such different color palettes to work with. The original product had the luxury of being built manually as schools partnered with VNN, however for Sports Hub we had to worry about a combination of migrating the existing partners to the new platform, as well as adding new ones.
Not every palette would be able to use the exact same ruleset, but I discovered that every school could fall into one of three basic types. During the setup of the site, new Athletic Directors would select their school colors and existing users would have their current colors pulled from our database. From there we could determine what ruleset would best accompany their selections.
The light theme is selected when the primary color or secondary color set to white.
Selected if neither the primary color or secondary color is white or black.
The dark theme is selected if the primary color or secondary color is set to black.
Release & Iteration
After the visual design had been completed and tested, Sports Hub was released for a beta period before the content migration allowing user acceptance testing on an actual product. The release of the product sparked sales in regions the company hasn’t been able to access before. Customer feedback has lead us to further discovery around their accessibility and localization needs, but the product is still actively being developed as VNN’s customer base grows. Shortly after the first release of the beta, we aggressively planned feature sets for the 2.1 release to come before migration.