KDA club de fans – Rediseño de la página Web
Videogame
Website
Responsive
UI/UX
Branding, consistencia e información estructurada, de un skit a una identidad.
Cliente: Grupo musical KD/A & Riot Games.
Rol: Diseñador UI/UX & Brand identity.
Industria: Entretenimiento, Videojuegos.
Herramientas: Figma.
¿Cual es el problema?
K/DA no es solo un grupo virtual, es un fenómeno global de cultura pop y moda. Sin embargo, los puntos de contacto digitales oficiales suelen limitarse a landings temporales que priorizan el skit promocional sobre la utilidad real. El problema radica en que los fans carecen de un ecosistema centralizado donde la narrativa, el contenido multimedia y el sentido de comunidad converjan bajo una experiencia de usuario coherente.
La información está dispersa en redes sociales, sin un «hub» que unifique la marca.
Interfaces planas y vacías o meramente publicitarias.
Una ausencia de una arquitectura de información que refleje el estatus «VIP» y de vanguardia del grupo.
Flujos de interacción básicos que no fomentan la retención ni el «engagement» del club de fans.
Objetivos de proyecto
Estructurar las diferentes facetas del grupo (música, biografía, tienda exclusiva y noticias) en una plataforma única, optimizando la arquitectura para una navegación intuitiva y fluida.
Crear un sistema de diseño (branding) que capture la esencia «Prestige» y vanguardista de K/DA, utilizando una estética neon-noir que se sienta como una extensión natural del grupo.
Reducir la fricción en el acceso a contenido exclusivo, transformando el flujo de navegación en una experiencia inmersiva y de fácil descubrimiento, tomando como referencia los estándares de aplicaciones de entretenimiento y moda de lujo.
Entendiendo al usuario
User research
Metodología
- Estudios de mercado.
- Recopilación de plataformas.
Conclusión
La investigación reveló que los fans tienen una relación con la marca que va mucho más allá de la música. Pero no se capitaliza en eso:
- Lore: Los fans no solo consumen canciones, consumen las identidades individuales de Ahri, Akali, Evelynn y Kai’Sa. Necesitan un espacio donde explorar biografías, estilos visuales y la evolución de cada «comeback» del grupo de forma profunda.
- El usuario busca sentirse parte de un club VIP. Esto implica tener acceso eficiente a galerías, discografía completa y lanzamientos de merchandising, evitando tener que buscar en sitios diferentes cada cosa.
Debemos ofrecer la densidad de información de una enciclopedia para fans con la estética de una revista de alta moda, eliminando la fricción visual y convirtiendo la navegación en una extensión de la experiencia musical del grupo.
Puntos de dolor
Fragmentación del Ecosistema:
El fan se ve obligado a saltar entre múltiples redes sociales, canales de video y wikis externas para obtener una visión completa de los lanzamientos y el «lore» del grupo.
Superficialidad de Contenido
Las plataformas oficiales actuales funcionan como carteles publicitarios temporales que carecen de profundidad.
Inconsistencia Visual y UX
Existe una desconexión entre la estética de «lujo y vanguardia» de K/DA y la funcionalidad real de sus sitios web.
Dificultad de Acceso Multimedia
Encontrar discografías detalladas, galerías de arte en alta resolución o créditos de producción es un proceso tedioso.
User Personas
Olga Seosa
22 AÑOS - ESTUDIANTE - LOJA - SOLTERA - UNIVERSITARIA
Chloe es una seguidora incondicional de K/DA desde su debut. No solo escucha la música, sino que consume todo el universo transmedia del grupo y busca constantemente arte de alta calidad para inspirarse y coleccionar.
Objetivos
- Obtener imágenes en alta resolución para sus cosas.
- Conocer el grupo en profundidad.
- Tener a mano la discografía completa.
- Notificaciones oficiales.
Frustraciones
- Contenido visual de mala calidad.
- Perdida de tiempo buscando información esparcida.
- Falta de identidad del grupo.
- Caducidad digital.
Elsa Pato
29 AÑOS - DIRECTORA CREATIVA - ALMERÍA - EN PAREJA - MÁSTER
Elsa analiza a K/DA como un referente de la industria del entretenimiento virtual. Necesita una plataforma profesional y eficiente para estudiar los créditos de producción, la estética visual y las tendencias que el grupo marca.
Objetivos
- Referenciación técnica
- Fluidezde navegación.
- Análisis de marca.
- Consumo prmium.
Frustraciones
- Interfaces infantiles.
- Dificultad de búsqueda.
- Navegación lenta.
- Datos inconsistentes.
User Flow
Empezando a diseñar
Las soluciones
Mira el prototipo de alta fidelidad
K/DA Home
El Home del Club de Fans de K/DA ha sido diseñado para funcionar como el portal definitivo al universo visual y sonoro del grupo. A diferencia de una web convencional, esta interfaz actúa como una extensión de su identidad, fusionando una estética «Liquid Glass», llena de transparencias y reflejos futuristas, con una estructura sobria y premium. El objetivo es que el usuario se sienta dentro de una experiencia de lujo digital desde el primer segundo, eliminando la barrera entre el fan y el ídolo.
El elemento central de la navegación es un Header sticky que garantiza el acceso inmediato a las diferentes secciones, acompañado de un Widget de audio integrado. Este reproductor dinámico, inspirado en patrones de plataformas como Spotify, permite que la música sea el hilo conductor de toda la navegación; el usuario puede explorar el sitio sin interrumpir la reproducción, creando una atmósfera auditiva inmersiva. Esta funcionalidad transforma el Home en un centro de escucha activo, priorizando el contenido principal del grupo: su música.
Como toque de exclusividad y conexión personal, el Home integra las firmas de las integrantes, reforzando el carácter oficial y »VIP» de la plataforma. Esta sección se complementa con un layourt de enlaces externos y redes sociales, diseñado para centralizar el flujo de tráfico hacia sus perfiles oficiales y tiendas. Al combinar estos elementos con un diseño que alterna entre el neón y la elegancia de los acabados oscuros, la pantalla de inicio no solo informa, sino que establece el estándar de calidad para el resto de elementos de la marca a los que navegan los enlaces.
Showroom Virtual
La sección de Outfits ha sido concebida como un lookbook interactivo, diseñado para visualizar la identidad individual de cada integrante de K/DA. En lugar de presentar una galería estática y convencional, esta sección se estructura como un showroom virtual donde el usuario puede explorar los distintos looks oficiales del grupo. El diseño utiliza una cuadrícula limpia de cuatro tarjetas principales, una para cada integrante, que funcionan como puntos de entrada directos a la estética particular de Ahri, Akali, Evelynn y Kai’Sa.
La interacción ha sido optimizada para ofrecer una experiencia de «descubrimiento inmersivo». Al seleccionar una de las tarjetas, la interfaz se transforma para mostrar el modelo detallado del personaje, permitiendo al usuario apreciar la complejidad de los materiales, las texturas y el diseño de vestuario que caracterizan cada era del grupo.
Para mejorar la navegabilidad, implementé un sistema de navegación lateral mediante flechas direccionales. Esta funcionalidad permite al usuario alternar entre los diferentes vestuarios de forma cíclica, mejorando el descubrimiento y el factor sorpresa, fomentando un flujo de exploración continuo y natural. Al integrar este sistema de control intuitivo con una estética que respira lujo y modernidad, la sección de Outfits deja de ser un recurso informativo para convertirse en una pasarela digital que satisface tanto la curiosidad del fan como la exigencia del entusiasta del diseño visual.
Diseño responsive interactivo
La adaptación de la plataforma K/DA a dispositivos móviles no se planteó como un simple reajuste de dimensiones, sino como una traslación estratégica de su identidad al formato vertical. El desafío principal residía en mantener la sofisticación del estilo Liquid Glass y la fluidez de las interacciones en pantallas reducidas, asegurando que los fans pudieran acceder a su club de fans con la misma intensidad visual desde cualquier lugar. El header persistente y el widget de audio se transformaron en elementos compactos pero altamente funcionales, garantizando que la música siga siendo el hilo conductor de la navegación táctil sin sacrificar espacio útil de pantalla.
Accesibilidad
Control de Animaciones y Estímulos Visuales
Dada la naturaleza energética de la marca, la web incluye transiciones y efectos dinámicos. Para proteger a usuarios con sensibilidad sensorial o trastornos vestibulares (mareos), integré un interruptor de «Reducción de Movimiento». Al activarse, se detienen los fondos animados y se simplifican las transiciones, ofreciendo un entorno estable y seguro sin perder la esencia premium del sitio.
Arquitectura Semántica para Contenido Multimedia
K/DA es una experiencia visual, por lo que el uso de imágenes y vídeos es masivo. Implementé un sistema de etiquetado descriptivo (Alt-text) detallado para todas las galerías y biografías. Esto permite que los lectores de pantalla traduzcan fielmente no solo la información, sino también la intención estética de las imágenes, permitiendo que los fans con discapacidad visual total puedan consumir el «lore» del grupo de forma autónoma.
Conclusiones
Los siguientes pasos
El rediseño del Club de Fans de K/DA representó el desafío de convertir un lienzo prácticamente en blanco, con toneladas de información de calidad, en una web completa y con sentido. El resultado final no es solo una interfaz visualmente impactante, sino una lanzadera sobre la que enviar a los fans a donde necesitan. He logrado eliminar la desconexión entre el fan y el universo transmedia de la banda, integrando música, lore y estética bajo un marco de diseño unificado.
Aprendizaje
Diseño de Prestigio y Jerarquía: Aprendí a equilibrar una estética visualmente densa (neones, texturas metálicas y efectos de brillo) con una legibilidad impecable. Entendí que en un entorno de lujo digital, el uso estratégico del espacio y una tipografía con carácter son fundamentales para gestionar grandes volúmenes de información técnica sin abrumar al usuario.
Diseño de inmersión: Comprendí que un club de fans no debe ser una enciclopedia estática, sino una extensión de la identidad del grupo. Los fans tienen hábitos de consumo emocional; si tuviese que realizar el proyecto de nuevo, añadiría más micro-interacciones gestuales que refuercen la sensación de estar interactuando con un grupo de alta clase.
Siguientes Pasos (Roadmap)
Integración Multimedia y AR: En una segunda fase, conectaría la plataforma con APIs de servicios de streaming y desarrollaría un visor de Realidad Aumentada (AR). Esto permitiría a los fans visualizar los modelos 3D de las integrantes y sus trajes icónicos directamente desde la web, llevando el coleccionismo digital a un nuevo nivel.
Este proyecto demuestra que la presencia digital de una marca virtual debe ser tan disruptiva y pulida como su arte. Con una arquitectura sólida y un branding audaz, es posible transformar una simple página de fans en una experiencia de usuario premium que se siente tan profesional como una revista de moda internacional, pero tan vibrante como un concierto en vivo.