Plataforma de torneio e placares ao vivo — branch de evento

Designer de UI da branch especializada 'Copinha e Placares de Futebol' da Nossa Rádio USA, emissora da comunidade brasileira nos Estados Unidos. Designer único responsável pelos 93 nós da página exclusiva Placares de Futebol (nó 1775:32 no arquivo Figma pHbnXgEdjlZyFQ8BbVOd8h): desenvolvi a landing page do torneio, o fluxo de inscrição de equipes com pop-ups de confirmação, visualizações de chaveamento de mata-mata em múltiplas fases (Chaveamento 1.1 a 1.5 em desktop e mobile), tabelas de classificação de grupos (Tabela), vitrine de patrocinadores e o painel administrativo de gestão do torneio (Admin, Adicionar equipe, Placar), sustentados por 13 conjuntos de componentes dedicados.

Atuação como funcionário na agência Sagitta de 12 de dezembro de 2023 a 15 de janeiro de 2024. Juan atuou como designer líder da nova funcionalidade esportiva. DIVISÃO DE ESCOPO: Esther desenhou o site institucional original da emissora de rádio antes da entrada de Juan na agência (páginas 'Design' [85 filhos] e 'Alterações | Ester' [19 filhos]). Juan foi alocado exclusivamente para criar a plataforma do torneio 'Copinha'. NOTA DE BRIEFING: O briefing do Whimsical deste projeto continha texto misturado de um sistema de gestão escolar (boilerplate da Escola Piaget) e deve ser permanentemente desconsiderado.

UX para eventos esportivos: placares ao vivo e chaveamento de mata-mata

⚽93

nós na página exclusiva de Placares de Futebol desenhada por Juan

🏆5 fases

de chaveamento de mata-mata estruturadas (Chaveamento 1.1 a 1.5)

🧩13

conjuntos de componentes criados (Placares, Tabelas, Cards, Admin)

🎯100%

foco na branch do torneio, e não no portal da emissora

Campeonatos esportivos comunitários despertam grande engajamento, mas acompanhar resultados dispersos em redes sociais gera frustração para torcedores, atletas e patrocinadores. Para a 'Copinha' de futebol society organizada pela Nossa Rádio USA para a comunidade brasileira no exterior, a emissora necessitava de uma plataforma digital em que o público pudesse conferir placares ao vivo, o chaveamento de mata-mata e a classificação de grupos na beira do gramado pelo celular.

Motor de chaveamento e acompanhamento em 93 nós

Na página exclusiva de Placares de Futebol (nó 1775:32), projetei a plataforma completa do torneio:

• Visualização de Chaveamento (Chaveamento 1.1 a 1.5) — Estrutura de mata-mata para desktop e mobile cobrindo oitavas, quartas, semifinais e final, com linhas de conexão dinâmicas (LineAnimation) e formatos de confronto ('Round One Best of 3').
• Tabela de Classificação de Grupos (Tabela) — Listagem com pontuação, vitórias, saldo de gols e zonas de classificação direta para o mata-mata.
• Landing Page e Inscrição de Equipes — Página do evento com regulamento, ficha de inscrição (Inscrição 1.1 e 1.2), vitrine de patrocinadores (Patrocinadores) e pop-ups de confirmação (Pop-up sucesso).
• Placar Flutuante de Jogos (PlacarFlutuante e Placar) — Indicador de partidas em andamento que acompanha a navegação sem cobrir o conteúdo.
• Painel Administrativo do Torneio (Seção Admin) — Interface para a organização cadastrar times (Adicionar equipe), atualizar placares e lançar cartões em tempo real.

Biblioteca de 13 componentes dedicados

Para assegurar consistência visual entre as tabelas, os cards de jogo e os formulários administrativos, criei 13 conjuntos de componentes: CardIcons, Card, Button, Placar, PlacarFlutuante, Team, Status, TopBanner, LineAnimation, NavIcons, Select, Hamburger Menu Hero e Menu Item NavBar.

O que este projeto é e o que não é

• Não é o site principal da emissora de rádio. Esther foi a autora do site institucional e da marca da rádio.
• Não é o briefing do Whimsical. O arquivo continha dados corrompidos da Escola Piaget e não representa o projeto.
• Não está ativo hoje. A plataforma do campeonato foi publicada durante o evento e desativada após o término da competição.
• Não é infraestrutura de WebSockets ou placares em tempo real. Desenvolvi o design da interface no Figma, não o código do servidor.
• Não possui métricas de audiência do torneio. Nenhum dado de visitantes ou visualizações de jogos foi retido.

A complexidade da arquitetura de chaveamentos esportivos

A Nossa Rádio USA exemplifica os desafios de design de informação em eventos esportivos. Ao traduzir chaveamentos de mata-mata, placares flutuantes e tabelas de classificação em uma interface responsiva, o projeto entregou uma experiência esportiva completa para a comunidade.

Evidência

A rádio principal permanece no ar em nossaradiousa.com. A landing page da Copinha e a central de placares foram implementadas e operaram durante o evento esportivo, sendo desativadas após o encerramento do campeonato. Não restam arquivos online da página temporária do torneio. Não existem métricas de audiência dos jogos. Este estudo de caso documenta a UX para chaveamento esportivo (mata-mata), tabelas de classificação e painéis administrativos de campeonatos.