ATP Website

I spearheaded the ‘built in-flight’ redesign of the ATP website, taking charge of both UI and UX processes. Collaborating closely with the Director of Mobile and Web Technologies and developers, I utilised Figma to create a unique modular live scores platform and design system tailored for tennis enthusiasts.

 
 

I created colour tokens to represent the website in light and dark modes.

 
 

7%

increase in page views (93million)

15%

increase in total users

-10%

Decrease in bounce rate

 

Goals

This redesign aims to refresh the ATP website and introduce a dynamic, more cohesive, frictionless live scores user experience, setting the stage for sustained growth, elevated fan satisfaction, a coherent brand online presence and an embed the ATP as a global No. 1 leader for Tennis-associated content.

 
 

1) Performance Boost:

    • Enhance speed and responsiveness through design and codebase optimisation.

    • Simplify page loading for a more seamless user experience.

    • Ensure UI and UX align with legacy technology system.

2) Design System Integration:

    • Develop a modular component library for UI and UX consistency.

    • Implement a comprehensive design system for brand cohesion.

    • Facilitate collaboration and scalability in designing and developing the ATP product catalogue through the use of Figma.

3) Live Scores Integration:

    • Incorporate real-time live scores to provide up-to-the-minute match updates.

    • Enhance user engagement with dynamic and interactive data-led content.

4) Commercial opportunites:

  • Ensure commercial needs are met and future-proof redesign with embedded commercial opportunities.

Final result

First, we built a custom new mobile-first website platform, including an upgraded live score integration, data-driven stats and a slick front-end UX within the framework of the legacy systems. These elements were embedded within a comprehensive tokenised design system, creating light and dark modes within a reduced UI library for much-improved consistency and performance with page load speed.

Also, to help the ATP monetise, we built in programmatic ad inventory and bespoke sponsorship space, from section promotions to logo placements.

Deliverables

  • Component and pattern UX research

  • UI Inventory

  • UX Audit

  • UI design

  • QA of implementation

  • Design Systems

  • Website (Phase 1 & 2)

 
 

Lessons learnt

Reflecting on the project, valuable lessons have surfaced in the following areas:

1) Stakeholder expectation management:

The phased design approach ensured a case of expectation management as concessions needed to be made throughout the project. Emphasising clear communication channels, actively involving stakeholders in decision-making processes, and establishing realistic project milestones emerged as essential practices to foster collaboration and meet collective expectations.

2) Website legacy issues and UI/UX decision-making:

The presence of website legacy issues introduced nuanced challenges in UI and UX decision-making. Lessons were garnered on the significance of early identification and proactive resolution of these legacy complexities to streamline the design process.

3) Commercial Partners' Constraints on UI and UX:

Engaging with commercial partners revealed insightful lessons about balancing innovative design aspirations with practical constraints. Negotiating the intricacies of commercial partnerships necessitated strategic decision-making to ensure that UI and UX enhancements aligned with both creative objectives and the pragmatic considerations of commercial stakeholders.

These lessons underscore the importance of adaptability, early issue recognition, and strategic decision-making in successfully addressing challenges related to stakeholder management, legacy issues, and commercial constraints within UI and UX design.

 

Next steps

Moving forward, the next steps for the website involve a focused approach to elevate the user experience (UX) in the upcoming phase of the project. This includes a comprehensive strategy to:

1) Upgrade UX in the next project phase:

A dedicated effort will be made to enhance the overall user experience by incorporating user-centric design principles, refining navigation, and optimising key touchpoints. This upgrade aligns with our commitment to delivering fans an intuitive and enjoyable online experience.

2) Build, test, and iterate on specific problem areas:

Identification of specific problem areas will be followed by a systematic process of building, testing, and iterative refinement. This approach ensures a targeted and data-driven resolution to challenges, fostering continuous improvement and aligning the platform more closely with user needs and expectations.

3) A/B testing on specific components:

To optimise specific components and features, A/B testing will be implemented. This data-driven testing methodology allows for a nuanced understanding of user preferences, enabling informed decisions on design elements and functionalities. Through A/B testing, we can aim to refine and fine-tune the user experience based on real-time user feedback and behaviour.

4) Improved relationship with commercial partners:

Strengthening our collaboration with commercial partners is a priority to ensure that UX and UI improvements align with broader business objectives. Open communication channels, regular updates, and collaborative discussions will be fostered to integrate commercial considerations seamlessly with design enhancements, promoting a symbiotic relationship that benefits both the user experience and business goals.

Previous

ATP Design System
Next

ATP White-Label Tournament Platform