Antecedentes

Cadena COPE es la emisora generalista del Grupo COPE (COPE, CADENA 100, RockFM y MegaStar). Es la tercera emisora de radio más escuchada en España y la segunda en radio generalista con 2.716.000 oyentes diarios después de Cadena SER y Los 40, según la 3ª ola del EGM (Estudio General de Medios).

En el ámbito digital la distancia con el primer competidor, Cadena SER, era más amplia, pero también ha mantenido durante meses la segunda posición con 1.200.000 usuarios únicos al mes, según el medidor oficial de audiencias digitales en España: comScore.

Problemas y objetivos

A finales de 2017, el departamento digital cambió su estrategia y se inició el proyecto para el rediseño de cope.es y la app de COPE y hacerlas más modernas y usables. Había dos problemas principales en las soluciones digitales que teníamos.

El primer problema que tenía la web 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 COPE antes del rediseño 2018

El segundo problema que tenía el área digital es que se trabajaba en la web y en la app principalmente como un contenedor para publicar lo que se emitía en la radio, y en menor medida como un medio de comunicación en sí.

Así que los objetivos del rediseño de cope.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ó en mí y me puse a cargo de la dirección de diseño del proyecto. A principio de 2018, empecé a trabajar con KEC (KingEClient), una agencia de diseño UX y UI de Barcelona con presencia internacional. Con ellos, junto con todo el equipo de COPE involucrado en el proyecto empezamos a pensar cómo sería el rediseño de cope.es.

Teníamos un gran reto porque la web y la app se publicaban en agosto. Menos de ocho meses para lanzar ambas plataformas al completo nos obligaba a trabajar a gran velocidad.

La dirección tenía muy claro lo que quería: una web con mucho predominio del blanco, grandes espacios para que respirase el contenido y que fuese muy usable.

Proceso

Con esas premisas hicimos varios workshop entre el equipo de COPE, 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.

Siempre lo hacemos, así que nos plantemos como primer reto 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. 

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.

Mac Book Pro con diseño UX UI de la home de cope.es en versión desktop

Analicé multitud de webs (*anexo home) y finalmente seleccioné tres en las que innovaban de forma creativa a la hora de construir los módulos de la portada principal. The Intercept tiene una forma creativa de presentar los módulos de noticias y los titulares de secciones. 

Radio Nova, la emisora francesa de música underground de varios estilos, presenta de forma creativa las noticias en su portada con imágenes y cajas de titulares fuera de grid. Igual que hacen los verticales de la NBC: Mach, Think y Left Field.

Finalmente, la dirección veía demasiado innovador para la audiencia de COPE estos ejemplos y dibujamos los wireframe con un diseño más convencional. Diseñamos el catálogo de módulos de la portada principal estableciéndolos según el sistema de 12 columnas de bootstrap.

También pintamos el módulo de en vivo en la parte superior. Este módulo indica qué programa se está emitiendo en audio o en vídeo, cuáles son los audios destacados de ese momento y qué programas se han emitido y se van a emitir.  

Player

El player es la página más importante en una web de una emisora de radio. Es la página donde puedes reproducir el directo de la radio por streaming y también escuchar o ver los audios y vídeos on demand.

Después de una amplia búsqueda por diferentes webs de emisoras de radio (*anexo player), seleccioné cuatro webs de referencia en cuanto a player por su diseño y experiencia de usuario. Estas webs utilizan la tecnología SPA (Single-Page Application) que permite navegar por diferentes páginas de la web sin que se corte la reproducción del player.

Mac Book Pro en el que se ve el diseño UX UI desktop del player de cope.es

La radio pública sueca Sveriges Radio tiene toda su web con esta tecnología y tiene el player anclado en el top. Además tiene la capacidad de poder retroceder directamente desde la emisión lineal del directo. La web de la radio pública danesa DR tiene una SPA parcial, y tiene el player anclado al bottom.

Radio Nova, funciona también con tecnología SPA en toda la web y un player anclado al bottom. Además, tiene una forma bastante creativa de mostrar las frecuencias de sus emisoras. WNYC, la radio pública de Nueva York, también tiene una web SPA y el player anclado en el bottom. En España, RTVE tiene una versión reducida de SPA en la página de RNE.

