Tennis club website as the central source of updates

Overview

I was contracted to create a custom made website for the Maputo Tennis Club, the oldest and only tennis club in Mozambique. The club has six tennis courts, a restaurant, bar, audience seating, and is surrounded by a botanical garden. At the club people can become members or rent courts, and there are many tennis tournaments hosted in the premises throughout the year. The website’s purpose was to solve many of the club’s marketing and communication problems with its members and lovers of Mozambican tennis, living in Mozambique and overseas.

My role

I was the sole designer and developer of the website from end to end. I supervised a professional photographer, Jens Doerre, over sessions of sports and drone photography for the website. I also wrote about half of the copy. I was constantly in touch with a few board members throughout the project. Before delivering the final product I conducted a workshop to train the front desk staff to manage the website.

The problem

The Maputo Tennis Club did not have an effective and modernized communication structure. In February 2022 it had only a Facebook account, with 924 subscribers, where updates are made and promotional content was disseminated. This had the following disadvantages:

The club had other communication and marketing problems with its members and lovers of Mozambican tennis in general. I created a questionnaire to understand the members’ perception of the club’s communication and marketing. The questionnaire had a combination of multiple choice questions, single select questions, and open ended questions. For the multiple choice questions these were some of the responses:

How do you obtain information about tournaments and other events that take place in the tennis club?

The majority, 16 out of 26 respondents obtain information from WhatsApp groups, which isn’t a very efficient means as groups are notorious for being cluttered with irrelevant information and chat in the timeline. Alarmingly, one respondent stated that they do not obtain information. On the other hand the usage Emails and WhatsApp DMs allow direct marketing using words and images, but they are not enough for an organization of this size.

How do you obtain tennis news in general?

Again the majority obtain from WhatsApp, 14 out of 26 respondents said WhatsApp groups or WhatsApp DMs. Twelve out of 26 stated Facebook, indicating a reliance on the platform. Eleven stated the newspaper as a source, implying there is still an audience for reading long form articles. For the noteworthy single select questions these were the responses:

Are you satisfied with the club’s means of communication?

Are you satisfied with the method it took to find a coach? 18 of the 26 respondents were either attending or had a child attending tennis school. 2 out of these 18 respondents were not satisfied with the process it took to find a coach.

Six out of 18 were not satisfied with the club’s means of communication. Eighteen of the 26 respondents were either attending or had a child attending tennis school and 2 out of these 18 respondents were not satisfied with the process it took to find a coach.

Users and audience

Questionnaire answers

Six out of the 26 respondents were not satisfied with the means of obtaining information about tournaments and events in the club. Some of the reasoning was:

With the free tools available nowadays (Facebook, instagram, etc…) it is not difficult to communicate and the club makes little use of it.

I'm not satisfied because the means of communication are very few. I think there should be more ways

There is little interaction through Facebook/Instagram

It would be better if [communication] was through a newsletter or by direct whatsapp or by email

Evidently the club is not that active on social media. Some tennis news is shared but it is sparse. What was truly lacking is information about prices, and coaches. Even though WhatsApp DMs and Emails are great for direct marketing, clearly not everyone receives information nor updates.

The 6 out of the 26 respondents were not satisfied with the method it took to find a coach for themselves or their children. Some of the reasoning was:

I did not have access to information on which teachers were available and what possibilities existed”

It would certainly be more effective and convenient for everyone if information were available about the coaches, prices charged per hour, categories to which they are most dedicated (youth, junior, senior) and even an indication of their credentials/seniority degree.

When asked which mediums would improve the club’s communication, these were the responses:

Which of these mediums would improve the club’s communication? The majority is confident that a website would improve communication, followed by a newsletter.

Persona

Let’s take a closer look at the people behind these responses. These are two personas, the archetypical tennis players who frequent the club. Their goals and characteristics represent the needs of a larger target audience.

Journey maps

Journey maps are a visualization of the process that a person goes through in order to accomplish a goal, in this case our two personas are Jeremy and Vania.

With the questionnaire, the personas and the journey maps, I had a clear idea of who the audience was, their pain points and reasoning, and their needs.

early ideation

Moodboarding

My first step was to put together a moodboard of website page mockups. I found designs in Dribble, Behance and Pinterest. These are the ones that inspired my design the most.

I really liked simplicity of the first mockup, and the circle motif which was perfect for tennis balls, and also symbolic of feelings of community according to shape psychology. I decided to use this homepage mockup as the main inspiration for the look of the whole website, and elements of parts of the other mockups.

Sitemap

