CASE STUDY / 04
tiivii Sports · Cinfo
Seguir el partido en cualquier pantalla.
Diseño UX/UI de una plataforma de deporte en directo y a la carta para web, iOS, Android y Android TV.
01 / INTRO
Una OTT para seguir el deporte en directo.
Durante seis meses colaboré con el equipo de producto de Cinfo en la evolución de tiivii Sports. Con el responsable de producto trabajé en dos alcances. El upgrade exploraba qué añadir a la experiencia de ver deporte. El downgrade acercaba esa propuesta a la base que el equipo ya tenía desarrollada y podía adaptar a otros clientes.
En 2024 volví a diseñar para tiivii. El encargo fue una portada web para Deporte Galego. El recorrido de producto que sigue corresponde al trabajo anterior en web, iOS, Android y Android TV.
02 / RETO
Encontrar un partido y seguir viéndolo al cambiar de pantalla.
Una emisión se podía buscar por horario, por deporte o por autor. El diseño tenía que dar respuesta a tres momentos distintos. Elegir qué ver, comprobar si se tenía acceso y continuar la reproducción mientras se exploraba el catálogo.
Con Cinfo trabajé en paralelo sobre la experiencia que permitía la base comercial y las funciones que el equipo de producto quería incorporar. En el player, esa diferencia de alcance era especialmente visible.
03 / ENFOQUE
Tres decisiones para organizar la experiencia.
Descubrir
El alta recoge preferencias. La agenda y las fichas ayudan a pasar de un interés a un encuentro concreto.
Reproducir
El partido se puede mantener a la vista al volver al catálogo. El upgrade explora qué participación cabe junto al vídeo.
Adaptar
En el televisor importa reconocer el foco. En una marca blanca cambian también la identidad, el catálogo y las categorías.
04 / SOLUCIÓN
Del primer registro al contenido.
4.1 / ALTA
Elegir qué seguir.
La propuesta web ampliada pedía elegir equipos por deporte y liga. En baloncesto, la selección llegaba a distinguir ACB, LEB Oro y LEB Plata. El diseño de la base comercial dedicaba otros estados del alta a escoger un avatar y revisar las condiciones antes de entrar. Son dos decisiones distintas. Una permite identificar al espectador y la otra, aprender qué quiere ver.
4.2 / DIRECTOS
Consultar el horario o explorar la cuadrícula.
En la propuesta web ampliada, el Campeonato de España Sub18 aparece sobre una agenda con horas y la acción «Crear aviso». En la base comercial, la pantalla de directos reúne las emisiones en una cuadrícula. Desde la ficha se puede consultar la información del contenido y recorrer sus episodios. La primera vista responde a «¿cuándo empieza?» y la segunda a «¿qué puedo ver?».
Una cuenta para seguir equipos y autores.
En iOS, la ficha de la Real Federación Galega de Fútbol reúne la acción «Hacerme fan», el apoyo al canal, los recomendados y los contenidos más vistos. En el perfil de usuario, otra mesa permite revisar los autores favoritos y eliminar uno de la lista. En la propuesta web ampliada, el perfil también daba acceso a las categorías de interés, el pack disponible y la activación de Smart TV.
4.3 / ACCESO
Entender qué incluye la suscripción.
En Android, la ficha presenta el encuentro y sus datos. Una vista de acceso restringido explica qué incluye el pack y conduce a la selección de plan. En web también se diseñaron los estados de confirmación y error de pago. Mostrar estas excepciones permite entender qué información recibe el espectador cuando reproducir exige un paso más.
05 / INTERACCIÓN
El partido, el catálogo y la participación.
5.1 / DOWNGRADE
El player en grande y minimizado.
En la versión comercial, el player servía para ver el partido en grande o seguir viéndolo en una ventana minimizada mientras se navegaba por el catálogo. Estos eran los dos estados de reproducción que ya funcionaban.
5.2 / UPGRADE · PROPUESTA
Un widget junto al partido.
Para el upgrade diseñé con el equipo una ampliación del reproductor. El vídeo queda a la izquierda y un panel a la derecha alterna entre conversación y timeline. Al revisar el chat con frontend trabajamos el interlineado para que cupieran más comentarios. Reservamos las etiquetas rojas para encuestas y acciones, de modo que se distinguieran de los nombres de los usuarios.
El timeline proponía votar y consultar puntuaciones durante el encuentro. En la maqueta, el anillo de favoritos reparte los votos entre Agustinos y BM Parla con valores de muestra de 43 y 57. El widget se quedó en diseño.
5.3 / MÓVIL
Volver al catálogo con el partido a la vista.
Diseñamos flujos específicos para iOS y Android. En ambos, minimizar el reproductor permitía volver a navegar con el partido todavía a la vista. El estado está dibujado en vertical para cada sistema. La propuesta de chat en móvil, en cambio, aprovechaba el formato apaisado para compartir el ancho con el vídeo.
5.4 / ANDROID TV
Elegir con el mando.
En el diseño de Android TV, abrir el menú despliega los nombres de las secciones. Al recogerlo, el catálogo recupera espacio y la tarjeta en foco se amplía para mostrar su descripción. Para el registro, la interfaz ofrecía un código y un QR con los que continuar en otro dispositivo.
06 / CONCLUSIONES
Qué se conserva cuando cambia el catálogo.
6.1 / WHITE LABEL
De tiivii Sports a irun.tv.
En la propuesta de irun.tv se reconoce esa base en el menú lateral, el destacado y las filas de contenido. Cambian la identidad y el catálogo. Junto a los contenidos municipales en castellano y euskera aparecen categorías de comercios y el acceso a irun.market. La adaptación alcanza qué se puede encontrar y cómo llegar a ello.
6.2 / DEPORTE GALEGO · 2024
Una plantilla para distintos encuentros.
En la portada, el partido destacado da paso a las categorías, los encuentros para ver y las filas por deporte. Un visitante puede entrar por un club que reconoce, por la competición que sigue o por una disciplina.
Diseñé las tarjetas para que una misma composición admitiera distintos encuentros. En la de Novo Basket Vigo y Ensino Lugo, el título, la fecha, la categoría y los dos escudos son elementos independientes. El escudo de Ensino conserva sus trazados vectoriales. Cambiar un rival o animar uno de los escudos podía hacerse sin rehacer toda la imagen. Esa separación dejaba preparada la plantilla para una futura composición automática.
La entrega al equipo de maquetación.
En octubre de 2021 compartí los archivos XD del player web para maquetación. Un compañero de diseño preparó la vista previa y marcó los recursos descargables para desarrollo. Las entregas del downgrade se organizaron por web, móvil y Android TV.
El alcance de cada pieza fue distinto. El player minimizado formaba parte del producto en uso. Las pantallas de participación documentan la siguiente evolución que propusimos. Y la portada de Deporte Galego muestra cómo retomé, tres años después, el diseño de una OTT deportiva desde su catálogo.