Hercules – a design system for sports fanatics
DESIGN SYSTEMS / UI
ART DIRECTION
LEAD PRODUCT DESIGN
PRODUCT DEVELOPMENT
Overview
While leading the design efforts for USA Today's sports and gaming product suite, our stakeholders introduced an ambitious new vision for sports coverage. USA Today has traditionally catered to a diverse range of sports markets, from major league teams to smaller market teams and college athletics. Our goal was to build a product that focused on this advantage by enhancing the personal fandom experience for individual users as they consumed their sports news and updates — encompass things like betting and personalization. This new product would be a subscription based model to offer premium content to our biggest sports fans, called USA Today Sports +. The aim of Sports + was to make the fan experience the cornerstone of our global and prolific sports news distribution. I was entrusted with creating the design system, nicknamed Hercules, including the accompanying brand voice, system guidelines, and UI elements.
Goal
Use systems-thinking to create a community-driven source of truth that allowed teams working on this large scale project to manage design at scale by reducing redundancy and encouraging visual consistency across different pages and platforms.
Responsibilities
• Authored, scaled, and deployed new design system consisting of refreshed brand identity and UI component library
• Ensured research and accessibility was baked into the visual identity to set a strong and reliable visual foundation for the product
Proccess
Hercules had to scale fast as the team discovered new use cases, so I had to approach this challenge strategically and constantly rethink / expand the design library in Figma. Working with Head of Product and front-end engineers, I established a set of short term and long term priorities. Rapid scalability and modularity were key as we worked towards a tight deadline for the launch of the MVP. In practice, this often meant favoring reusable components where possible.
Guidelines and components
Below is a snapshot of the design system documentation set through these foundational components. Hercules provided tools and reusable patterns to create a consistent branded user-centered experience across all Sports+ product teams and platforms based off a common set of principles.
One of the first tasks was deciding on the typography and the color palette. I presented a few options to leadership, aiming to encapsulate a dynamic, impactful brand synonymous with sports fandom, while also taking into account the curious and delicate state of mind of the end user. It was important for the platform's design language to not only be fully accessible but present clear iconography and illustrations that showed the personalized nature of our platform. Here, I was able to work with engineers to create a set of semantic style tokens and key breakpoints that were easily transferrable to the codebase through Tailwind CSS.
The next step was getting started on a ever-evolving set of components, guided by the Atomic Design methodology. Working with developers, we made sure that naming conventions and component organization work for both sides: the design system was reflected in Storybook and this collaborative approach made the process more streamlined.
I proceeded to set up the foundations and specs of a series of component templates. Following the dashboard's best practices, I explored a few approaches to information architecture, navigation and card options.
Another important aspect of this design system was to set a series of documentation to help others on the team and encourage a scalable and collaborative source of truth to build this robust product around.
Applications
Below are elements of the Hercules design system across the native app's UI.
Results
In under half a year since starting my role at USA Today, I completed the redesign of the tool in time for the MVP launch.
The design system played a key role in ensuring a successful launch: providing a cohesive look and feel for the brand gave product owners and other team members a structure and a set of principles to return to when making decisions on sometimes conflicting requests from the wider team.