My second step was to put together a sitemap. I featured pages and sections based on the needs of the users, and consolidated it with the structure of real sports websites on siteinspire.com, awwwards.com, screenlane.com, and sitesee.co. My objective was to design a website with intuitive information architecture and navigation. This is the site map I designed in Figma:

Every page is informative and/or has a call to action for the user. For instance, the notice board is one of the main features of the homepage, there the latest updates would be displayed, which previously was information that was sent through disconnected mediums such as Email, Facebook and WhatsApp. This solves the problem of disconnected and lack of information and increases traffic from Mozambican tennis lovers all over the world. Similarly, the tournaments page informs of the full tennis calendar, allows players sign up for tournaments, and is to be constantly up-to-date for changes.

Task flows

The third step was to illustrate some of the task flows i.e. series of steps the user takes to achieve a goal. The first task flow is for the subscription to a future newsletter, I pitched the idea of a newsletter to the club as a means to solve the pain point that was sparse or unfocused information about Mozambican tennis, and to forge a sense of community. The second task flow, which leads to booking a free lesson with a private coach, would solve the pain point of not having information about coaches.

I shared and discussed the sitemap and user flows with the board members in order for them to understand my thought process and get them on the same page before moving ahead. These task flows also helped me refine the logic and structure of the website.

Lo-fi wireframing

Lastly I designed the low fidelity wireframe in Figma, this was the initial visual skeleton of the website. Visual consistency was the top priority for the user interface. I consulted Material Design to get the anatomy and specs of ui elements right according to industry standards. For this project specifically I consulted and consolidated my knowledge with regards to buttons, cards, chips, data tables and lists.

I shared and discussed the sitemap and user flows with the board members in order for them to understand my thought process and get them on the same page before moving to the next stage.

Final design

Finding the color palatte

The club does not have a design systems, so I had creative freedom. I wanted the website to have a primary, secondary, background, and an “on” colors for things that are on surfaces like text. They all had to be in perfect harmony. With my cellphone I took a photo of one of the tennis courts, and uploaded onto the color picker on coolors.co in order to extract a color palatte.

It was important for me to use green as the primary color, not only because it is a predominant color in and around the actual courts but because it symbolizes health and rejuvenation, the cornerstones of sport. During my design I quickly realized that extra colors were needed for better legibility of certain elements, hence I made some tweaks for a primary and secondary variant color. I fine tuned the colors in Figma until I was happy with the results, this is the full color palatte:

Choosing the typography

I wanted to use two typefaces, for the headings and for the body plus other content. I pictured a sans-serif or serif slab for the headings and san-serif for the body. Sans-serif guaranteed ease of legibility and versatility, and a slab conveyed a mechanical and strong feeling a keen to the physical strength that can be gained from playing a sport like tennis. I searched Google fonts for appropriate fonts. I settled on Comfortaa for headings because its rounded geometric sans-serif type design, which perfectly matched the circle motif of the website. In the end I used Comfortaa only for heading 1, because even though it is a beautiful typeface, it was clear while designing that there was no need to oversaturate the website with it. I chose Mulish fonts for the body and other content because of its minimalist look and ease of legibility. This is the final full type scale:

Taking photos

I took close up photos of the board members, staff and coaches for the organogram and coach profiles respectively, using my Redmi Note 10. This was done over several photo sessions, my aim was to maintain consistency, so the shots were done at the same time of the day under similar weather conditions. For photos of children at the tennis school, players enjoying a game, the restaurant, and aerial shots, I worked with a professional photographer. He used a Canon EOS-1D X Mark 2 for the ground shots and a DJI FC3170 drone for the aerial shots. I supervised every photo session and coordinated with coaches and the restaurant owner. Basic retouching was done by the photographer in Adobe Lightroom, and I did editing and composition where needed in Adobe Photoshop.

Hi-fi wireframing

The hi-fi wireframe was built from the lo-fi wireframe, and included the color palatte, typography, and photos.

I shared the hi-fi wireframe with the board members in order to get their feedback. They were satisfied with it. The only thing they thought would cause a problem would be the free trial lesson for every coach (described in Task flow 2: Booking a free lesson), they believe the coaches would resist the free lesson trial since they are private coaches. I then changed that task flow so that it is just a database of coaches profiles featuring their contacts. This still solves the pain point of lack of information on coaches while avoiding a new problem.

The one page that I redesigned was the restaurant page. When I wanted to do a photoshoot of the food the photographer pointed out that it wasn’t a Michelin level restaurant, just a family restaurant with good but not fanciful looking food. A huge focus on the dishes on the hero section and other sections would not work. We then did a photoshoot focusing on people, which is a relatable element in a website, rather than food. Then for consolidation I did a simple A/B test of the hero designs of variant A , which featuring a stock dish, and variant B which features the photos we took of the restaurant. I asked the restaurant owner, staff, and dinners which variant they preferred, and all respondents preferred variant B, so it was the winner.