El departamento técnico evaluó el funcionamiento de la SPA y nos desaconsejó desarrollarlo para toda la web debido al tamaño y profundidad de contenidos de cope.es y a posibles problemas con la inserción de la publicidad. Ya que todos los ejemplos vistos de SPA eran webs o apartados con menos contenido y sin publicidad.

Yo era partidario de hacer una SPA completa en beneficio de una mejor experiencia de usuario, pero finalmente acordamos hacer una SPA en la página del directo. De esta forma podríamos tener el player en directo y on demand de audio y vídeo, así como poder navegar por los contenidos de esta página mientras se reproduce el player.

iPhone en una mesa con el diseño UX UI del player de cope.es en versión mobile

Personalmente, me convencía más el player anclado al bottom pero la dirección decidió ponerlo anclado al top, así que el equipo de diseño nos centramos en diseñar un player con todas las funcionalidades. El reproductor debería soportara varios directos simultáneos de audio y de vídeo, tener un buscador y selector de emisoras locales, y el módulo de contenido de la SPA.

Este módulo cambiaría automáticamente con el programa que está en directo colocando los contenidos del programa en emisión. Finalmente, tras probarlo unos meses y después del diseño aplicado a las emisoras musicales del grupo, anclamos el player al bottom.

Noticia

A pesar de que la noticia es uno de los diseños fundamentales en una web de un medio de comunicación, por su diseño más clásico y parecido al resto de medios he preferido destacar otras partes en las que se trabajó de forma más creativa.

Podcast

Es posible que los podcast sean la cuarta pantalla más importante en la web de una radio. Además, están viviendo un momento dulce, desde que empezaron a producirse podcast de ficción como el americano “Serials”, o el podcast de información política que se graba en un garaje de Estados Unidos y que consiguió entrevistar a Obama.

En España, la puesta en marcha de plataformas nativas de podcast está ayudando a potenciar los podcast. Algunos ejemplos son “Podium Podcast”, de Prisa Radio; la existencia de la catalana Ivoox, que existía antes de esta explosión de podcast; o “Sin mi identidad”, el podcast de ficción emitido en COPE el pasado verano de 2018. Todos estos ejemplos auguran un futuro brillante para el podcast.

Algunos expertos lo califican como el salvador de la radio del siglo XXI.

Mac de sobremesa y iPhone con el diseño UX UI desktop y Mobile del diseño de Podcast de cope.es
Mac de sobremesa y iPhone con el diseño UX UI desktop y Mobile del diseño de Podcast de cope.es

Hay cierta confusión en la industria con el término podcast.

Antes de que existiesen estos podcast producidos al margen del ámbito radiofónico más estricto, el usuario tenía en su imaginario que un podcast era el fragmento de programa de radio que se cortaba y se subía a la web o a plataformas como iTunes e Ivoox. Para consumirse en otro momento, a la carta. Término que acuñó la web de RTVE cuando puso en marcha esta posibilidad con la radio y la televisión.

Hoy en día, un podcast puede ser algo más que un fragmento de radio editado. Pero, ¿cuál de los dos formatos se queda con el término podcast? Pues parece que ambos. Y esto provoca en el usuario un tremendo lío. Desde COPE siempre hemos intentado, aunque no es fácil, acuñar el término podcast a los formatos hechos exclusivamente para su consumo online y que no son emitidos en antena.

Hacer esto es difícil cuando llevas tanto tiempo llamando podcast al fragmento de radio, y ahora se le intenta llamar audios de un programa, últimos programas, horas completas y un sinfín de nombres a gusto de la directiva de turno.

Con esta premisa, para el rediseño de cope.es dejamos los fragmentos y horas completas de los programas dentro de sus páginas de programas. Diseñamos una página de podcast para alojar todos los programas, de entretenimiento o ficción, que se generasen exclusivamente para el ámbito digital. Se trabajó con dos modelos de inspiración, que en mi opinión son los mejores: iTunes y su modelo de carrusel por temáticas y Netflix y la forma de presentar los capítulos en su aperturas a ancho completo.

Se diseñó una gran apertura, en un principio se probó a hacerla al ancho completo de la página. Quedaba muy bien con una buena imagen, como pasa en Netflix. Pero siendo realistas no siempre el redactor que hace el podcast y sube su contenido al CMS va a elegir una fotografía idónea, con una buena resolución para que quede bien.

