Tennis Nonprofit Website Redesign

Web Design
Cover image of a tennis nonprofit organization website design

Overview

The founder of a tennis nonprofit organization wanted to upgrade his website to reflect the organization's non profit nature and qualify for Google's Ad grants.

Client: Tennis nonprofit organization founder
Timeline: 2-month redesign
Current stage: under development

Role - UX designer

I rebuilt the information structure and redesigned the website.

The team:

  • 2 UX designers
  • 1 wordpress developer

Process

The process of redesigning a website for a tennis nonprofit organization. The process includes: meeting with founder of the organization, defining style and sitemap, wireframing, low-fidelity prototyping, and hi-fidelity prototyping.

Objectives

Google's Ad grants criteria

Current problems

The current site is a conversion from the founder's personal blog and tennis coaching site. It only meets 3 out of the 11 Google's Ad grants requirements and doesn't have a consistent and distinctive style that resembles a tennis organization.

The document includes screenshots from the original website of the tennis non-profit organization, along with a list of identified problems for each screenshot. These problems are: too many texts and lack of images, only a collage of different content and no user flows, doesn't have a consistent style and design, as well as unclear organization mission and objective.
Design Solution

Clear offerings, nonprofit-like aesthetic, a tennis-inspired vibe

1. Meeting Google's Ad grants criteria as a nonprofit website

  • Restructure navigation to quickly deliver mission, programs, and resources
  • Incorporate essential sections commonly found in nonprofit websites
  • Emphasize clear calls-to-action buttons and simplified steps to enhance user flows
  • Improve transparency and remove sensitive content related to lesson plans
New site map
Site map of a tennis nonprofit organization website
Highlight mission and offerings on the landing page
home page hero section of a tennis nonprofit organization website
(A brief overview of the organization at first glance)
Three UI cards that introducing the programs of "tennis lessons", "free classes", and "school programs"
(Show main programs on homepage)
Break down lengthy content about lessons into a consistent format and simple steps for clear navigation
A page of a tennis website that asks visitors to sign up for an event
(BEFORE: lengthy content)
A page section of a tennis website that guides visitors to sign up for an event
(AFTER: SIgn-up process broken down into simple steps)
Effective call to action and smooth transition between social media platforms and the website
Two UI card design that links to the facebook and zelle donation pages
(Direct all donation- or payment-related actions to the founder's preferred "Donation" portal)
An area of a tennis website footer that encourages visitors to donate today. Some social media icons are displayed.
(Provide links to social media platforms with CTA for donate or contact in footer and across pages whenever a program or mission is introduced)

2. Style-related decision

I want to highlight the organization's professionalism while maintaining a warm and personal feel to resonate with families and young adults.

Original homepage lacks consistency and characters.
The homepage of LoveSetMatch tennis organization website
(Before)
New homepage conveys energy and joy.
a homepage design of a tennis nonprofit website

(After)

Theme colors include vibrant orange of clay courts balanced with a vintage tone, green color of traditional courts, and yellow of a tennis ball as the attention grabber.
Color palette of a tennis website design. It uses reddish clay and green colors as the primary colors
Tennis grass courtA tennis ball bouncing from a clay courtTennis clay court
New homepage conveys energy and joy.
a homepage design of a tennis nonprofit website
(After)
Use symbols of tennis related items such as the tennis ball, the score board, and court lines as decoration
The decorations of a tennis nonprofit's about page use a tennis ball and the scoreboard as inspiration
(Section of About page)
Apply tennis symbols to icons, CTA design, and content
A collection of design elements that uses tennis-related symbols
Use micro-Interactions to engage users

Impact

The new Wordpess website complies with Google Ad Grant eligibility requirements and conveys the tone of a tennis nonprofit organization.

Initial Assessment

Key elements of nonprofit websites
The graph lists the key content to include in the new tennis nonprofit website in order to improve user experience.
Good Practices of other nonprofit websites
Screenshot examples of good practice of nonprofit website design

User goals

As tennis lovers...

  • They are curious about the organization's mission and programs. Does it offer training and lessons? Is it a resource hub for tennis facts? Or is it an organization that provides funding and support for professional tennis careers?
  • They want to find ways to participate in tennis events. They want to know the types of events (lesson-based or tournaments), as well as the location, price, and ways to follow up.
  • They are looking for ways to book a private lesson or group class.

As third-party organizations and companies…

  • Volunteers and tennis professionals are looking for ways to become coaches or get involved.
  • Partners are looking for ways to connect with coaches, start an after-school tennis program or launch an event.

As random visitors who land on the website, they might be...

  • Podcast listeners who find the podcast intriguing and want to explore more about the organization. 
  • Individuals who are searching for tennis events within their community and stumble upon the organization's offerings.
  • Users who are directed from social media platforms to the website.
  • Users who search for tennis-related keywords and discover the organization.

Want to work together?

If you like what you see and want to work together, get in touch!

A design guideline for building child friendly residential buildings The clickable cover of a child-friendly residential building ux research project

Child-friendly Residential Buildings

Client: A Chinese property development company
UX RESEARCH
Tennis nonprofit organization websiteThe clickable cover of a tennis nonprofit website design

Tennis Website

Client: LoveSetMatch tennis nonprofit organization
WEB DESIGN
Life documentation app The clickable cover of the Moment App project

Moment App

A personal passion project
UI DESIGN
University Student App
Task management app  
UI DESIGN