Variant A (left) featured a stock image of a dish, whereas variant B (right) featured people dinning and having a good time. 10 out of 10 respondents preferred variant B.

development

I built the responsive website in Webflow.

Short, easy to read copy

I mostly stuck to the AIDA formula for the copy, AIDA stands for attention, interest, desire and action. The AIDA formula is a tried and tested structure to grab people’s attention and take them through the content to the point that they take action on what they’ve read.

The hero section’s copy uses the AIDA formula to get the users to subscribe to the newsletter and see the prices of membership fees and tennis school.

People do not like to read, they skim, so I kept the copy as short as possible. Other parts of the website were written by others. The restaurant’s “About us” section was written by one of the owners, the club’s “Who we are” section was written by a veteran, long time and influential member. And the rules and regulations were written by the staff.

Functional widgets

Some functions could not be configured natively in Webflow, so I used Elfsight’s apps to add them. The calendar, RSS feed, and the WhatsApp chat are apps that solve some of the most pertinent problems the club had. The objective of the calendar is to inform the user through an up-to-date calendar of events, and have the forms for players to fallout linked to the relative dates.

The calendar has a filter for type of events (tournaments, national holidays, international holidays), venue and organizer. There is a description, it can be shared, and the button takes the user to the form’s url.

The RSS feed enables the presentation of international tennis news articles on this website. They are  from reputable sources such as ESPN and BBC Sports, and are all short and to the point, keeping the user informed in a digestible way, and driving traffic from previously disconnected news sources.

The WhatsApp chat was not in the design, but seeing it on the list of apps on Elfsight.com made it clear to me that it can bridge a communication deficit. It allows users to contact the front desk from the website through WhatsApp. It doesn’t matter what device the user is using, whether desktop, tablet, or mobile, so long the user’s on the website they can open the chat. Communication is made convenient, the user doesn’t even need to have the front desk number saved onto their device. At the club email is currently accessed only through the desktop, whereas the WhatsApp chat is on a tablet which is  always on and accessible on the go as it is always with somebody from the front desk, therefore replies are a lot faster.

The contact page has contact details like the address, email, phone number, opening hours, links to the club’s other social media platforms, a Google Map, and the WhatsApp chat, all conveniently in the same page.

I customized all these apps using CSS to look consistent with the website’s ui.

Making the website bilingual

I used the Weglot plugin to have the website in both Portuguese and English. Portuguese is Mozambique’s official language and most members speak it, however a minority of members do not, and also there is an influx of foreigners for regional tournaments at the club who do not speak Portuguese. Since English is the lingua franca, it was a no brainer to have a bilingual website. I used my experience with translations to proofread and correct some translation errors made by Weglot’s AI translator.

Getting coaches’ credentials to a database

The coaches’ page has coaches’ profiles, featuring their pictures, names, types of classes, target groups, target levels, teaching methods, mottos, and contacts. It is filter and sorting enabled. I created these dynamic filters using Finsweet’s attributes. The information on each card was supplied by the respective coach, through a filled out form. The information is stored in an Airtable database and automatically updated every time a new coach fills out the form.  This streamlines the process of finding the right coach, which was one of the biggest complaints about the club’s marketing and communication.

The calendar has a filter for type of events (tournaments, national holidays, international holidays), venue and organizer. There is a description, it can be shared, and the button takes the user to the form’s url.

Enabling live results

The umpires are now able to update local tennis match results live using Airtable on their devices, and the results are sent to the website through No-bull Airtable. The table displaying the results is intuitive, familiar, and professional looking. This section’s purpose is solely that, which is a relief from the reliance of Facebook and WhatsApp for results, which can be hard to find in a clutter of irrelevant information.

The image features demo results that I simulated from an international tournament. In future, local results will be updated to this section by the umpires at the club.

Flyer design

To promote the website I made a flyer in Photoshop in four sizes for social media. I used mostly the website’s color palatte as well as a sampled brown from the drone shot. I used one of drone shot of the courts and an impactful stock image of Frances Tiafoe with his racket back to make the double exposure effect. I made his legs smoked out to give him a genie-likeness, powerful and otherworldly. The double exposure gives a surreal effect that conveys a deeper meaning, just by looking at the flyer the audience knows it relates to playing tennis in courts, and emotive words like “power”, “fitness” and “otherworldy” come to mind, a level of tennis that one could possibly achieve at the club. I wanted to have the copy at the bottom aligned to the left, which would place the image on the right. But this did not create a balanced flyer due to the shape of the Tiafoe’s image. Right alignment of the words would make them hard to read, so I chose to stack them.

