USA Today's live sports ecosystem
LEAD PRODUCT DESIGN
PRODUCT DEVELOPMENT
DATA VISUALIZATION
DATA ENGINEERING
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, directing a team of developers and designers with the mission to re-strategize and redesign USA today's sports data ecosystem. This new and robust dataset would encompass a state-of-the-art live game experience, 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 retained 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. Users should be able to receive a comprehensive experience with speedy updates — the "next best thing" if not being able to watch or physically attend a live sports game.
Responsibilities
• 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 engineers, 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 on a sports data platform, and where.
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 scalability. I needed to create an environment that optimized conditions of growth, sustainability, and reproduction.
Low-fidelity wireframes & user flow
With the ingestion of so much rich data, consolidating info more concisely with a clear flow and sub-navigation was the first step in designing a globally intuitive sports data platform. This redesign introduced a tab system with the objective of more appropriately compartmentalizing secondary data and metadata in summary, game, and player pages.
Component library
As the sports data landscape entails a vast amounts of information, this complex design project required a standardized system of components states for use in all scenarios. I used the data types within the API to visualize iterative sports modules that could reliably accommodate the dynamic nature of the data. 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.
Another consideration was designing with real data in mind. During low fidelity wireframing, lorem ipsum is my go-to, but when it comes to finalizing components and screens, I try to insert real data values where possible. This minimizes the risk of running into difficult “what if” roadblocks at a later date: What if team names wrap? What if a game is delayed? What if our API doesn't return team logos?
Using data instead of placeholders allowed me to address these real world scenarios and edge cases in the designs early on. I communicated with our engineers to ensure these new data components fit within our existing React library.
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 I 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.
Before:
After:
The new designs signified a visually intuitive and sleek transition from a previously data-heavy interface. I utilized team colors, logos, player images, and other design elements within our existing brand guidelines. I also authored some key design motifs that were present throughout the UX: team data hubs, "eyebrow" gradient accents above scores for fast team recognition, and lowering the amount of string data to make live game analysis more digestible.
.png)
.png)
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 took this interactive prototype to stakeholders and VQA teams to to show the full functionality and flow of the new sports interface, ideate new features, enhancements, and eventually take it to code.
Live game module interaction behavior
After the designs were solidified, we began shipping the product on a component-by-component basis. For UI animations, I created UI components in Play that our developers could easily inspect and export into the SwiftUI iOS framework. Play is compatible with Figma and allowed for more fine-tuned and dynamic interactions.
Communicating with developers to ensure the correct usability, I continued to tweak interaction behavior after the release to maximize engagement based on user tests.
Super Bowl 58 win probability
Play by play game action module
NBA shot chart module
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 800,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.