Building a Backoffice Design System
Client / Employer
theScore & ESPN BET
Role
Lead Product Designer
Industry
Sports Betting & CRM
Date
June 2022
Project Approach
We began by collaborating with designers, developers, technical product managers, QA analysts, and stakeholders to outline project goals. Recognizing the need for a shift from scale-based to utility-based classes, we conducted in-depth analysis and internal workshops to refine the design language and components. This concluded in us setting clear success metrics for the project.
Solution Overview
After studying industry trends and best practices, we decided to leverage design tokens through Figma variables and Tailwind CSS for its ease of use. This decision was reinforced by Tailwind's utility-first philosophy, aligning with our goal of consistency and scalability. We developed a design language and color system, establishing utility-based tokens for text and color, and core components consistent with Tailwind CSS's approach.
Implementation
Our approach included crafting light and dark theme counterparts using Tailwind CSS primitives. We actively collaborated with a dedicated development team to create proof of concepts for reusable components using the Phoenix framework. Simultaneously, we worked with a UX writer to standardize copy and messaging for enhanced user understanding.
Outcomes
With the launch of color tokens and ongoing implementation of the UI Library, we have already observed efficiency gains, reduced inconsistencies, and improved UI development speed. Our efforts are aimed at streamlining the development of theScore's proprietary Backoffice platforms while ensuring a cohesive design language for its users.
Conclusion
Through meticulous planning, collaboration, and leveraging industry best practices, we have successfully laid the foundation for a robust Backoffice Design System. Moving forward, we remain committed to refining and expanding our system to meet evolving user needs and maintain design consistency across theScore's platforms.