Creating Formation: FanDuel's Centralised Design System

Overview & Context

Achieving long-term success in business is a challenge—only 25% of companies make it past their 15th year, according to the Bureau of Labor Statistics (BLS). FanDuel, a leading name in the sports gambling sector, is one of the few that has reached this milestone. However, the journey hasn’t been without its challenges. With limited resources in terms of time, budget, and staffing, FanDuel’s processes had begun to deviate from industry norms.One major challenge lay in the disjointed implementation of FanDuel’s range of products. Each product was developed by different teams, with each team maintaining its own design system. This siloed approach resulted in inconsistent user experiences, redundant development efforts, and a higher learning curve for users navigating between products. It also increased both costs and development time.To address these issues, FanDuel partnered with CreateFuture to develop a centralised design system. The goal was to enable teams to build products with consistency, reducing duplication and improving the overall user experience across FanDuel’s offerings.

‍

My Role

As a key member of the design team, I took on responsibilities throughout the entire design process, with a particular focus on the Define, Discover, and Deliver phases of the Double Diamond framework. My tasks included designing new components in Figma, leading review workshops, and producing detailed specifications to guide engineers in development. Additionally, I was actively involved in quality assurance (QA), ensuring that the components were implemented as intended and met the required design standards.

‍

Atomic Design: Laying the Foundation

We adopted an atomic design approach to build the system, beginning with the most fundamental elements—colours, typography, and sizing properties (border lengths, radius, and type scaling). Recognising the need for flexibility, particularly for FanDuel’s Whitelabel products, we introduced tokenisation. This allowed us to maintain unique branding while ensuring consistency across all of FanDuel’s products.

Define & Discover

Standardising Across Products

CreateFuture’s involvement began with an audit of all existing FanDuel design systems. We catalogued every component in use and identified opportunities for standardisation. From this audit, we distilled 30 core components essential for the initial release of the design system. These included core UI elements such as buttons, text fields, select menus, notifications, and layout components like cards and accordions.In designing these components, we referred back to the audit to understand how different teams used them. This thorough understanding allowed us to create flexible components while maintaining a unified design language.

Driving Efficiency with Figma Properties

One of the key inefficiencies we identified was that designers often made changes to individual layers rather than utilising Figma’s Properties feature. This required engineers to make unnecessary code-level adjustments, slowing down the process. By designing components with Properties in mind, we ensured that changes could be made quickly and efficiently without altering the underlying code.Stakeholder Reviews:

A Structured Approach to Feedback

Once components were ready for review, I introduced a structured workshop process to manage stakeholder feedback effectively. Having encountered issues with chaotic feedback in previous projects, I developed a template for review sessions. This allowed designers to present their components, showcase real-world use cases, and explain key design decisions. Stakeholders were then given time to provide feedback in four categories: Red Flags, Technical Comments, Usability Questions, and Other Concerns.This structured approach ensured that all feedback was considered, while avoiding the common pitfall of “design by committee”, thereby maintaining quality and efficiency.

Comprehensive Documentation & Quality Assurance

After finalising components, I was responsible for creating comprehensive documentation that detailed each component’s structure, variants, functionality, and accessibility standards (including WAI-ARIA attributes). These documents served as a reliable reference for developers and testers, ensuring consistency throughout the development process.During QA, I worked closely with engineers to verify that the components matched the specifications. Any discrepancies were addressed either immediately or scheduled for future updates, ensuring that the final product was both functionally robust and visually consistent.

Seamless Integration & Rollout

Following the successful development of the core components, our next step was to integrate the design system into FanDuel’s product lines. Initially, we experimented with Figma’s library-swapping feature but encountered inconsistencies that risked fragmenting the design experience. To avoid this, we provided teams with comprehensive guides for manually swapping components, ensuring a smooth and consistent transition.

‍

From an engineering perspective, the design system was distributed via a package on GitHub, making it easily accessible. We worked closely with early adopters to identify functional gaps and provided ongoing support to ensure seamless integration across the organisation.

Overcoming Challenges & Measuring Success

As with any large-scale rollout, there was some initial resistance, mainly concerns about reduced creative freedom and a steep learning curve. To address these concerns, we ran workshops to demonstrate how the design system could enhance creativity by eliminating repetitive tasks and freeing up time for more innovative work.We measured the success of the rollout through quantifiable metrics, with time savings being a key indicator. The design system reduced the time required to implement complex design patterns by 80%, greatly increasing efficiency and productivity across the engineering teams.

Closing Statement

The creation and rollout of FanDuel’s centralised design system, Formation, was not without its challenges, but it has proven to be a transformative asset for the company. By unifying our products under a cohesive design language and streamlining development processes, we achieved significant efficiency gains and improved user experiences across the board. This success is a testament to the power of collaboration, strategic planning, and the importance of a well-executed design system in driving business growth.To further ensure the design system’s longevity and ease of use, I also played a key role in creating a comprehensive reference site for Formation—an initiative covered in the next case study. This reference site served as a one-stop resource for teams across FanDuel, offering guidance on implementing and maintaining consistency throughout the product suite.