Antecedentes

CADENA 100 es la principal emisora musical del Grupo COPE (COPE, CADENA 100, RockFM 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 cadena100.es y la app.

El primer problema que tenía cadena100.es 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.

Diseño web desktop CADENA 100 antes del rediseño 2019

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.

El segundo problema que tenía la web de CADENA 100 es que se trabajaba únicamente como un contenedor para publicar lo que se emitía en la radio. 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 cadena100.es estaban claros: había que diseñar una web 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.

A principios de verano de 2018, con el diseño de la web y la app de COPE en fase de maquetación y desarrollo, el equipo de diseño compuesto por COPE y KEC empezamos a trabajar en el rediseño de cadena100.es. 

Teníamos de nuevo un reto importante, ya que la web debería estar publicada a final de año. De nuevo volvíamos a tener menos de 8 meses para llevar a cabo todo el proyecto.

La dirección tenía también claro en este caso qué quería. Una web y una app que mantuviese los colores y las señas de identidad de una marca tan consolidada como CADENA 100. Manteniendo el valor que aporta a su público objetivo durante todo el día y especialmente por las mañanas con su morning show ¡Buenos días, Javi y Mar! Además que fuese usable y con un diseño atractivo y moderno.

Proceso

Con esas premisas hicimos varios workshop entre el equipo de CADENA 100, directivos y responsables de negocio, equipo técnico y equipo de diseño, y el equipo de diseñadores e investigadores de UX y UI de KEC. En los workshop nos dedicamos en primer lugar a plasmar con ideas, cómo podríamos materializar las necesidades que teníamos.

Para el rediseño de cadena100.es aplicamos Design Thinking centrándonos más aún en el usuario. Entre todo el equipo dividimos las funcionalidades que tenía que tener la web entre pos-it de un color para las cosas importantes y de otro color para las menos importantes. Siempre pensando en la persona y en las historias de usuario que representan el oyente de CADENA 100.

Cuando todos dividimos las propuestas de funcionalidad con la importancia que estimamos, cada uno puso pegatinas con puntos en lo que le parecía más importante para esa persona. Con este sencillo método pudimos ver qué funcionalidades tenían más importancia para la persona que creamos. Y establecer hipótesis de uso y prioridades para poder hacer un MVP (Producto Mínimo Viable).

Como siempre, el primer reto era abordar la home, el player y el detalle de noticia. Estos tres elementos son fundamentales en un proyecto de un medio de comunicación. Yo siempre digo que una vez consigues tener claras estas partes, ya tienes más de medio proyecto hecho.

Diseño UX UI de la home desktop de cadena100.es
Home

La página de inicio es importante para un medio de comunicación porque es la carta de presentación de todos los contenidos disponibles, así como en el caso de la radio, invitar a escuchar el directo.

Por este motivo había que cuidar la imagen de la portada principal a pesar de que actualmente con el posicionamiento en Google y las redes sociales, los usuarios acceden menos al contenido de forma directa.

Para el rediseño de cadena100.es diseñamos un módulo superior de directo en la home diferente al de COPE que contempla varias emisiones. En la apertura con la invitación al player de cadena100.es podíamos usar todo el ancho de la grid para presentar el programa y la canción que estaba en emisión.

También teníamos que mostrar la canción y el artista que estaba sonando en ese momento en la emisora musical. Para ello diseñamos la foto y la información del artista y la canción uniendo la gran apertura del programa en emisión con los módulos de la portada.

Player

Para el rediseño de cadena100.es tuvimos de nuevo el debate, como con COPE, acerca de hacer o no una SPA (Single-Page Application) completa para toda la página. De esta forma el usuario podría seguir escuchando la emisión musical sin que se cortase a la vez que podría navegar por el site leyendo y consumiendo contenidos.

En este caso al ser una web con menos profundidad y contenidos que COPE conseguí convencer al equipo técnico en favor de una mejor experiencia de usuario. Esto conllevó una innovación para todo el equipo. El equipo de maquetadores y desarrolladores de Agile Content estudió el funcionamiento de la librería de JavaScript React para conseguir la web completa mediante SPA. De esta forma, la web carga correctamente todo el contenido mientras escuchas la mejor variedad musical.

A las referencias de players que teníamos para COPE añadimos otras muchas (*anexo) para el rediseño de cadena100.es.

De ellas, destaco el player de la radio pública de Nueva York https://www.wnyc.org o el de Z100 New York de I Heart Media, el grupo radiofónico con más emisoras de Estados Unidos. Ambos anclados al bottom. Para la versión mobile también nos inspiramos en apps de música como Spotify, Apple Music, Deezer o Souncloud, así como en el player de BBC Radio “Sounds”, estrenado recientemente.

El player se compone de dos partes: un player mini anclado al bottom, en el que se muestra la información básica del programa y la canción o el audio o vídeo on demand; y otra versión extendida en el que se multiplican la funcionalidades.

Diseño UX UI del player en directo desktop de cadena100.es
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 COPE al UI de CADENA 100. Así aprovechábamos parte de los desarrollos y funcionalidad de COPE pero dentro del ecosistema de CADENA 100.

Diseño UX UI de la noticia en móvil de cadena100.es
Galerías

En cuanto a las galerías, en un medio de comunicación son también importantes porque se consumen bastante. De cualquier evento o hecho noticioso puedes generar una galería de fotos.

Así que diseñamos unas galerías que tenían 4 modos de visualización en desktop: ancho completo con carrusel; imagen y texto lateral; miniaturas e imagen; y texto de forma vertical. En móvil solo mantuvimos por funcionalidad la primera y la última.

Diseño UX UI de la galería desktop de cadena100.es
Artistas

El rediseño de cadena100.es 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 web.

Diseño UX UI de la página de artista desktop de cadena100.es

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 artista puedes acceder a su página personal. En ella se encuentran noticias relacionadas del artista o banda, la biografía o la historia del grupo. Además de una sección multimedia en la que se agrupan imágenes, galerías, vídeos, etc.

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í se puede seguir los contenidos del artista. La variedad musical de CADENA 100, como indica su eslogan, hace que puedas encontrarte diferentes artistas. Desde 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.

Diseño UX UI de la página de artista desktop de cadena100.es
Página de programa

También queríamos darle protagonismo a todos los locutores que forman el elenco de esta radio musical, sin los que esta radio no tendría sentido.

Para ello se diseñó una página especial para los programas de CADENA 100. Realmente como programas en sí, solo existen dos. El morning “¡Buenos días, Javi y Mar!” con Javi Nieves y Mar Amate y “CADENA 100 Happy Hours” con Almudena Navarro.

Aún así, al resto de horas de radiofórmula con locutores se les dio el mismo tratamiento con una cabecera con su imagen y acceso a las diversas secciones. Además de una portada con un contenedor de noticias y unos puntos de menú de cabecera con un listado con sus audios y podcast. 

Diseño UX UI de la página de programa desktop de cadena100.es

Una vez entregada la maquetación y el desarrollo del rediseño de cadena100.es en preproducción, mi trabajo también consistía en hacer el proceso de calidad. 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 rediseño de cadena100.es usamos Sketch como herramienta de diseño de wireframes y diseño high-fidelity. Usamos InVision 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 maquetación y desarrollo.

Datos y resultados

El rediseño de cadena100.es se puso en producción el 15 de enero de 2019, con algo más 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 su hermana informativa cope.es.

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.