Tournament-first web experience
- Home
- Campeonatos
- TVN Entresemana
- Fútbol 8
- Torneo Clausura 2025 F8
- Relevant section
Copateur Mobile · Product Design · UX/UI · AI-assisted workflow
Designing a player-centered mobile experience for amateur football.
Reframing a public, tournament-first web experience into a personalized product for authenticated Players.
01 / Project context
From public competition data to personal match-day context.
Copateur organizes amateur football tournaments. Stakeholders wanted to explore faster, more personal mobile access for Players.
The opportunity begins when the product knows the Player, their Team, and the Tournament that matters now.
Authenticated Players need quick access to
- 01 Next Match
- 02 Personal statistics
- 03 Disciplinary status
- 04 Team performance
- 05 Fixture and Standings
- 06 Broader Tournament information
02 / The challenge
Relevant information existed. Reaching it required rebuilding context.
The live product was organized around Tournament discovery—not around a known Player. That observation framed the opportunity.
Player-centered mobile opportunity
- Authenticated Player
- Known Team
- Current Tournament
- Personally relevant information
Tournament context had to be selected repeatedly.
The next Match lived inside Fixture navigation.
Personal information was distributed across Tournament sections.
Disciplinary shorthand could require interpretation.
03 / How I used AI
A repeatable loop between design judgment and AI execution.
Each cycle started with a Product Design question and ended with critique—not automatic acceptance.
AI accelerated exploration and execution. Product reasoning and final design decisions remained human-led.
01Think
02Define
03Prompt
04Execute
05Critique
06Iterate
ChatGPT
Challenged assumptions, structured the process, supported product reasoning and critique, and helped define precise execution prompts.
Codex
Produced documentation, coded prototypes, visual iterations, the design system, QA, and portfolio implementation support.
Designer judgment
Controlled framing, prioritization, interpretation, navigation, acceptance or rejection of outputs, and the final visual direction.
Figma MCP supported early wireframe experiments. Git preserved decision history. HTML, CSS, and JavaScript kept every prototype executable.
04 / Product framing
Turn assumptions into an explicit design agenda.
The starting direction was treated as hypotheses to test through design—not as established Player behavior.
A1 Personalization could reduce repeated filtering.
A2 The next Match may be the highest-priority information.
A3 Disciplinary status needs clearer communication.
A4 Team performance is likely to be a recurring need.
Kept secondary: notifications were considered, but did not shape the initial architecture before Player preferences could be understood.
J1 / Core
Prepare for my next Match.
J2 / Core
Understand my eligibility to play.
J3 / Core
Understand how my Team is performing.
J4 / SecondaryExplore the broader Tournament—Fixture, Standings, Goleadores, and Fair Play—without giving it the same priority as immediate personal context.
05 / Research approach
Enough evidence to make informed choices.
Stakeholder context, product review, heuristic evaluation, and competitive patterns informed the concept. No primary Player research was claimed.
Stakeholder input
Existing-product review
Heuristic evaluation
Competitive pattern review
SportEasy · TeamSnap · Sofascore
Useful patterns included persistent Team context, prominent upcoming Matches, clear sports hierarchy, personalization, and selective notifications. They informed exploration—not requirements.
06 / Key insights
Five observations shaped the product direction.
Each insight was paired with a direct implication so the analysis could move into architecture and interaction.
Tournament-first navigation creates repeated context-setting.
Start from known Player, Team, and primary Tournament context.
Relevant Player information is distributed across Tournament sections.
Bring the most personal and time-sensitive information together on Inicio.
Time-sensitive information deserves clearer priority.
Let the next Match—and urgent exceptions—lead the hierarchy.
Status must be explicit.
Pending scheduling and remaining suspension should never rely on ambiguous shorthand.
Personalization can reduce information filtering.
Restore relevant context at entry, while preserving deeper Tournament exploration.
07 / Information architecture
The critical design work was in the relationships, not the screens.
A stable Player identity connects to one Team. That Team may enter multiple Tournaments, and each Match belongs to a specific Tournament context.
Player
→Team
→Tournament
→Match
Pivotal domain rule
Player + Tournament
Statistics, cards, disciplinary status, and eligibility belong to this relationship—not to the Player globally.
Clausura F8Suspendido
Apertura F8Habilitado
08 / User flows
Short paths for core jobs. Depth when the Player asks for it.
The conceptual flows translate the domain model into a simple navigation promise: Inicio answers “what matters now,” while Torneo opens broader exploration.
Next Match
Prepare to play
Open app→Personalized Inicio→Próximo partido→Match Detail
Eligibility
Understand status
Open app→Personalized Inicio→Eligibility→Disciplinary detail
Team performance
Read the season
Inicio→Team performance→Result / Posiciones
Tournament exploration
Go beyond my Team
Inicio→Torneo→Fixture / Posiciones / Goleadores / Fair Play
09 / Low-fidelity exploration
Three Home hypotheses exposed three different risks.
Rather than polishing the first answer, the early phase tested where urgency, context, and the football experience should compete for attention.
Home A / Hypothesis
Next Match First
- Benefit
- Strong Match priority.
- Risk
- Exceptional status could become too quiet.
Home B / Hypothesis
Status & Actions
- Benefit
- Clear urgent information.
- Risk
- Home could feel like an alert center.
Home C / Hypothesis
Balanced Dashboard
- Benefit
- Strong contextual overview.
- Risk
- Equal weight could weaken hierarchy.
Converged direction
Match-led adaptive Home
The structure stays familiar while its hierarchy responds to urgency.
Normal
Next Match dominates. Eligibility stays visible and quiet.
Exception
Tournament-specific suspension gains priority without displacing Match and Team context.
10 / Interactive low-fi
The wireframe became executable.
A coded low-fi made navigation, responsive behavior, and edge cases tangible before visual polish.
NavigationMatch statesPending dataDisciplinary statesTournament switchingResponsive behavior
11 / Design iteration
One direction established the system. The other gave it a point of view.
Design critique compared hierarchy, energy, typography, and product fit.
Direction 1
Refined Dark Sports
Established the dark foundation, token system, and product structure. Its denser containers and heavier type made the experience feel more rigid.
Direction 2
Electric Editorial Sports
More contemporary and distinctive: stronger editorial hierarchy, fewer cards, restrained type weights, greater brand energy, and a more memorable Match Hero.
12 / Design system
A compact system built around hierarchy and state.
Semantic tokens and repeatable patterns keep the experience consistent without turning every datum into a card.
Color roles
Brand
#FF4F00
#FF4F00
App
#07090D
#07090D
Eligible
Pending
Suspended
Type weight strategy
RegularSupporting information
MediumLabels and interaction
SemiboldImportant headings
BoldScore, Match time, critical status
Spacing
4px-based rhythm
Radius
Restrained, purposeful scale
Elevation
Selective, never structural by default
App Header·Tournament Context·Match Hero·Team Badge·Eligibility Status·Suspended Status·Team Performance·Stat with Icon·Section Navigation·Bottom Navigation
13 / Final experience
A mobile product that starts with the Player and expands into the Tournament.
Electric Editorial Sports brings Spanish LATAM language, Team identity, explicit states, and Match-first hierarchy into one coherent experience.
Selected outcome · Electric Editorial Sports
14 / State design
The system explains what is happening—not just what color it is.
Status language, hierarchy, and supporting detail work together so essential football states remain explicit.
Match
ProgramadoFinalizadoProgramación pendiente
Eligibility
HabilitadoSuspendido
Data
PendienteNo disponible
Pending
The object exists.
Information is known to be unresolved—for example, a confirmed Match with venue still pending.
Unavailable
The source has no value.
The product says “No disponible” rather than inventing or silently hiding information.
15 / Developer handoff
Design intent translated into implementation rules.
The handoff captures state behavior, data dependencies, interactions, accessibility, responsive constraints, and the domain rules implementation must preserve.
Design tokens
↓Components
↓Patterns
↓Production implementation
Behavior
Component states, navigation relationships, Tournament switching, and back-context preservation.
Data
Requirements by screen, Tournament-specific Player attributes, and pending versus unavailable values.
Platform
Responsive requirements and accessibility basics. CSS tokens can map into React Native, iOS, or equivalent production themes.
Final coded experience
Explore the interactive prototype.
Navigate the final mobile experience and explore the key Player flows.
Open prototype16 / Reflection
AI changed the pace—not the responsibility.
The workflow shortened the path from a question to a documented decision, interactive artifact, and implementation-ready system.
What AI changed
- Faster exploration
- Earlier interactive prototypes
- Easier visual comparison
- Shorter design-to-code loop
- Clearer iteration history
What remained designer-led
- Framing and prioritization
- Interpretation and critique
- Navigation decisions
- Final visual selection
What comes next
- Direct Player usability testing
- Production data integration
- Notification validation
- Technical implementation constraints