Sports Hub

Discovery

Customer 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.

Communication Issues

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.

Heuristic Evaluation

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.

Planning

Recommended Architecture

Sitemap

User flows

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.

Implementation

Visual Design

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.

Atomic Design

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.

Atoms

The most basic pieces of the site that contain no value on their own.

Molecules

Composed of atoms, but contain values that are lost without context.

Organisms

Composed of Atoms and Molecules, Organisms are blocks of content that make up a page.

Final Designs

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.

Theme Logic

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.

Light

The light theme is selected when the primary color or secondary color set to white.

Two Color

Selected if neither the primary color or secondary color is white or black.

Dark

The dark theme is selected if the primary color or secondary color is set to black.

Theme Examples

Release & Iteration

Summary

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.