LAIC 2025

El proyecto no comenzó con un sitio web específico para el LAIC. La referencia disponible era más bien una fuente plana de contenido de una edición anterior del campeonato. La información existía, pero no estaba organizada como una experiencia web para esta edición.

Antes del diseño visual, el contenido necesitaba estructura. No había páginas internas claras para cada necesidad, una estructura dedicada a las categorías de competidores ni un sistema web del evento que aplicara la identidad visual de esta edición.

Karma Beam proporcionó el contenido del evento, referencias de eventos Pokémon y una guía básica de identidad de temporada. La guía definía la dirección visual general, la tipografía, el uso de personajes y los materiales de apoyo; extender ese sistema a una experiencia web completa fue parte de mi trabajo.

El reto principal era organizar una gran cantidad de información sin hacer que el sitio se sintiera pesado. Cada audiencia necesitaba información distinta:

• Competidores: reglas, formatos, registro, premios y detalles del torneo
• Espectadores: actividades, side events, transmisiones y datos de acceso
• Staff: una referencia rápida durante el evento

La investigación inicial fue práctica y estuvo conectada con los materiales del proyecto. Revisé:

• El contenido de referencia
• La guía de identidad de temporada
• Referencias oficiales de eventos Pokémon
• La información que Karma Beam necesitaba publicar para LAIC

Mi conocimiento de la escena competitiva de Pokémon ayudó durante el descubrimiento. Ya conocía los juegos, la comunidad, los formatos de torneo y el tipo de preguntas que los competidores suelen tener antes de un evento.

Combinado con el contenido y el feedback de Karma Beam, esto ayudó a organizar el sitio alrededor de necesidades reales de información sin plantear el proyecto como una investigación formal.

El hallazgo principal fue que cada usuario necesitaba caminos distintos. Los competidores llegarían con preguntas específicas sobre su categoría, reglas, requisitos, registro y premios. Los espectadores necesitaban entender actividades, side events, transmisiones y acceso. El staff necesitaba un punto de referencia público para responder preguntas frecuentes.

Esto definió la estructura inicial: en lugar de tratar el sitio como una sola página larga, separé el contenido en caminos más claros basados en la intención de cada usuario.

La primera decisión importante fue el sitemap. Como el contenido de referencia no estaba estructurado como un sitio dedicado, empecé por definir la navegación principal y la estructura de páginas internas. Esto se presentó temprano al equipo y se convirtió en la base del resto del proyecto.

La navegación separó el sitio en cuatro áreas principales:

• Acerca del evento: entrega de badges, accesibilidad, adaptaciones, FAQ y políticas clave
• Información para competidores: Pokémon VGC, Pokémon TCG, Pokémon GO y Pokémon UNITE
• Experiencia de fans: actividades, side events y transmisiones
• Registro: orientación para el registro de competidores y espectadores

Esta estructura hizo que el sitio fuera más fácil de ampliar. Una vez claros los grupos principales de contenido, pude definir patrones de página en lugar de diseñar cada pantalla como un layout aislado.

La estrategia se concentró en algunas decisiones clave:

• Usar la página de inicio como centro de resumen para registro, formatos de competencia, experiencia de fans, calendario, sede y mapa.
• Dar a las páginas de información para competidores una estructura compartida, con contenido específico para cada categoría y un patrón de lectura familiar.
• Tratar los side events como un componente de exploración en lugar de una lista estática.

Los side events necesitaban un enfoque distinto. Se agregaron durante una segunda etapa de contenido y reunían muchas actividades de distintas categorías y días. Una lista estática habría obligado a revisar demasiada información manualmente, así que los diseñé como un componente de exploración con búsqueda por palabras clave, filtros por categoría, tabs por día y varios modos de vista.

Después de definir el sitemap, creé wireframes de baja fidelidad con contenido real. Evité usar lorem ipsum porque el contenido era parte del problema de UX. El equipo necesitaba revisar no solo la dirección del layout, sino si la información estaba ordenada con claridad.

Una vez aprobada la estructura, pasé al diseño visual. Usé la guía de identidad de temporada como punto de partida y la extendí a una interfaz web completa: layouts, secciones, tarjetas, botones, patrones de navegación, bloques de contenido, estados y comportamiento de interacción.

La dirección visual debía sentirse conectada con los materiales oficiales de eventos Pokémon, que suelen hacer referencia a juegos, cartas y gráficos físicos. Al mismo tiempo, las secciones con mucho contenido necesitaban mesura. Las páginas de competidores priorizan encabezados, bloques modulares, listas y espaciado predecible para que las personas puedan escanear la información rápidamente.

El prototipo final se diseñó en Figma. Después refiné los detalles de interacción en código hasta que se sintieron naturales.

El sitio se construyó en Astro usando TypeScript, JavaScript, Stylus/CSS y GSAP para el movimiento. El contenido se administró mediante archivos JSON para mantener alineadas las versiones en inglés, español y portugués, permitiendo que cada idioma tuviera su propio contenido.

El proyecto también tuvo lanzamientos por etapas:

• Etapa 1: información principal del evento, Inicio, Acerca, Información para competidores, base de Registro y estructura general
• Etapa 2: Transmisión, Side Events y bloques adicionales de fechas de registro

Las decisiones relacionadas con accesibilidad incluyeron:

• Reducir el movimiento para mantener una experiencia consistente con otros sitios de eventos Pokémon
• Modo oscuro como preferencia adicional de lectura para una experiencia con mucho contenido
• Revisiones de contraste entre colores, fondos, tarjetas, texto, estados y patrones de ilustración

Durante la implementación revisé el contraste y el comportamiento del movimiento con herramientas de accesibilidad. Fue una revisión práctica de accesibilidad.

El sitio se lanzó en septiembre de 2025 y se utilizó durante el evento en noviembre. Antes del lanzamiento, pasó por QA y revisión de contenido con Karma Beam. Esto incluyó:

• Revisar el contenido directamente en el sitio
• Revisar las versiones de idioma
• Ajustar avisos, fechas e información del evento
• Hacer actualizaciones menores antes de publicar

El resultado fue un sitio en varios idiomas para el LAIC 2025 que dio a competidores, espectadores y staff una forma más clara de acceder a la información del evento.

Los competidores podían revisar información específica de su categoría, reglas, requisitos, registro y premios. Los espectadores podían explorar actividades, side events, transmisiones y detalles de registro. El staff tenía una referencia pública para responder preguntas frecuentes.

Como el proyecto no incluyó métricas públicas de rendimiento, el resultado se describe mejor en términos cualitativos: el sitio se lanzó, se utilizó durante el evento y fue bien recibido por el equipo de Karma Beam. La colaboración continuó para la siguiente edición.