My scope of work
Schematics > Wireframes > Full mobile-first web design
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 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
ITF Tennis v2 sitemap
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
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.
Player profile wireframe
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 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