Play Tennis

DESIGN SYSTEM / MOTION DESIGN

Re-designing the Play Tennis site involved creating a new design system. Colours, fonts and imagery were changed and curated for the new Play Tennis website. This involved working with Play Tennis brand guidelines whilst making sure the site remained AAA accessible.


During the rebrand process, I was also able to create a number of digital assets with fun tennis-y animations for launch.

THE CHALLENGE

Outdated Design: The existing Play Tennis website lacked visual appeal and did not align with the updated brand identity.

No Design System
: There was no centralised design system, leading to inconsistencies across pages.

Accessibility Standards: The site needed to meet AAA accessibility requirements to ensure inclusivity for all users.

Limited Engagement: The lack of dynamic elements made the site feel static and less engaging.

THE SOLUTION

We reimagined the Play Tennis site with a modern design system, refreshed branding, and dynamic digital assets to create a consistent, accessible, and engaging user experience.

THE BENEFITS

Enhanced Brand Alignment: The refreshed design fully reflects Play Tennis’s brand identity while adhering to accessibility standards.

Improved Consistency: The newly developed design system ensures uniformity across pages and future updates.

Accessibility Compliance: Meeting AAA accessibility standards makes the site inclusive for all users.

Scalability: A documented design system allows for easy updates and future expansions.

THE APPROACH

Re-Designing the Site Structure: Audited the existing site to identify areas for layout, usability, and visual design improvement.

Creating a New Design System:

  • Colors: Curated a vibrant palette that aligns with Play Tennis brand guidelines and meets AAA accessibility standards.

  • Typography: Standardised fonts for consistent use across headings, body text, and UI elements.

  • Imagery: Introduced dynamic, curated visuals to capture the energy and excitement of tennis.

Accessibility Compliance: Ensured all design decisions—such as color contrast, text hierarchy, and layout—met AAA accessibility requirements.

Documenting the System: Developed a comprehensive design system, including:

  • Components: Standardized buttons, cards, and navigation elements for easy reuse.

  • Guidelines: Instructions for using fonts, colors, animations, and imagery.

Launch Support: Collaborated with the development team to implement the new designs seamlessly.

Play Tennis social post 1
Play Tennis social post 2
Play Tennis social post 3
Play Tennis social post 4

THE OUTCOME

A visually appealing and cohesive website that reflects Play Tennis’s refreshed brand identity.

Enhanced user experience through accessible, vibrant, and functional design.

Increased engagement thanks to playful animations and dynamic digital assets.

Long-term scalability with a documented design system for future updates and campaigns.

Positive feedback from users, reinforcing the success of the redesign and rebrand efforts.