Tournament Platform & Live Scores — Feature Branch
Registration, standings and five bracket rounds at two viewports.
A soccer tournament application and live-score hub, built as an event branch inside a radio station's digital ecosystem. I designed all 93 children of that branch across desktop and mobile: the tournament landing and multi-step registration with success states, news and sponsor pages, standings tables, and five bracket rounds drawn at both viewports with progression lines. The tournament branch is the scope — the station's main website is another designer's and predates me.
- Role
- Sole UI designer of the Copinha / Placares de Futebol feature branch
- Timeframe
- Dec 2023 – Jan 2024
- Stack
- Figma
- Evidence
- Live
- Design file
Sole UI Designer for the dedicated 'Copinha & Placares de Futebol' tournament and live scoreboards feature branch of Nossa Rádio USA, a major Brazilian community radio station in the United States. Designed 93 canvas nodes on the dedicated Placares de Futebol page (node 1775:32 in Figma file pHbnXgEdjlZyFQ8BbVOd8h): authored the tournament public landing page, team registration intake with confirmation popups, multi-round bracket visualizations (Chaveamento 1.1 to 1.5 across desktop and mobile), group standings tables (Tabela), sponsor spotlights, and the tournament administrative management back-office (Admin, Adicionar equipe, Placar) across desktop and mobile viewports, backed by 13 dedicated component sets.
Agency employment at Sagitta delivering from December 12, 2023 to January 15, 2024. Juan served as the feature branch lead UI designer. ATTRIBUTION SPLIT: Esther designed the original Nossa Rádio USA radio station website before Juan joined Sagitta (pages 'Design' [85 children] and 'Alterações | Ester' [19 children]). Juan was brought in exclusively to design the entire new tournament branch. NOTE ON SOURCES: The Whimsical briefing for this project contained mixed boilerplate text from a school management system (Piaget Escola) and must be permanently disregarded.
Sports tournament UX: live scoreboards and multi-stage brackets
- 93
- canvas nodes on Juan's dedicated Placares de Futebol page
- 5 rounds
- bracket visualizations designed (Chaveamento 1.1 to 1.5)
- 13
- component sets authored (Brackets, Scoreboards, Cards, Admin)
- 100%
- dedicated sports feature branch, not the radio station portal
Community sports tournaments generate intense local passion, but tracking matches across disparate social media posts creates confusion for fans, coaches, and sponsors. For the 'Copinha' soccer tournament organized by Nossa Rádio USA for the Brazilian diaspora, the station required a dedicated digital platform where fans could track live scores, view knockout bracket progressions, consult group standings, and review match schedules on mobile devices at the field.
Bracket visualization and tournament engine across 93 nodes
On the dedicated Placares de Futebol page (node 1775:32), I designed a comprehensive sports platform:
- Multi-Stage Knockout Brackets (Chaveamento 1.1 to 1.5) — Complex responsive bracket visualization tracking group stages, quarterfinals, semifinals, and finals on desktop and mobile, with custom connector lines (LineAnimation) and match format rules ('Round One Best of 3').
- Live Group Standings Tables (Tabela) — Comprehensive league tables tracking points, matches played, goal difference, goals scored, and qualification badges on both desktop and mobile viewports.
- Tournament Landing & Team Registration — Event discovery page with team registration forms (Inscrição 1.1 and 1.2), rulebook downloads, sponsor showcases (Patrocinadores), and registration confirmation dialogs (Pop-up sucesso).
- Floating Live Scoreboard (PlacarFlutuante & Placar) — Real-time match score indicators allowing fans to monitor live game scores while browsing news and team rosters.
- Tournament Administrative Console (Section Admin) — Back-office interface enabling tournament organizers to register teams (Adicionar equipe), input match scores, and update group standings in real time.
Never say Juan designed Nossa Rádio USA: he designed its Copinha tournament branch. Esther authored the original radio station website before Juan joined Sagitta. And never use the project's Whimsical briefing: it contains corrupted text from a school management system (Piaget Escola boilerplate) describing a different system entirely.
Component architecture for sports interfaces
To maintain visual consistency between tournament brackets, scorecards, and administrative forms, I authored 13 dedicated component sets: CardIcons, Card, Button, Placar, PlacarFlutuante, Team, Status, TopBanner, LineAnimation, NavIcons, Select, Hamburger Menu Hero, and Menu Item NavBar.
What this project is and is not
- Not the main radio station website. Esther designed the primary Nossa Rádio USA radio station website and its visual identity.
- Not the Whimsical briefing. The briefing file was corrupted with Piaget Escola school boilerplate and does not describe this project.
- Not live today. The tournament platform was deployed during the competition event and retired after its conclusion.
- Not backend live scoring software. I designed the UI and admin workflows in Figma, not the real-time WebSocket infrastructure.
- Not supported by tournament analytics. No spectator attendance or web traffic metrics were retained.
The complexity of tournament bracket UX
Nossa Rádio USA highlights the information design challenges of competitive sports platforms. By translating multi-round knockout brackets, real-time scoreboards, and league standings into a responsive mobile-first interface, the design provided an engaging tournament hub for the community.
Evidence
The primary radio station remains accessible at nossaradiousa.com. The Copinha tournament landing site and real-time score hub operated throughout the competition, and were retired after it ended. No live archive of the temporary event subpage survives. No match engagement metrics exist. This case study documents complex tournament bracket UX (Chaveamento), sports standings tables, and tournament admin consoles.