Site do clube de ténis como fonte central de atualizações
Visão geral
Fui contratado para criar um site personalizado para o Maputo Tennis Club, o clube de ténis mais antigo e único de Moçambique. O clube tem seis quadras de ténis, um restaurante, bar, assentos para o público e é cercado por um jardim botânico. No clube, as pessoas podem se tornar sócios ou alugar quadras, e há muitos torneios de ténis realizados nas instalações durante todo o ano. O objetivo do site era resolver muitos dos problemas de marketing e comunicação do clube com seus sócios e amantes do ténis moçambicano, que moravam em Moçambique e no exterior.
Minha função
Fui o único designer e desenvolvedor do site de ponta a ponta. Eu supervisionei um fotógrafo profissional, Jens Doerre, durante sessões de esportes e fotografia com drones para o site. Também escrevi cerca de metade da cópia. Eu estava constantemente em contato com alguns membros do conselho durante todo o projeto. Antes de entregar o produto final, conduzi um workshop para treinar a equipe da recepção para gerenciar o site.
O problema
O Clube de Ténis de Maputo não tinha uma estrutura de comunicação eficaz e modernizada. Em fevereiro de 2022, tinha apenas uma conta no Facebook, com 924 assinantes, onde as atualizações são feitas e o conteúdo promocional era divulgado. Isso tinha as seguintes desvantagens:
- Todo o conteúdo está em uma única linha do tempo longa e não categorizada,
- As páginas do Facebook não são otimizadas para mecanismos de pesquisa,
- As páginas do Facebook não permitem marketing direto,
- O Facebook não é uma plataforma projetada para atualizações em tempo real,
- Uma página do Facebook como base central não reflete profissionalismo.
- Atualmente, o clube tem cerca de 134 sócios ativos. A página do Facebook não usa nenhum mecanismo para aumentar o número de visualizações ou seguidores ou converter seguidores atuais em membros ativos do clube.
O clube teve outros problemas de comunicação e marketing com seus sócios e amantes do tênis moçambicano em geral. Eu criei um questionário para entender a percepção dos sócios sobre a comunicação e o marketing do clube. O questionário tinha uma combinação de perguntas de múltipla escolha, perguntas de seleção única e perguntas abertas. Para as perguntas de múltipla escolha, essas foram algumas das respostas:
A maioria, 16 dos 26 entrevistados, obtém informações de grupos do WhatsApp, o que não é um meio muito eficiente, pois os grupos são famosos por estarem cheios de informações irrelevantes e conversarem na linha do tempo. De forma alarmante, um entrevistado afirmou que não obtém informações. Por outro lado, o uso de e-mails e DMs do WhatsApp permitem o marketing direto usando palavras e imagens, mas não são suficientes para uma organização desse tamanho.
Novamente, a maioria obtém do WhatsApp, 14 dos 26 entrevistados disseram grupos do WhatsApp ou DMs do WhatsApp. Doze dos 26 declararam o Facebook, indicando uma dependência da plataforma. Eleven declarou o jornal como fonte, o que implica que ainda há público para ler artigos longos. Para as perguntas notáveis de seleção única, estas foram as respostas:
Seis dos 18 não estavam satisfeitos com os meios de comunicação do clube. Dezoito dos 26 entrevistados estavam frequentando ou tinham um filho frequentando uma escola de tênis e 2 desses 18 entrevistados não estavam satisfeitos com o processo necessário para encontrar um treinador.
Utilizadores e público-alvo
Respostas do questionário
Seis dos 26 entrevistados não estavam satisfeitos com os meios de obter informações sobre torneios e eventos no clube. Alguns dos raciocínios foram:
Com as ferramentas gratuitas disponíveis atualmente (Facebook, instagram, etc...), não é difícil se comunicar e o clube faz pouco uso delas.
Não estou satisfeito porque os meios de comunicação são muito poucos. Eu acho que deveria haver mais maneiras
Há pouca interação por meio do Facebook/Instagram
Seria melhor se [a comunicação] fosse por meio de um boletim informativo ou por whatsapp direto ou por e-mail
Evidentemente, o clube não é tão ativo nas redes sociais. Algumas notícias sobre tênis são compartilhadas, mas são escassas. O que realmente faltava eram informações sobre preços e treinadores. Embora os DMs e e-mails do WhatsApp sejam ótimos para marketing direto, é claro que nem todo mundo recebe informações nem atualizações.
Os 6 dos 26 entrevistados não ficaram satisfeitos com o método utilizado para encontrar um treinador para si ou para seus filhos. Alguns dos raciocínios foram:
Não tive acesso às informações sobre quais professores estavam disponíveis e quais possibilidades existiam”
Certamente seria mais eficaz e conveniente para todos se houvesse informações disponíveis sobre os treinadores, preços cobrados por hora, categorias às quais eles se dedicam mais (jovens, juniores, seniores) e até mesmo uma indicação de suas credenciais/grau de antiguidade.
Quando perguntados sobre quais meios melhorariam a comunicação do clube, estas foram as respostas:
Persona
Vamos examinar mais de perto as pessoas por trás dessas respostas. Essas são duas personas, os jogadores de tênis arquetípicos que frequentam o clube. Seus objetivos e características representam as necessidades de um público-alvo maior.
Mapas de viagem
Os mapas de viagem são uma visualização do processo pelo qual uma pessoa passa para atingir uma meta, neste caso, nossas duas personas são Jeremy e Vania.
Com o questionário, as personas e os mapas de viagem, tive uma ideia clara de quem era o público, seus pontos problemáticos e raciocínios e suas necessidades.
Conceção inicial
Moodboard
Meu primeiro passo foi montar um moodboard de modelos de páginas de sites. Encontrei designs no Dribble, Behance e Pinterest. Esses são os que mais inspiraram meu design.
Gostei muito da simplicidade da primeira maquete e do motivo circular, perfeito para bolas de tênis, além de simbolizar os sentimentos de comunidade de acordo com a psicologia da forma. Decidi usar essa maquete de página inicial como inspiração principal para a aparência de todo o site e elementos de partes das outras maquetes.
Mapa do site
Minha segunda etapa foi criar um mapa do site. Eu destaquei páginas e seções com base nas necessidades dos usuários e as consolidei com a estrutura de sites de esportes reais em siteinspire.com, awwwards.com, screenlane.com e sitesee.co. Meu objetivo era criar um site com arquitetura de informações e navegação intuitivas. Este é o mapa do site que eu desenhei no Figma:
Cada página é informativa e/ou tem uma chamada à ação para o usuário. Por exemplo, o quadro de avisos é um dos principais recursos da página inicial, onde as atualizações mais recentes seriam exibidas, que anteriormente eram informações enviadas por meios desconectados, como e-mail, Facebook e WhatsApp. Isso resolve o problema de desconexão e falta de informação e aumenta o tráfego de amantes do tênis moçambicanos em todo o mundo. Da mesma forma, a página de torneios informa sobre o calendário completo do ténis, permite que os jogadores se inscrevam em torneios e está constantemente atualizada com as mudanças.
Fluxos de tarefas
A terceira etapa foi ilustrar alguns dos fluxos de tarefas, ou seja, uma série de etapas que o usuário executa para atingir uma meta. O primeiro fluxo de tarefas é para a assinatura de um futuro boletim informativo. Apresentei a ideia de um boletim informativo para o clube como um meio de resolver o problema que eram informações escassas ou desfocadas sobre o ténis moçambicano e criar um senso de comunidade. O segundo fluxo de tarefas, que leva à reserva de uma aula gratuita com um treinador particular, resolveria o problema de não ter informações sobre os treinadores.
Compartilhei e discuti o mapa do site e os fluxos de usuários com os membros do conselho para que eles entendessem meu processo de pensamento e os colocassem na mesma página antes de prosseguir. Esses fluxos de tarefas também me ajudaram a refinar a lógica e a estrutura do site.
Lo-fi wireframing
Por fim, projetei o wireframe de baixa fidelidade no Figma, esse foi o esqueleto visual inicial do site. A consistência visual era a principal prioridade da interface do usuário. Consultei o Material Design para obter a anatomia e as especificações dos elementos da interface do usuário de acordo com os padrões da indústria. Especificamente para este projeto, consultei e consolidei meu conhecimento com relação a botões, cartões, chips, tabelas de dados e listas.
Compartilhei e discuti o mapa do site e os fluxos de usuários com os membros do conselho para que eles entendessem meu processo de pensamento e os colocassem na mesma página antes de passar para a próxima etapa.
Design final
Encontrando a paleta de cores
O clube não tem um sistema de design, então eu tive liberdade criativa. Eu queria que o site tivesse cores primárias, secundárias, de fundo e “ativadas” para coisas que estão em superfícies como texto. Todos eles tinham que estar em perfeita harmonia. Com meu celular, tirei uma foto de uma das quadras de tênis e coloquei no seletor de cores em coolors.co para extrair uma paleta de cores.
Era importante para mim usar o verde como cor primária, não apenas porque é uma cor predominante dentro e ao redor das quadras, mas porque simboliza saúde e rejuvenescimento, os pilares do esporte. Durante meu design, percebi rapidamente que cores extras eram necessárias para uma melhor legibilidade de certos elementos, por isso fiz alguns ajustes para uma cor variante primária e secundária. Eu ajustei as cores no Figma até ficar feliz com os resultados, esta é a paleta de cores completa:
Escolhendo a tipografia
Eu queria usar dois tipos de letra, para os títulos e para o corpo, além de outros conteúdos. Imaginei uma placa sans-serif ou serif para os cabeçalhos e san-serif para o corpo. A sans-serif garantiu facilidade de legibilidade e versatilidade, e uma placa transmitia uma sensação mecânica e forte de apego à força física que pode ser obtida ao praticar um esporte como o ténis. Pesquisei fontes do Google para encontrar as fontes apropriadas. Eu escolhi Comfortaa para títulos porque seu design geométrico arredondado do tipo sans-serif, que combinava perfeitamente com o motivo circular do site. No final, usei Comfortaa apenas para o título 1, porque apesar de ser uma fonte bonita, ficou claro durante o design que não havia necessidade de saturar demais o site com ela. Eu escolhi fontes Mulish para o corpo e outros conteúdos por causa de sua aparência minimalista e facilidade de legibilidade. Esta é a escala final de tipo completo:
| scale category | typeface | weight | case | desktop size | tablet | moble | letter spacing |
|---|---|---|---|---|---|---|---|
| Heading 1 | Comfortaa | Medium | Sentence | 40 | 36 | 26.5 | 0 |
| HEADING 2 | Mulish | Bold | Uppercase | 18 | 16 | 16 | 0 |
| Heading 3 | Mulish | Semi-bold | Uppercase | 16 | 16 | 16 | 0 |
| Subtitle 1 | Mulish | Semi-bold | Title case | 18 | 18 | 18 | 0 |
| Subtitle 2 | Mulish | Regular | Sentence | 24 | 24 | 24 | 0 |
| Body 1 | Mulish | Regular | Sentence | 18 | 18 | 18 | 0 |
| Body 2 | Mulish | Light | Sentence | 15 | 15 | 15 | 0 |
| Button | Mulish | Bold | Sentence | 16 | 16 | 16 | 0.25 |
| Caption | Mulish | Regular | Sentence | 15 | 15 | 15 | 0 |
Tirando fotos
Tirei fotos de perto dos membros do conselho, da equipe e dos treinadores para o organograma e os perfis dos treinadores, respectivamente, usando meu Redmi Note 10. Isso foi feito em várias sessões de fotos, meu objetivo era manter a consistência, então as fotos foram feitas na mesma hora do dia em condições climáticas semelhantes. Para fotos de crianças na escola de ténis, jogadores curtindo um jogo, do restaurante e fotos aéreas, trabalhei com um fotógrafo profissional. Ele usou uma Canon EOS-1D X Mark 2 para as fotos do solo e um drone DJI FC3170 para as fotos aéreas. Eu supervisionei cada sessão de fotos e coordenei com os treinadores e o dono do restaurante. O retoque básico foi feito pelo fotógrafo no Adobe Lightroom, e eu fiz edição e composição quando necessário no Adobe Photoshop.
Hi-fi wireframing
O wireframe de alta fidelidade foi construído a partir do wireframe lo-fi e incluiu a paleta de cores, a tipografia e as fotos.
Compartilhei o wireframe de alta fidelidade com os membros do conselho para obter seus comentários. Eles ficaram satisfeitos com isso. A única coisa que eles acharam que causaria um problema seria a aula experimental gratuita para cada treinador (descrita no Fluxo de tarefas 2: Reservar uma aula gratuita). Eles acreditam que os treinadores resistiriam ao teste gratuito, pois são treinadores particulares. Em seguida, mudei esse fluxo de tarefas para que fosse apenas um banco de dados de perfis de treinadores com seus contatos. Isso ainda resolve o problema da falta de informações sobre os treinadores, evitando um novo problema.
A única página que eu redesenhei foi a página do restaurante. Quando eu quis fazer uma sessão de fotos da comida, o fotógrafo disse que não era um restaurante de nível Michelin, apenas um restaurante familiar com comida boa, mas não fantasiosa. Um grande foco nos pratos da seção de heróis e de outras seções não funcionaria. Em seguida, fizemos uma sessão de fotos com foco nas pessoas, que é um elemento identificável em um site, em vez de comida. Então, para consolidar, fiz um teste A/B simples dos designs dos heróis da variante A, que apresenta um prato padrão, e da variante B, que mostra as fotos que tiramos do restaurante. Perguntei ao dono do restaurante, aos funcionários e aos jantares qual variante eles preferiam, e todos os entrevistados preferiram a variante B, então ela foi a vencedora.
acontecimento
Eu construí o site responsivo no Webflow.
Cópia curta e fácil de ler
Eu segui principalmente a fórmula AIDA para a cópia, AIDA significa atenção, interesse, desejo e ação. A fórmula da AIDA é uma estrutura testada e comprovada para chamar a atenção das pessoas e conduzi-las pelo conteúdo até o ponto de elas agirem de acordo com o que leram.
As pessoas não gostam de ler, elas folheiam, então eu mantive a cópia o mais curta possível. Outras partes do site foram escritas por outras pessoas. A seção “Sobre nós” do restaurante foi escrita por um dos proprietários, a seção “Quem somos” do clube foi escrita por um membro veterano, influente e de longa data. E as regras e regulamentos foram escritos pela equipe.
Widgets funcionais
Algumas funções não puderam ser configuradas nativamente no Webflow, então usei os aplicativos da Elfsight para adicioná-las. O calendário, o feed RSS e o bate-papo do WhatsApp são aplicativos que resolvem alguns dos problemas mais pertinentes que o clube teve. O objetivo do calendário é informar o usuário por meio de um calendário de eventos atualizado e ter os formulários para os jogadores preencherem vinculados às datas relativas.
O feed RSS permite a apresentação de artigos de notícias internacionais sobre ténis neste site. Eles são de fontes confiáveis, como ESPN e BBC Sports, e são todos curtos e diretos, mantendo o usuário informado de forma digerível e direcionando o tráfego de fontes de notícias anteriormente desconectadas.
O bate-papo do WhatsApp não estava no design, mas vê-lo na lista de aplicativos do Elfsight.com deixou claro para mim que ele pode preencher um déficit de comunicação. Ele permite que os usuários entrem em contato com a recepção a partir do site por meio do WhatsApp. Não importa qual dispositivo o usuário está usando, seja desktop, tablet ou celular, desde que o usuário esteja no site, ele poderá abrir o bate-papo. A comunicação é facilitada, o usuário nem precisa ter o número da recepção salvo em seu dispositivo. No clube, atualmente, o e-mail é acessado apenas pelo desktop, enquanto o bate-papo do WhatsApp está em um tablet que está sempre ligado e acessível em qualquer lugar, como sempre com alguém da recepção, portanto, as respostas são muito mais rápidas.
Eu personalizei todos esses aplicativos usando CSS para parecerem consistentes com a interface do usuário do site.
Tornando o site bilíngue
Eu usei o plugin Weglot para ter o site em português e inglês. O português é a língua oficial de Moçambique e a maioria dos sócios o fala, no entanto, uma minoria de sócios não o fala, e também há um fluxo de estrangeiros para torneios regionais do clube que não falam português. Como o inglês é a língua franca, era óbvio ter um site bilíngue. Usei minha experiência com traduções para revisar e corrigir alguns erros de tradução cometidos pelo tradutor de IA da Weglot.
Obter as credenciais dos treinadores em um banco de dados
A página dos treinadores tem perfis dos treinadores, com suas fotos, nomes, tipos de aulas, grupos-alvo, níveis-alvo, métodos de ensino, lemas e contatos. Está habilitado para filtrar e classificar. Eu criei esses filtros dinâmicos usando os atributos do Finsweet. As informações de cada cartão foram fornecidas pelo respectivo treinador, por meio de um formulário preenchido. As informações são armazenadas em um banco de dados Airtable e atualizadas automaticamente sempre que um novo treinador preenche o formulário. Isso agiliza o processo de encontrar o treinador certo, que foi uma das maiores reclamações sobre o marketing e a comunicação do clube.
Habilitando resultados ao vivo
Os árbitros agora podem atualizar os resultados das partidas de ténis locais ao vivo usando o Airtable em seus dispositivos, e os resultados são enviados ao site por meio do Zapier. A tabela que exibe os resultados tem uma aparência intuitiva, familiar e profissional. O objetivo desta seção é apenas isso, o que alivia a dependência do Facebook e do WhatsApp para obter resultados, que podem ser difíceis de encontrar em uma confusão de informações irrelevantes.
Design de Flyer
Para promover o site, fiz um flyer no Photoshop em quatro tamanhos para mídias sociais. Usei principalmente a paleta de cores do site, bem como uma amostra de marrom da foto do drone. Usei uma foto de drone das quadras e uma imagem de stock impactante de Frances Tiafoe com sua raquete de volta para fazer o efeito de dupla exposição. Eu deixei suas pernas esfumaçadas para dar a ele uma aparência de gênio, poderosa e sobrenatural. A dupla exposição dá um efeito surreal que transmite um significado mais profundo. Só de olhar para o panfleto, o público sabe que se trata de jogar tênis em quadras, e palavras emotivas como “poder”, “condicionamento físico” e “sobrenatural” vêm à mente, um nível de tênis que se poderia alcançar no clube. Eu queria ter a cópia na parte inferior alinhada à esquerda, o que colocaria a imagem à direita. Mas isso não criou um panfleto equilibrado devido ao formato da imagem do Tiafoe. O alinhamento correto das palavras dificultaria a leitura, então optei por empilhá-las.
Âmbito e limitações
Aplicativos somente em um idioma
Os widgets fornecidos pelos aplicativos da Elfsight funcionam bem e a personalização do CSS que fiz permitiu uma excelente consistência da interface do usuário com o resto do site. No entanto, eles não funcionam com o tradutor Weglot AI. Como consequência, os widgets do site só podem ser exibidos em um idioma, decidimos que deveriam ser em português. Isso não favorece a experiência do usuário do site para falantes de inglês.
Baixa cooperação
Durante todo o projeto, precisei da cooperação do clube. Eu queria a opinião de membros que viveram vários períodos, pré-independência, independência, pós-independência e tempos modernos. No entanto, minhas várias tentativas de solicitar entrada escrita falharam. Meus e-mails ficaram sem resposta, as mensagens do WhatsApp também. Ligações telefônicas e reuniões presenciais em que eu pedia uma breve entrada de 1 a 2 parágrafos me deram compromissos verbais, mas quando chegou a hora de fazer o trabalho real, ninguém o fez. A única pessoa que me ajudou foi meu pai, um veterano do clube.
Havia muita passividade. Pedi à recepção que reunisse os membros do conselho, funcionários e treinadores para tirar suas fotos de perfil, com o objetivo de serem concluídas em três sessões. Quando a mensagem de texto do WhatsApp falhou, eles não tentaram outros meios nem insistiram. Acabei fazendo mais de uma dúzia de sessões, algumas em que apenas duas pessoas apareciam, e ainda assim não consegui atender a todos. É por isso que os rostos de algumas pessoas no organograma são representados por personagens famosos de desenhos animados.
Nenhuma informação foi dada aos pais das crianças que estavam aprendendo ténis na escola de tênis sobre as sessões de fotos. Eu e o fotógrafo tivemos que explicar o propósito das fotografias para muitos pais perplexos e preocupados que questionaram o que estávamos fazendo. Pedi à recepção que avisasse os pais com antecedência, mas eles não o fizeram. Eu também queria fotos de adultos jogando duplas mistas. Os jogadores tinham que estar dispostos e pacientes, pois seria uma sessão coreografada. A equipe era tão ineficiente e incapaz de delegar entre colegas que eu mesmo acabei encontrando pessoas.
Sem cartão, sem site
O site veio com custos, de hospedagem, complementos como os aplicativos e o AI Translator. Eu detalhei esses custos na proposta e que eles deveriam ser pagos com cartão. Durante a fase de desenvolvimento, pedi o cartão e, para minha surpresa, o clube não tinha um. Aparentemente, ninguém leu minha proposta. Eles até sugeriram que os custos fossem pagos em cheque, usassem meios de pagamento. Tive que explicar a eles que isso não era uma opção quando se relacionava com plataformas internacionais como Webflow, Weglot, Elfsight e Airtable. Demorou um mês para eles fazerem a solicitação, com muitas ligações telefônicas persistentes de minha parte, e outro mês para receber um cartão. Eles demoraram muito para agir e o banco também demorou muito para emitir o cartão. Durante esse período, o projeto ficou no limbo. Meu cronograma estimou 7 semanas para concluir o site, demorou 4 meses.
Resistência à mudança
Eu dei um workshop para a equipe da recepção explicando como gerenciar o site. Como sempre, eles não eram tão dinâmicos com o conhecimento.
O site foi lançado oficialmente em novembro de 2022, o lançamento ocorreu após uma cerimônia de apresentação do torneio, fiz a apresentação com um projetor para os presentes, explicando seu propósito, funções e objetivos. Alguns membros do conselho, funcionários, jogadores e treinadores estiveram presentes, incluindo a equipe da recepção que é responsável pelo gerenciamento do site. Terminei com a esperança de que o novo site fosse constantemente atualizado para manter os membros e os amantes do tênis moçambicanos atualizados. E, no entanto, chegou o novo ano e o site não é atualizado desde novembro.
Instruí o clube a enviar os folhetos para todos e que os membros da diretoria e treinadores os compartilhassem nas redes sociais logo após o lançamento. Eu tenho os números de celular de 21 dessas pessoas e apenas duas delas colocaram o panfleto no status do WhatsApp. Sou amigo de 33 pessoas associadas ao clube no Facebook, nenhuma delas colocou os folhetos em sua história ou feed. Os folhetos foram compartilhados dentro do grupo pré-existente do WhatsApp. Isso só mostra que há uma resistência à mudança.
Próximas etapas e aprendizados
Preparar um novo workshop
A realidade é que a equipe atual não é dinâmica. Portanto, parte da carga do gerenciamento do site deve ser suportada por outra pessoa. Um dos treinadores gerencia a página do Facebook de forma não oficial; em qualquer caso, ele está ativo e as atualizações são oportunas. Vou ensiná-lo a gerenciar o site para fazer upload de fotos e atualizar o conteúdo escrito.
Também prepararei um novo workshop sobre o Airtable e seu sistema para atualizar os resultados das partidas. Este workshop é para os árbitros, a competição principal e o técnico nacional.
Monitorar as métricas
Em dezembro de 2022, adicionei o site ao Google Analytics e monitorarei as métricas mensalmente. Métricas como engajamento, retenção e demografia me darão algumas indicações sobre o que funciona bem e o que não funciona. Todas as alterações que eu fizer serão orientadas por dados.
Aparecer periodicamente
Enviarei lembretes para a equipe pelo WhatsApp e “aparecerei sem avisar” para lembrá-los de usar a tecnologia e também fazer algum controle de qualidade.
Lições aprendidas
Este foi meu primeiro site para um cliente pagante. Aprendi muito sobre negociação e a mentalidade moçambicana, lições que serão valiosas para projetos futuros. Tecnicamente, aprendi muitas coisas novas sobre o desenvolvimento do Webflow e as incríveis funcionalidades que ele tem. Demorou muito para terminar o projeto, mas no final ganhei muito mais experiência.