En diciembre de 2017, con la llegada de un equipo de personas a cargo de la digitalización de COPE, me dieron la oportunidad de ocupar el puesto de Director de Diseño de Producto (UX y UI) del Grupo COPE. Ya estaba desarrollando esa función solo para COPE y en ese momento ampliaba con CADENA 100, RockFM y MegaStarFM, siendo este el trabajo que realizo en la actualidad. 

En dos años de trabajo hemos conseguido poner en producción nueve productos digitales: los rediseños de la web y app de COPE, de las webs y apps de CADENA100, RockFM y MegastarFM y de la app de Tiempo de Juego. Además, con los plazos que hemos tenido que cumplir, cada vez más cortos, he tenido que trabajar a gran velocidad y con mucha coordinación entre todas las partes.

Proceso

El proceso, que está explicado más detenidamente en cada uno de los proyectos, es el siguiente:

  • Cada vez que empezamos un proyecto hay una entrega de necesidades, estudios, análisis para que el equipo de diseño y desarrollo pueda hacer una investigación y documentación previa para situarnos todos en el mismo contexto.
  • Realizamos un proceso de research, con varias técnicas cuantitativas y cualitativas para conocer en profundidad el usuario de cada proyecto.
  • A continuación organizamos workshops para reunir al equipo directivo, de diseño y de desarrollo y estudiar y valorar las posibles funcionalidades del nuevo diseño en función de los resultados de la investigación.
  • El equipo de diseño empieza a plantear ideas en wireframe y en diseños Low-Fidelity.
Bocetos de diseño en la pizarra
Bocetos de diseño en la pizarra
  • Una vez aprobados los wireframe comenzamos a trabajar en los diseños de High-Fidelity. Los diseñadores van trabajando y yo voy supervisando que los diseños que entregan tengan la calidad esperada y que cumplan con la funcionalidad y las líneas generales que la dirección de la empresa ha solicitado. Cuando los trabajos tienen mi aprobación los presento al equipo directivo para recoger feedback con posibles cambios o validaciones de pantallas.
  • A la vez que van terminando el diseño de alguna pantallas yo voy revisando los archivos editables en Sketch, para repasar minuciosamente que todo esté hecho con “pixel perfect” antes de enviarlo a maquetación.
cadena100-rockfm-megastar-player4. Rediseño CADENA 100, RockFM y MegaStarFM
Players de las apps de CADENA100, RockFM y MegastarFM
  • Una vez entregada la maquetación y el desarrollo de la web en entorno de preproducción o el .apk y la versión en TestFlight de Apple de la app, mi trabajo como Director de Diseño de Producto también consiste en hacer el proceso de calidad y revisar cualquier cosa que no esté como estaba planteado en diseño. Detectar errores de funcionamiento y experiencia de usuario o detalles de diseño que no estuviesen bien acabados son 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
Análisis e Investigación

(O. Workshop, TypeformMindmeister)

Wireframe

(Balsamiq y Moqups)

High-Fidelity Prototyping

(Sketch e Invision Studio)

Test de Usuario

(Hotjar y Quant)

Design System

(Figma y Frontify)

Prototipos Animados

(Invision, Marvel, Flinto y Principle)

Handoff

(Invision, Zeplin y Avocode)

Análisis Heurísticos

(Airtable)

Las herramientas que suelo utilizar como Director de Diseño de Producto son: para UX (User Experience) Optimal Workshop, para hacer Card Sorting y pruebas de concepto, Typeform para hacer formularios creativos y recoger información, minmeister para hacer mapas y diagramas de flujo, y Moqups para hacer wireframes de forma rápida. También utilizo Sketch para hacer wireframes con más detalle ya que puedo aprovecharlos para la UI final. 

Para UI (User Interface) utilizo Sketch como herramienta de diseño high-fidelity, InVision y Marvel para subir diseños y flujos de web y app respectivamente, presentarlos en las reuniones y obtener las validaciones del equipo directivo. Y por último, uso Zeplin para subir los diseños y pasarlos al equipo de maquetación y desarrollo. 

Resultados

Sin tener un estudio exhaustivo, hemos recibido buenas críticas del diseño y la usabilidad en todos los rediseños.

En cuanto a datos, desde diciembre de 2017 hasta diciembre de 2018 la web y la app de COPE 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.

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 que se lanzó progresivamente para cada producto desde el verano de 2018. Como se puede ver en el gráfico, de COPE, después de la bajada propia del verano, la audiencia siguió subiendo hasta batir un récord histórico y situarnos cada vez más cerca del liderato digital en el sector radiofónico.

ACTUALIZACIÓN NOVIEMBRE 2019: la web y la app de CADENA100 superaron en octubre, por primera vez en la historia, a Los40.com con 2.500.000 usuarios únicos.

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

Con estos datos, usuarios, trabajadores y directivos están muy satisfechos con el resultado de todos los rediseños realizados. No obstante, aún queda mucho por desarrollar, de lo que se diseñó originalmente, y se realizará en siguientes fases.