Antecedentes

CADENA 100 es la principal emisora musical del Grupo COPE (COPE, CADENA 100RockFM y MegaStar). Es la quinta emisora de radio más escuchada en España y la tercera en radio musical con 2.126.000 oyentes diarios después de Los 40 y Cadena Dial.

¡Buenos días, Javi y Mar!, el morning de la emisora, suma 1.453.000 fieles y recorta distancias con Anda Ya, el morning de Los40. Cuya ventaja se reduce a 84.000 personas, según la 3ª ola de 2018 del EGM (Estudio General de Medios).

Problemas y objetivos

A mediados de 2018, tras el lanzamiento de la web y la app de COPE empezamos a trabajar en el rediseño de la web y la app de CADENA 100.

El primer problema que tenía la app es que era poco usable y nos limitaba a la hora de escalar y crecer masivamente en usuarios únicos.

Probablemente, nuestra audiencia ya estaba acostumbrada y conocían dónde estaba el contenido que querían escuchar, pero no tenía una usabilidad suficiente para captar y retener nuevos usuarios.

Además, el diseño y el funcionamiento ya se habían quedado obsoletos, incluso llegando a fallar los directos o los audios de los programas, creando una frustración en el usuario.

Diseño app de CADENA 100 antes del rediseño 2019

El segundo problema que tenía la app de CADENA 100 es que se trabajaba únicamente como un contenedor para publicar lo que se emitía en la radio. Y casi como un transistor digital usado para escuchar el directo.

Restando el posible tráfico que pudieras conseguir tratando otros temas noticiosos o de interés para su audiencia potencial.

Así que los objetivos del rediseño de CADENA 100 estaban claros: había que diseñar una una app con buena usabilidad y un diseño moderno que permitiera crecer y consolidar usuarios únicos para convertirse en un medio de comunicación propio, al margen de los contenidos de la radio.

Planteamiento

Para mejorar la experiencia de usuario (UX) y la interfaz de usuario (UI) el grupo confió nuevamente en mí y me puse a cargo de la dirección de diseño de producto del proyecto.

En octubre de 2018, empecé a trabajar con el equipo freelance de diseño de Icinetic, el proveedor que nos desarrolla las aplicaciones. Con ellos, junto con todo el equipo de COPE y CADENA 100 involucrado en el proyecto empezamos a pensar cómo sería la nueva app de CADENA 100.

Teníamos un gran reto porque la web y la app se publicaban en diciembre. En el caso de la app se empezó más tarde al estar desarrollando la app de COPE, así que teníamos poco más de dos meses para lanzar la app de CADENA 100, de nuevo un reto aún mayor para todo el equipo.

Además, la app tenía una dificultad añadida y es que todos los servicios para que funcione se extraen mediante API’s de la web. Así que el proveedor de la web tuvo que desarrollar la web y desarrollar estas llamadas para servir de contenido a la app. Un trabajo de mucha coordinación.

La dirección tenía muy claro lo que quería: una app con los colores vivos y característicos de CADENA 100; poder dotar la app de noticias interesantes para el target de la emisora; un player muy funcional y fácil de usar; y poder tener herramientas nativas que no están disponibles en la web como despertador, temporizador, alertas, etc.

Proceso

En este caso quién se metió de lleno en el proyecto de diseño por parte del equipo de diseñadores de Icinetic fueron Fátima Rodríguez y Rosario Marín, de Anagrama, durante el inicio del proceso que mantuvimos el proyecto en paralelo junto con el de COPE.

Más tarde, cuando el diseño de la app de COPE pasó a la fase de desarrollo, se incorporaron los diseñadores freelance Paco Soria y Juan Luis González. Un equipo de 4 diseñadores trabajando a pleno rendimiento para cumplir el plazo de hacer la app en poco más de dos meses. 

Ellos iban diseñando pantallas siguiendo nuestro orden de prioridad mientras el proveedor de la web desarrollaba su interface, para ir alineados. En este caso no me presentaban los diseños cada semana como en COPE, los poco más de dos meses para poner la app en producción nos obligaron a tener entregas y validaciones diarias.

Ellos me presentaban los diseños y yo revisaba que todo estuviera correcto según las peticiones y el enfoque que teníamos. Más tarde yo presentaba los diseños al equipo directivo para hacer ajustes o dejar validadas las pantallas. El equipo técnico estaba involucrado en todo momento en el diseño y en los feedback que nosotros lanzábamos, a la vez que ya iban preparando el desarrollo.

Nos planteamos una app que se distribuyera en cuatro tabs inferiores que fuesen: inicio; Javi y Mar, el principal programa de la radio; actualidad; y el menú. Ya que teníamos espacio, metimos el menú en la última tab así dejamos más liberado el espacio de la cabecera, y facilitamos al usuario una pulsación más cómoda.

