Fanatics Sportsbook
I relaunched outdated design libraries, improved processes and rallied teams around shared fundamentals to improve the visual design of the Fanatics Sportsbook App and drive alignment across Fanatics enterprise verticals.
Death by a thousand cuts
Even small teams can benefit from design systems when used as a tool rather than prescriptive design. The design team on the Fanatics Sportsbook functioned with a startup mentality, designing to product parity first with little time to think about the larger experience. Previous attempts as systemization had seen little adoption due to the extremely fast turn around and lack of team transparency. The left hand wasn't talking to the right.
It was also unclear what processes were in place to maintain and ensure system quality and contribution. The accumulated debt meant design systems weren't understood or relied upon slowly leading to an experience that was disjointed, difficult to update from both an engineering and design perspective and didn't leverage the overall Fanatics experience.
Starting with the fundamentals
Designers weren't speaking the same language as each other, as engineer or as the brand. I defined and documented shared fundamental values such as color scales, type ramps sizing and grids. Not only were designers using different colors, type styles and design atoms they were not even from the same libraries or had been detached long ago.
Setting up a shared fundamentals design library with clear definitions, guidelines and streamlining the Figma experience was the foundation for design system knowledge to come.
Thinking big
In an effort to expand design system thinking to the larger Fanatics user experience, I worked with design teams from multiple verticals to document and align similar design patterns. I conducted workshops to understand design needs between products as well as platforms from mobile to web.
What emerged was new ways of architecting Figma and design organization, increased craft and design systems know-how for component creation, and a more collaborative design practice across verticals.
Minding the details
Conducting these workshops allowed for a more resilient set of core components to be created collaboratively. In addition, I architected and lead implementation of design tokens for semantic color across multiple products. These variable tokens allowed for more clear communication, less error and variance in design as well as less time thinking about color, accessibility, prospective light mode concerns and more time solving problems.
Applying systems to more than just core components
Using shared values and design libraries allowed for better collaboration and communication between marketing and design as well. Encouraging marketing creative teams to take ownership of and contribute to design libraries allowed for the acceleration of in-product promotional design by utilizing Figma automation plugins to generate pre-designed assets based on a number of variants and variables. These improvements sped up the time to market for promotions considerably and reduced the reliance on the design team.
Shared responsibility
Design systems from small to large are a shared responsibility. Teaching cross-functional team members about the value and utilization of design systems is essential to success. By sharing the responsibility of adopting and using design system components and thinking, I helped turn the larger design team into design system champions.
I created gamified experience to uptake design changes, communicate releases and problems as well as help with contribution. With custom dashboards I was also able to utilize Figma's analytics API to monitor progress and address problem areas strategically.
Â