1920px flyer for social media story

1080px flyer for WhatsApp profile picture

Scope and constraints

One language only apps

The widgets powered by Elfsight’s apps work well and the CSS customization I made allowed for great ui consistency with the rest of the website. However, they do not work with the Weglot AI translator.  As a consequence the widgets on the website can only be displayed in one language, we decided that it should be Portuguese. This does not favour the website’s UX for English speakers.

Variant A (left) featured a stock image of a dish, whereas variant B (right) featured people dinning and having a good time. 10 out of 10 respondents preferred variant B.

Low cooperation

Throughout the project I needed cooperation from the club. I wanted input from members who lived through various periods, pre-independence, independence, post-independence and modern times. However, my various attempts at asking for written input failed. My emails went unanswered, WhatsApp messages too. Phone calls and face-to-face meetings where I asked for a short input of 1 to 2 paragraphs got me verbal commitments, but when it came time to do the actual work, nobody did. The only person who helped me was my father, a veteran of the club.

There was a lot of passivity. I asked the front desk to gather the members of the board, staff and coaches for their profile shots, with the aim for completion in three sessions. When reaching them over WhatsApp text failed, they did not try other means nor insisted. I ended up doing over a dozen sessions, some where only two people would show up, and still I couldn’t get everyone. That’s why the faces of some people in the organogram are represented by famous cartoon characters.

No information was given to the parents of children learning tennis at the tennis school about the photoshoots. Myself and the photographer had to explain the purpose of the photographs to many perplexed and concerned parents who questioned what we were doing. I had asked the front desk to notify the parents beforehand, but they didn’t. I also wanted photos of adults playing mixed doubles, the players had to be willing and patient since it was to be a choreographed shoot. The staff was so inefficient and unable to delegate between colleagues that I ended up finding people myself.

No card, no site

The website came with costs, for hosting, add-ons like the apps and AI translator. I detailed these costs in the proposal, and that they should be paid by card. During the development stage I asked for the card and to my surprise the club did not have one. Apparently nobody read my the proposal. They even suggested for the costs to be paid by cheque, their go to means of payment. I had to explain to them that that was not an option when relating to international platforms like Webflow, Weglot, Elfsight and Airtable. It took a month for them to make the request, with many persistent phone calls from me, and another month to get a card. They took too long to take action, and the bank also took too long to issue the card. During that time the project was left in limbo. My timeline estimated 7 weeks to complete the website, it took 4 months.

Resistance to change

I gave a workshop to the front desk staff explaining how to manage the website. As usual they were not that dynamic with the knowledge.
‍
The website was officially launched in November 2022, the launch took place after a tournament presentation ceremony, I made the presentation with a projector to those in attendance, explaining its purpose, functions and goals. Some board members, staff, players, and coaches were in attendance, including the front desk staff who are in charge of the website’s management. I ended with hope that the new website would be constantly updated to keep members and Mozambican tennis lovers up-to-date. And yet, the new year came and the website has not been updated since November.

That’s me! Launching the product with a walkthrough

It was quite packed considering the space

I instructed the club to send the flyers to everyone, and for the board members and coaches to share them on their social media shortly after the launch. I have the cellphone numbers of 21 of these people and only two of them put the flyer on their WhatsApp status. I am friends with 33 people associated with the club on Facebook, none of them put the flyers on their story or feed. The flyers were shared within the pre-existing WhatsApp group. This only shows that there is a resistance to change.

Next steps and learnings

Prepare a new workshop

The reality is, the current staff is not dynamic. Therefore, some of the burden of website management should be carried by someone else. One of the coaches manages the Facebook page unofficially, in any case he is active and the updates timely. I will teach him how to manage the website in order to upload photos and update written content.

I will also prepare a new workshop regarding Airtable, and its system to update match results. This workshop is for the umpires, the head competition, and national coach.

Look at the metrics

In December 2022 I added the website to Google Analytics and will monitor the metrics on a monthly basis. Metrics such as engagement, retention, demographics will give me some indication about what works well and what doesn’t. Any changes I make will be data driven.

Check in periodically

I will send reminders to the staff by WhatsApp and “show up unannounced” to remind them to use the technology, and also do some quality control.

Lessons learned

This was my first website for a paying client. I learned a lot about negotiation and the Mozambican mindset, lessons that will be valuable for future projects. Technically, I learnt so many new things about Webflow development and the amazing functionalities it has. It took long to finish the project but in the end I gained so much more experience.