sam collins

Overview

While on the sports data and gaming team at USA Today, we acquired a new sports data vendor, granting us  access to a vanguard sports data content API. I acted as the lead product designer in this project to direct a team of developers and designers with a mission to re-strategize and redesign USA today's sports data ecosystem around this new and robust dataset; encompassing a state-of-the-art live game experience, odds/betting integration, win probability/fantasy insights, play by play, and more.
‍

Goal

The goal was to create a live sports game, player, and team experience that engaged and retain our existing audience, while ushering in a new demographic of sports fans through search and social channels. We aimed to visualize this new real-time data in a way that was not only competitive with, but superseded, others in the market such as ESPN and CBS Sports. User should be able to receive a comprehensive experience — the "next best thing" if not being able to watch or physically attend a live sports game — utilizing dynamic real-time data and baking in personalization features.

While researching and identifying a number of audience members, we prioritized an app experience for mobile phone live-game-watchers, considering the kind of information users "checking the score of a game" would want to see. This, in turn, would traffic an audience of loyal, returning sports fans to our app to keep up with their teams and consistently expect in-depth features, detailed stats, and engaging data visualization. Needless to say, this project brief had a huge scope and required a design/development solution built for sustained longevity and optimized conditions for growth, reproduction, and success.
‍

Responsibilities

• Authored, scaled, and deployed new design system consisting of refreshed visual identity and UI component library

• Combed through the new data library to locate areas where we could enhance our live experiences
‍
• Met with stakeholders, editorial teams, and sports media teams to align with product strategy, organize focus groups, and assess VQA
‍
• Designed use-cases and edge-cases for all possible conditionals that game, player, or team pages might generate
‍
• Communicated with and lead a team of developers, assisted roadmap, and assigned tasks to other designers

• Contributed to front-end code to get this comprehensive and largely automated series of components shipped to USA Today Sports' audience of 12 million unique monthly visitors

User testing, research, and discovery
‍

Initial steps in the project included examining competitors, auditing USAT's current sports ecosystem, and surveying a focus group on what content they would expect and enjoy to see in a sports-score-digital platform, and where.
 

Low-fidelity wireframes & user flow

With the addition of so much new data, consolidating info more concisely with intuitive user flow and subnavigation was the first step in designing a global and usable sports data platform. ‍This new redesign introduced a tab system with the objective of more appropriately compartmentalizing secondary data and tertiary metadata in summary, game, and player pages. I also created a data architecture which mapped out where certain data types from our vendor would be allocated within this new organization for a solid foundation before diving into high-fidelity mockups.
 

Low-fidelity wireframes & user flow

As the sports data landscape entails such vast amounts of information, this complex design project required a scalable and standardized system of components with iterative variables and states for use in a variety of scenarios. I used the data types within the API to visualize iterative sports modules that could reliably accommodate the dynamic nature of the data. Once finished, our team then had an internal consumer-facing sports component library at our disposal that could handle multiple use cases and extreme edge cases. Every category state was accounted for, considering multiple real-world contexts; football/basketball/baseball/hockey/soccer ... pregame/live game/post game ... pre season/regular season/post season ... and other, more nuanced scenarios.
‍
This stage of the project also ushered in a new design system to be used for multiple in-house design departments, and to be developed for proprietary use on all USAT apps. I designed sleek brand assets and design elements that matched the existing USAT brand identity, but also created a new, familiar, and reliable user experience for sports fans in this new product vertical.
‍
I lead and created the foundation for this new framework within our existing React library, setting the component documentation and design tokens to set the “single source of truth” for developers, get these components as close to code as possible, and make the production release process seamless.
 

Mockups

The mockups shown below are a number of examples of the rolling series of specs that are currently being developed and shipped to USAT Sports' production environment. While we conducted numerous design critiques and workshops to iterate the product, this new sports-data landscape is constantly changing as the global sports data landscape is ever-changing, and our data is provisional. Additional features include:
‍
• Ability to swipe between different game landing pages on native app to browse score details at a higher level rather than having to access games from the main scores page

• With the new designs signifying a visually-focused transition, we used team colors and logos, player images, and other variable design elements within our existing brand guidelines to leverage a "hub" feel for fans of a particular team, and lowered the amount of textual data to make team & player analysis more digestible.
‍
• Personalization features (saving "favorite" teams and players, enabling notifications for game reminders, more refined filtering and search system)
‍
• Easily collapsible modules and recirculation that assumes users know what information they're looking for, but an innate component structure that prioritizes more relevant data first
‍
• Stronger visualization for dynamic live game data and less "textual/analytical"-feeling data tables, so that scores pages could be comparable to a live-watching-experience with real-time insights
‍
• More team color-coding to create "hub" feel for fans hoping to keep up with their favorite teams
‍
• Leveraging AI for game-specific facts and statistics to be able to present users with live-game tidbits
 

Interactive prototypes

From here, I conducted user tests and presented participants with multiple mockup options to differentiate which components engaged users and how. This would allow us to identify our "must haves" and "nice to haves," and create a prototype of the minimum viable product. We were able to take this interactive prototype to stakeholders and VQA teams to be able to show the full functionality and flow of the new sports interface before taking it to code.
‍

Live game module interaction behavior

After the designs were solidified, we began shipping the product on a component-by-component basis. I communicated and worked with developers to ensure the correct usability and behavior, and continued to tweak interaction behavior after the release based on user research and expected functionality.

Results & what's next

Between October and December 2023 we launched over 500,000 player pages and 240,000 team pages to this new ecosystem, as well as countless amounts of generated game pages. The game pages acted as the point of entry to other areas of our sports data product suite. The pages gained traction in search, and we’ve grown from 100,000 monthly views on these player and team pages to around 400,000 monthly views after the release of this product vertical.

As the lead designer, I have owned this product and had my stamp on the full lifecycle of the end-to-end development. The massive sports ecosystem and design library my team and I have created is an ongoing endeavor. I am continuously ideating ways to enhance all aspects of the strategy and visual design, as well as meeting with stakeholders to see how we can improve our sports digital product offerings and continue to deliver an industry-leading user experience to our devoted sports audience.