ITF Tennis

Enable fans, coaches and players to enjoy tennis on the go

Client

ITF Tennis

Duration

9 months

Live project

View

Source files

.sketch

My scope of work

Schematics > Wireframes > Full mobile-first web design

My role

In 2019 I joined as a freelance UX/UI Designer to completely redesign the old ITF website which had held on for almost 15 years. Starting from scratch, I simplified everything and optimised for mobile devices.

The website

Audience

Fans, coaches and players

Insight

People want tennis on the go

Output

Responsive website

CMS

Umbraco

The problem

The ITF already had a website but it was feeling the test of time after 15 years. It wasn't responsive, the content had outgrown the UX and the separate mobile website could only contain tournament calendars.

Fans, coaches and players wanted their tennis everywhere, on the go and at their fingertips.

It was time for a full redesign to bring the International Tennis Federation into the 21st century.

Old ITF Tennis website

The solution

A place where content can thrive

The old website did provide users with data, but only after a click or a scroll too many. It was wrong for so long that people were used to the worst layout and pathways to get where they needed to go.

Due to the lack of scalability, it was impossible to tell the full story of how the ITF operates on the old system without turning to an external URL. This made it even more important to start from scratch.

Based on user feedback surveys received prior to my start date and requirements set by internal stakeholders, I proposed a new sitemap where all the data and content was accessible from just 2 clicks from anywhere else.

Download sitemap .pdf

ITF Tennis v2 sitemap

Wireframes

All of the key page templates in the sitemap needed to be wireframed mobile first. Ranging from news articles to player profiles, tournament calendars to rankings and so much more. This website needed to be super responsive and adaptable to whatever the users and internal stakeholders threw at it.

News post wireframe

Constraints

The new design needed to function based on content which already existed on the servers, as well as new content which would be generated such as player profile pics, scores, match stats, draw sheets and round robins. Content all the way down to resources and tennis tech, forms, image libraries and video players.

It was a huge package of bespoke components and functional requirements which all needed to be signed off by the client before being designed.

Rankings wireframe

Player profile wireframe

Global elements

Once some wireframes were signed off, I took elements from the brand guidelines and converted them into accents, buttons, links, menus, and spacing. It was a playful process by which the ribbon gave a nod to the brand, while the green was recognisable and positioned perfectly against the grey and white, keeping it clean and neutral.

I eventually arrived at a full UI kit of all components including spacing rules and a full overview of what was to be built and how.

Website global elements kit

Website global components and spacing kit

Draw sheets

Draw sheets for both knockouts and round robins were completely reimagined. Previously, crude lines with flags and meta peppered the screen and a long horizontal scroll was the only way to navigate the sheet.

Now, all draw sheets could be navigated by swiping on a mobile device or by using the pagers on desktop. Draw sheet columns now collapse automatically. No other draw sheet on any other sports site offers this level of flexibility.

Try draw sheets

All new draw sheet design

Fully responsive draw sheets

Head 2 Head

The ability to compare two players is incredibly useful for players, fans and coaches alike. We added functionality to go head to head from any player profile and to dynamically update the players either side from within the same page. Now all working across all device widths of course.

Try H2H

All new H2H design

Tour branding and hero imagery

Another important task was to create hero imagery for each tour which would give a fresh new look to each tour above the fold but will also enhance the brand awareness of each tour upon launch through social media marketing and PR.

Pushing brand guidelines to breaking point, I took some of the best photography and enhanced them for each tour which required the refresh and created these standalone pieces which could be converted and cropped to any dimension for many uses.

All new draw sheet design

The future for the ITF

What's next?

I left the ITF to hike the Pacific Crest Trail before the pandemic gripped the planet. But since then they've been using the website to its full potential with huge updates to the Growing the Game and news sections, while all the data side of things has been ticking over dynamically in real time for all current and upcoming matches, tours and tournaments.

View it live

Next project:

Work with me, baby!

Get in touch

(+44) 07934014543