Empresa
Astra
Astra · Web
Astra Redesign
Que la gente se quede en el sitio, no solo en el stream.
Astra es una plataforma multimedia construida en torno a la radio en streaming y a la fotografía amateur desde una perspectiva experimental. El sitio hacía una cosa bien y ninguna más: llegabas, escuchabas y te ibas. El rediseño se propuso darle razones para quedarse, sin convertir una radio independiente en un portal.
Una radio sin nada que hacer alrededor
Las sesiones eran cortas y casi nadie volvía. El problema no era el stream, era todo lo que el sitio no ofrecía.
Rol
Researcher, information architecture, visual design, prototyping and testing
Fecha
Septiembre de 2024
Alcance
Research, arquitectura de información, fundamentos del sistema de diseño y el sitio rediseñado
El rediseño tenía un objetivo: que la gente pasara más tiempo en el sitio, no solo para escuchar la radio, sino para usar la plataforma como un lugar donde estar con música y arte desde una perspectiva alternativa. Tal y como estaba, la radio tenía muy poco con lo que atraer o retener a nadie, y las sesiones lo demostraban, tanto en visitas como en tiempo de escucha. Las métricas y los datos cualitativos justificaron rehacerla.
Lo que cuenta este caso
Los números decían lo mismo dos veces
Casi todo el que llegaba era nuevo, y casi nadie aguantaba cuatro minutos.
312
usuarios nuevos frente a 33 recurrentes: la audiencia se renovaba en vez de volver
33
usuarios recurrentes, que es lo que convirtió la retención en el problema a resolver
4 m 10 s
tiempo medio de interacción por sesión entre cohortes
Tres lecturas apuntaban en la misma dirección. La proporción entre usuarios nuevos y recurrentes estaba tan desequilibrada que el problema no era el crecimiento, sino la retención. El análisis de cohortes mostró que el engagement a largo plazo era tan escaso que había que construirlo, no optimizarlo. Y una sesión media de poco más de cuatro minutos decía que el sitio no daba nada que hacer una vez que sonaba el stream.
La conclusión que fijó el alcance
Lo que era el sitio
Una imagen a sangre, el nombre de la pista y el reproductor. Bonito, y sin ningún sitio al que ir.
La página de entrada original se construía alrededor de imágenes grandes y responsive que llenaban el navegador en ambas direcciones, con una nota breve sobre el trabajo destacado. Se leía como una declaración más que como un sitio: todo lo que el visitante podía hacer estaba en esa primera pantalla, y era darle al play.
De las métricas a una lista de lo que le faltaba al sitio
Una sesión de brainstorming convirtió los datos en componentes, y una revisión de la competencia dijo cuáles merecía la pena construir.
La sesión partió de los objetivos y de un resumen de las métricas y de los datos cualitativos de los formularios de feedback. Las ideas salieron del intercambio y no de un brief, y de ahí salió una lista de los componentes que tenían que existir en la primera fase.
Análisis de la competencia
La revisión abarcó productos directamente comparables a Astra y otros con una larga trayectoria en entretenimiento que podían aportar ideas. Leerla contra los datos cuantitativos concretó los puntos a mejorar, que es lo que permitió acotar el rediseño en lugar de discutirlo.
Primero baja fidelidad, y probado antes de estar diseñado
Los bocetos de la sesión se convirtieron en un prototipo que se podía iterar y poner delante de un usuario como test de tareas.
Con los bocetos y los comentarios recogidos en las sesiones, la idea se trabajó hasta un prototipo de baja fidelidad: algo que se pudiera cambiar barato y, sobre todo, compartir con un usuario para validarlo en formato de test de tareas antes de que nada pareciera terminado.
La capa visual empezó por sus variables, no por sus pantallas
Primero las primitivas, el espaciado, los tokens y una rejilla de 8pt. El logo, la paleta y la iconografía, después.
La fase de diseño empezó desde cero y, deliberadamente, desde la lógica: los colores primitivos, la base numérica, los paddings, los márgenes y el espaciado, y los tokens de color, de dispositivo y de modo de texto, sobre una rejilla de 8pt. Solo una vez definido eso vino la capa visible: el logo para escritorio y móvil, la paleta de color, la iconografía y los componentes que el rediseño necesitaba.
Primitivas y tokens
El color, los dispositivos y los modos de texto definidos como variables en Figma antes de que existiera ninguna pantalla.
Una base de 8pt
Paddings, márgenes y espaciado resueltos sobre una sola rejilla, para que la maquetación tenga una única fuente de medida.
Marca e iconografía
Un logo para escritorio y móvil, la paleta y el set de iconos, construidos sobre las variables y no al lado de ellas.
El resultado
Lo que dejó establecido el rediseño
Contado como lo que se entregó: la estructura, el sistema y las decisiones que hay detrás.
Un sitio con algún sitio al que ir
El contenido editorial, el trabajo visual, los programas y los lanzamientos le dan a una visita un propósito más allá de los cuatro minutos que aguantaba el stream.
Una base de tokens, no un estilo
El color, el espaciado y los modos de texto se definieron como variables, así que la capa visual puede cambiar sin volver a dibujar el sitio.
Validado antes de ser bonito
El test de tareas se hizo sobre el prototipo de baja fidelidad, que es donde cambiar algo todavía no cuesta nada.
Una marca que se adapta a su contenedor
La marca se volvió a dibujar para escritorio y móvil como parte del sistema, en vez de encajarla al final.
Lo que mediría a continuación