ATP Design System

I collaborated with a leading global Sports association to establish a cohesive overarching design system. I led the UI and UX in close coordination with the Director of Mobile and web Technologies and developers to craft a distinctive digital ecosystem, transforming it into reusable products.

Problem

A pressing challenge ATP faces is the lack of a unified design approach across its digital products. Inconsistencies in appearance and functionality often arise, hindering brand cohesion. This issue extends to collaboration hurdles between diverse tech, brand, and content creation teams. Consequently, there is a significant drain on resources due to duplicated design efforts and prolonged development cycles.

Goal

Establish a comprehensive design system to enhance the efficiency and consistency of ATP's digital products. The project aims to create a unified and scalable design framework by collaborating with key stakeholders throughout the business, from tech, data, brand and commercial to content. The design system will streamline component inventory, delivery time, maintenance and updates, prioritising design consistency, user experience, accessibility, and adaptability to various ATP platforms.

Deliverables

Component and pattern UX research
UI Inventory
UX Audit
UI design
QA of implementation
Style Guide
Core Design System & Nested Design Systems

Above: Modules form a flexible page layout.

Final result

I created the foundation of a core white-label design system from the ground up and implemented the ATP brands and sub-brands into their nested design systems. This included design tokens, a component library, modularity, platform agnosticism, collaborative tools, automated workflows, and consistent naming conventions. These elements worked together to establish a systematic and efficient approach to design, ensuring consistency, scalability, and collaborative cohesion across diverse projects and teams.

Above: Displaying data was crucial to project success.

Above: Reusable components improved performance.

Lessons learnt

One of the biggest challenges was building a design system(s) while ensuring the legacy technological setup of the existing ATP site. The process was like building a plane while in flight, posing multiple challenges in time management, consistency, and avoiding scope creep. Balancing resource allocation, efficiently integrating user and stakeholder feedback, and addressing communication gaps helped relieve bottlenecking.

Next steps

To navigate these challenges successfully into the future, clear project planning, effective communication, and a phased approach that allows for iterative improvements are essential. Prioritising tasks and understanding the dependencies between the design and legacy systems can help mitigate potential complications. Still, ultimately, creating a dedicated team to manage, strategise, and execute the move towards a design system will be crucial for success.

Tokenisation and style guide

Later in the project, we moved from a style guide to a token system to ensure complete consistency across different modes.