Al igual que en la web en las pantallas más importantes en una app de un medio de comunicación son la home, la noticia y el player.

Diseño UX UI de la home de la app de CADENA 100
Home

Como teníamos los diseños de la web antes de empezar con el diseño de la app compartimos con el diseñador los diseños para que supiera qué queríamos. La home iba a ser una réplica de la de la web.

Los módulos iban a ser lo mismos porque al estar conectada con la web iban a aparecer los mismos módulos con el mismo contenido que en la web.

Así que se hizo un diseño similar a la versión mobile de la web cambiando el estilo: colores, tipografías y estilos básicos de UI como flechas, botones y demás elementos.

Diseño UX UI de la home y el UI general de la app de CADENA 100
Player

El player es una de las pantallas más importante de la app, donde ocurre todo. Se divide en dos partes: el player mini, situado en el bottom en la home y en todas las pantallas que no sean de configuración de la app; y el player extendido, que se activa al pulsar o deslizar sobre el player mini.

El player mini tiene la imagen del locutor que esté haciendo el programa en directo en ese momento, el nombre del programa y del locutor, así como la canción y el artista que están sonando. Además del play para activar o pausar la reproducción y el directo y la flecha para indicar que el player se extiende hacia arriba. 

Una vez extendido el player, nos encontramos de nuevo la información y la imagen del programa que está en directo. Esta información se ha desplazado de la parte inferior del player mini a la parte superior del player extendido.

A continuación, tenemos de forma muy destacada, por la importancia que tiene la música y los artistas en CADENA 100, la imagen del artista que está sonando en ese momento en la radio.

Diseño UX UI del player de la app de CADENA 100
Noticia

Debido al poco tiempo del que disponíamos para conceptualizar, diseñar y desarrollar decidimos que podríamos adaptar el diseño de la noticia de la web de CADENA 100 para el rediseño de la app de CADENA 100. Así aprovechábamos parte del UI y funcionalidad de la web pero dentro del ecosistema de la app.

Diseño UX UI de una noticia en la app de CADENA 100
Artistas

El rediseño de CADENA 100 necesitaba también tener cierta personalidad como radio musical. Una parte fundamental de esta emisora es la gran cantidad de artistas españoles que ha dado a conocer desde sus inicios en los años 90. Esa especial atención y mimo por los artistas de CADENA 100 también se tenía que ver reflejado en la app.

Construimos una sección específica, un buscador. En el que puedes localizar a cualquier artista o banda que suene o haya sonado en la historia de la emisora. Una vez seleccionado cada artistas puedes acceder a su página personal en la que encontrarás noticias relacionadas con el artista o banda, la biografía o historia del grupo y una sección multimedia en la que se agrupan imágenes, galerías, vídeos, etc.

Además, en todas las noticias publicadas en la web relacionadas con los artistas, aparece al final de la noticia, la imagen del artista que enlaza con su página personal. Así podrás seguir los contenidos del artista que tanto te gusta.

La variedad musical de CADENA 100, como indica su eslogan, hace que puedas encontrarte desde artistas españoles como Malú o Pablo Alborán; grupos míticos como Aerosmith o Black Eyed Peas; o artistas de música electrónica como Avicii, David Guetta o Robin Schulz.

Otros diseños (funcionalidades nativas)

Otros diseños que se hicieron en el rediseño de la app de CADENA 100 y también son exclusivos de la app son los de las funcionalidades nativas de alertas, temporizador y despertador.

Una vez entregada la maquetación y el desarrollo de la app en preproducción, mi trabajo también consistía en hacer el proceso de calidad y revisar cualquier cosa que no estuviese como estaba planteado en diseño.

Detectar errores de funcionamiento y experiencia de usuario o detalles de diseño que no estaban bien acabados eran las tareas principales en este proceso. Algunos de estos detalles aún no se han corregido por el equipo de desarrollo pero están recogidos y entregados.

Herramientas

Para hacer el diseño de la app usamos Sketch como herramienta de diseño de wireframes y diseño high-fidelity. Usamos Marvel para subir los diseños, presentarlos en las reuniones y obtener las validaciones del equipo directivo. Por último, usamos Zeplin para subir los diseños y pasarlos al equipo de desarrollo.

Datos y resultados

El rediseño de la app de CADENA 100 se puso en producción el 24 de enero de 2019, con menos de un mes de funcionamiento es imposible medir la repercusión y saber si el cambio es aceptable.

Aunque habiendo crecido el primer mes un 50% y teniendo en cuenta algunas críticas positivas recibidas, da que pensar que será un éxito y que podrá tener un crecimiento exponencial prácticamente igual al de la app de COPE. Usuarios, trabajadores y directivos están muy satisfechos con el resultado.

No obstante, aún queda mucho por desarrollar de lo que se diseñó originalmente, y se realizará en siguientes fases.