Así que se optó por limitar la apertura al ancho de la grid, en este caso a 996px. En esta apertura que tiene una imagen de fondo, aparece el nombre y la descripción del podcast y el título y descripción del último capítulo publicado. Así como dos botones para escuchar y para añadirlo a tu playlist.

Además, esta apertura tiene funcionalidad de carrusel y puedes ir pasando entre los últimos capítulos de podcast destacados.

Si seguimos haciendo scroll en la página nos encontramos con una serie de carruseles en los que se organizan por categorías o temáticas los diferentes podcast. Existe un desplegable con la opción de poder ordenarlos por relevancia, favoritos o fecha. Y la información de cada podcast que aparece es la imagen, el título del podcast y el título del capítulo.

Otra cosa que se tuvo en cuenta fue si manteníamos el estilo light de toda la web o por el contrario hacíamos un salto cromático y conseguíamos un estilo dark, con negros y grises. De nuevo la diferencia entre iTunes (blanco) y Netflix (negro).

Finalmente elegimos el negro, ya que nos gustaba que esta pantalla fuese diferente, queríamos diferenciarla del resto para enfatizar más el contenido. Además, considerábamos que el negro podría convivir bien ya que no es una página que necesites pasar mucho rato viéndola y leyéndola como puede ser la página detalle de una noticia.

Otros diseños (galerías y menús)
Mac de sobremesa y iPhone mostrando el diseño UX UI desktop y mobile de las galerías de cope.es

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 para el rediseño de cope.es creamos unas galerías que tienen 4 modos de visualización: en desktop, ancho completo con carrusel, imagen y texto lateral, miniaturas e imagen y texto de forma vertical y en móvil solo mantuvimos por funcionalidad la primera y la última. 

Menú

Con el menú también hicimos una apuesta diferente para el rediseño de cope.es. Yo era partidario de diseñar un menú hamburguesa en el que desplegase y mostrase todas las opciones de forma creativa. Además, así sería más fácil llevarlo de forma responsiva al diseño móvil. La dirección finalmente quería un menú clásico con los elementos desplegados en la cabecera.

Con este punto de partida diseñamos un menú con una capa horizontal que caía de cada opción personalizada y dividida en tres grupos de columnas, dependiendo en qué sección te encontrases. En la de programas con el listado de programas de antena y los de internet. El de deportes con todos los deportes, categorías y competiciones y el de actualidad con todas las secciones editoriales.

Además, en la mayoría se reservaban la últimas cuatro columnas para poner la última noticia publicada de ese apartado. En móvil y en la versión AMP tenía que ser más sencillo, así que optamos por aligerarlo y tener todo el contenido pero de una forma más sutil.

Proceso de calidad

Una vez entregada la maquetación y el desarrollo de la web en preproducción, mi trabajo en el rediseño de cope.es 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 cope.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

Sin tener un estudio exhaustivo, recibimos buenas críticas del diseño y usabilidad del rediseño de cope.es.

Tuvimos solo dos quejas por parte de los usuarios. La primera fue por una decisión de negocio de quitar la posibilidad de descargar los audios y los podcast de la web y la app. Ante las quejas de los usuarios tuvimos que volver a poner la función.

La segunda fue por quitar la función de temporizador de apagado y ponerla en al menú. Los usuarios no la encontraban en el menú y para facilitar la activación volvimos a ponerla en el player.

En cuanto a datos, desde diciembre de 2017 hasta diciembre de 2018 la web y la app tuvieron un crecimiento del 208%, convirtiéndose cope.es y la app en el medio digital de un medio de comunicación que más creció en 2018. En diciembre de 2018 alcanzó los 4.134.000 usuarios únicos según comScore, el medidor de referencia en el mercado digital.

Gráfico de usuarios mensuales de Cadena SER, COPE y Onda Cero en 2018 según comScore

Estos datos se consiguieron gracias a las mejores técnicas que se implementaron en las plataformas en los primeros ocho meses de 2018 y. Gracias también, al rediseño de cope.es y la app de COPE que se lanzó a finales de agosto. Como se puede ver en el gráfico, después de la bajada propia del verano, la audiencia siguió subiendo hasta batir un récord histórico.

Con estos datos, usuarios, trabajadores y directivos están muy satisfechos con el resultado del rediseño. No obstante, quedan algunas funcionalidades por desarrollar, de lo que se diseñó originalmente, y se realizarán en siguientes fases.