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 rediseñar la app de COPE y hacerlas más modernas y usables. Además, había dos problemas principales en las soluciones digitales que teníamos.

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.

Diseño app de 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 la app de COPE estaban claros: había que diseñar 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ó en mí y me puse a cargo de la dirección de diseño de producto del proyecto. A principio de 2018, empecé a trabajar con el equipo freelance de diseño de Icinetic, el proveedor que nos desarrolla las aplicaciones. Con ellos empezamos a pensar cómo sería el rediseño de la app de COPE.

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. 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 mucho predominio del blanco; 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

El diseñador de UX y UI freelance Paco Soria fue el primero que empezó con el diseño de la app de COPE. Él iba diseñando pantallas de la app siguiendo nuestro orden de prioridad de la web para ir alineados.

Cada semana él me presentaba los diseños y yo revisaba que todo estuviera correcto según las peticiones y el enfoque que teníamos. Más tarde presentaba en una reunión, con el equipo técnico y directivo, los diseños para hacer ajustes o dejar validadas las pantallas.

Nos planteamos una app que se distribuyera en cuatro tabs inferiores que fuesen: inicio, programas, noticias y menú. Ya que teníamos espacio, metimos el menú en la última tabs 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, las pantallas más importantes en una app de un medio de comunicación son la home, la noticia y el player.

iPhone con el diseño UX UI de la home de la app de COPE
Home

Como teníamos los diseños de la web antes de empezar con el rediseño de la app de COPE 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.

Player

El player es la pantalla que más difiere del diseño mobile de la web. Al estar en una aplicación nativa, podíamos aprovechar para tener más funcionalidad. Planteamos un diseño modular con 4 apartados.

En primer lugar, aparece en la parte superior derecha el selector de emisoras con el que se puede elegir la emisora de la provincia que quieras escuchar en el player.

A continuación tenemos el primer gran módulo en el que aparece la tarjeta con la imagen y la información del programa.

Justo debajo, colocamos la línea de progreso tanto del directo como de un audio o vídeo on demand. Anclado con la línea de progreso vemos los últimos audios que ha generado el programa, por orden cronológico. Directamente pulsando sobre uno de estos audios puedes reproducirlo en el player general.

El siguiente módulo se divide en tres pestañas: directos, en el que aparecen los directos alternativos disponibles en ese momento además de los próximos directos; destacados, en la que aparecen los mismos audios destacados que aparecen en el player de la home de la web; y mi playlist, en la que aparecen los audios que has ido enviando a tu playlist desde toda la app.

iPhone con el diseño UX UI del player de la app de COPE

En la parte inferior encontramos los controles de reproducción del player y el botón de opciones.

Uno de los cambios que realizamos post salida en el player fue incluir el temporizador de apagado. Lo teníamos en el player en la versión anterior y en esta lo quitamos del player para hacerlo más limpio. Lo pusimos en el menú, pero varios usuarios nos lo reclamaron de nuevo en el player para activarlo de una forma más cómoda.

Noticia

En la noticia también pasaba algo parecido. El contenido iba a venir duplicado de la web y de su CMS, así que compartimos el diseño y se adaptó para el rediseño de la app de COPE a partir de la versión mobile de la web. La única diferencia que tenía era en los player internos de la noticia. Al tener el player nativo anclado en el bottom se cargan aquí todos los audios, interrumpiendo el directo. Siendo el player de la noticia solo un enlace a este player nativo.

iPhone con el diseño UX UI de la noticia de la app de COPE
Podcast

Los podcast también tienen especial relevancia en la app, como lo tuvo en la web. Se diseñó unas pantallas especiales para que consumir podcast fuese lo más fácil posible.

Lo primero que nos encontramos es la portada de podcast a la que se accede desde el menú si pulsas en el item. Tiene un carrusel con los podcast destacados del momento con la imagen del capítulo, el título y descripción del podcast y el título y descripción del capítulo. En la parte inferior hay varios carruseles ordenados por categorías o temáticas.

Si en lugar de acceder por el item del menú pulsas sobre el icono de opción se despliega un listado con todos los podcast para que elijas cuál quieres. En ambas opciones existe un buscador para localizar rápidamente un podcast.

iPhone con el diseño UX UI de los podcast de la app de COPE

Cuando seleccionas un podcast entras a su página de detalle en la que se puede ver una amplia cabecera del podcast con su imagen y el título del podcast. Debajo encontramos en la pestaña inicio, el último capítulo disponible con su imagen e información y a continuación hay una serie de módulos con noticias del podcast. También encontramos un carrusel con todos los podcast y otros carruseles con otros podcast categorizados por temática. Además existe una pestaña podcast donde aparece un listado de todos los capítulos disponible del podcast.

Otros diseños (funcionalidades nativas)

Otros diseños que también son exclusivos de la app son los de las funcionalidades de alertas y despertador.

En la pantalla de alertas se puede seleccionar sobre qué quieres recibir alertas. Sobre últimas horas, alertas de los programas, alertas de una sección editorial en concreto o sobre un deporte o equipo.

En la pantalla del despertador puedes seleccionar a la hora que quieres que suene el despertador y con qué te quieres despertar. Con la radio en directo, con un programa que elijas, con el último boletín de noticias o con los audios que tienes guardados en tu playlist.

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 rediseño de la app de COPE 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

Sin tener un estudio exhaustivo, recibimos buenas críticas del rediseño de la app de COPE. 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 por 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%. COPE se convirtió en el medio de comunicación que más creció en sus plataformas digitales 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 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.