[{"data":1,"prerenderedAt":353},["ShallowReactive",2],{"layout-profile":3,"project-product-design-astra-redesign-es":13,"project-cards-es":261,"client-hubs-es":347},{"title":4,"acf":5,"featured_image":11},"Pablo Goris",{"actual_job":6,"role":7,"hero_title":8,"headline":9,"description":10},"Designer at Alea","Senior Product Designer","Hello! I'm Pablo","Designing clarity across products, systems and evolving workflows by combining UX, product thinking and AI accelerated execution to turn complex ideas into scalable experiences with real business impact.","",{"url":12,"alt":4},"/media/2026/02/pablo.webp",{"id":14,"title":15,"acf":16,"body":212,"card":218,"company":41,"cover":29,"coverAlt":191,"date":225,"description":226,"encrypted":227,"extension":228,"meta":229,"navigation":67,"path":230,"postType":231,"role":232,"sections":233,"seo":257,"status":258,"stem":259,"subtitle":19,"__hash__":260},"productDesignEs/product-design/astra-redesign.es.md","Astra Redesign",{"hero":17,"overview":33,"research":58,"before":79,"ideation":103,"lofi":152,"hifi":167,"learnings":193},{"eyebrow":18,"title":15,"lead":19,"text":20,"tags":21,"imageLayout":26,"images":27,"imageLead":31,"imageText":32},"Astra · Web","Que la gente se quede en el sitio, no solo en el stream.","\u003Cp>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.\u003C/p>",[22,23,24,25],"Research","Information architecture","Visual design","Prototyping and testing","single",[28],{"src":29,"alt":30},"/media/projects/astra-web/hero.webp","La home de Astra.fm tras el rediseño, con los nuevos lanzamientos y la pista destacada","La portada tras el rediseño","Los lanzamientos y el contenido editorial comparten la primera pantalla con el reproductor, así que hay algo que hacer más allá de darle al play.",{"title":34,"lead":35,"groups":36,"note":54},"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.",[37,52],{"cards":38},[39,43,46,49],{"lead":40,"text":41,"tone":42},"Empresa","Astra","subtle",{"lead":44,"text":45,"tone":42},"Rol","Researcher, information architecture, visual design, prototyping and testing",{"lead":47,"text":48,"tone":42},"Fecha","Septiembre de 2024",{"lead":50,"text":51,"tone":42},"Alcance","Research, arquitectura de información, fundamentos del sistema de diseño y el sitio rediseñado",{"text":53},"\u003Cp>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.\u003C/p>",{"type":55,"title":56,"message":57},"info","Lo que cuenta este caso","El proyecto está documentado a través de la investigación, el diseño y la entrega. Cuenta lo que se encontró, se decidió y se construyó, más que resultados posteriores al lanzamiento, que no se midieron como parte de este trabajo.",{"title":59,"lead":60,"groups":61,"note":76},"Los números decían lo mismo dos veces","Casi todo el que llegaba era nuevo, y casi nadie aguantaba cuatro minutos.",[62,74],{"cards":63},[64,68,71],{"lead":65,"text":66,"stat":67,"tone":42},"312","usuarios nuevos frente a 33 recurrentes: la audiencia se renovaba en vez de volver",true,{"lead":69,"text":70,"stat":67,"tone":42},"33","usuarios recurrentes, que es lo que convirtió la retención en el problema a resolver",{"lead":72,"text":73,"stat":67,"tone":42},"4 m 10 s","tiempo medio de interacción por sesión entre cohortes",{"text":75},"\u003Cp>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.\u003C/p>",{"type":55,"title":77,"message":78},"La conclusión que fijó el alcance","El rediseño no podía ser un lavado de cara. Si la visita media dura cuatro minutos, el trabajo consiste en añadir razones para quedarse, y eso es un problema de arquitectura de información antes que uno visual.",{"title":80,"lead":81,"groups":82},"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.",[83,94],{"text":84,"images":85},"\u003Cp>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.\u003C/p>",[86,90],{"src":87,"crop":67,"alt":88,"caption":89},"/media/projects/astra-web/old-hero.webp","Página de entrada original de Astra.fm, una fotografía a sangre con los controles del reproductor encima","La página de entrada original. La fotografía llena el navegador y lo único que se puede hacer es darle al reproductor.",{"src":91,"crop":67,"alt":92,"caption":93},"/media/projects/astra-web/old-home.webp","Home original de Astra.fm con una maquetación oscura y una única imagen destacada","La home por debajo del pliegue. Las secciones existían, pero se llegaba a ellas pasando una pantalla entera de imagen.",{"images":95},[96,100],{"src":97,"crop":67,"alt":98,"caption":99},"/media/projects/astra-web/old-player.webp","Astra.fm original con el reproductor de radio desplegado sobre el contenido","Con el reproductor abierto. El stream ocupaba la pantalla, así que escuchar y navegar se excluían.",{"src":101,"alt":102},"/media/projects/astra-web/old-brand.webp","La marca original de Astra, una A triangular en gris",{"title":104,"lead":105,"groups":106,"action":122},"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.",[107,114],{"text":108,"images":109},"\u003Cp>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.\u003C/p>",[110],{"src":111,"alt":112,"caption":113},"/media/2026/02/brainstorming.svg","Tablero de brainstorming con las ideas agrupadas por área","Brainstorming. Los objetivos y las métricas sobre la mesa, y de ahí los componentes imprescindibles para la primera fase.",{"title":115,"text":116,"images":117},"Análisis de la competencia","\u003Cp>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.\u003C/p>",[118],{"src":119,"alt":120,"caption":121},"/media/2026/02/competitors.webp","Tablero del análisis de la competencia","La revisión de la competencia. Competidores directos junto a productos de entretenimiento asentados, leídos contra los números propios.",{"label":123,"modalTitle":124,"groups":125},"Ver la estructura que salió de ahí","Lo que le faltaba al sitio",[126,141],{"text":127,"cards":128},"\u003Cp>El rediseño añadió secciones para que la experiencia fuera más allá de escuchar. Las nuevas áreas incluyen un blog con textos actuales sobre diseño, tecnología, cine y fotografía, junto al trabajo visual que la plataforma ya tenía.\u003C/p>",[129,132,135,138],{"lead":130,"text":131},"Editorial","Un blog con textos sobre diseño, tecnología, cine y fotografía, para que haya algo que leer mientras suena el stream.",{"lead":133,"text":134},"Trabajo visual","La fotografía y el arte visual sobre los que se construye la plataforma, con un sitio propio en vez de vivir dentro del reproductor.",{"lead":136,"text":137},"Programas","Programas con su propia descripción e historial, para que un oyente pueda seguir uno en lugar de pillar lo que haya puesto.",{"lead":139,"text":140},"Lanzamientos","La música nueva en la primera pantalla, que es lo que le da a un visitante recurrente una razón para volver.",{"title":142,"images":143},"Los wireframes que lo resolvieron",[144,148],{"src":145,"crop":67,"alt":146,"caption":147},"/media/projects/astra-web/wireframe-gallery.webp","Wireframe de la galería de arte visual","Galería de arte visual. Las imágenes tienen su propia cuadrícula en vez de un hueco en la home.",{"src":149,"crop":67,"alt":150,"caption":151},"/media/projects/astra-web/wireframe-show.webp","Wireframe de la descripción de un programa de radio con su historial de pistas","Descripción del programa. El programa, sus próximas pistas y el historial, para que el stream tenga contexto alrededor.",{"title":153,"lead":154,"groups":155},"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.",[156],{"text":157,"images":158},"\u003Cp>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.\u003C/p>",[159,163],{"src":160,"alt":161,"caption":162},"/media/2026/02/sketches-1.svg","Bocetos creados durante la sesión de brainstorming","Bocetos creados durante la sesión de brainstorming.",{"src":164,"alt":165,"caption":166},"/media/2026/02/wireframes.svg","Wireframes iniciales","Wireframes iniciales, la versión que entró en el test de tareas.",{"title":168,"lead":169,"groups":170},"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.",[171,183],{"text":172,"cards":173},"\u003Cp>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.\u003C/p>",[174,177,180],{"lead":175,"text":176},"Primitivas y tokens","El color, los dispositivos y los modos de texto definidos como variables en Figma antes de que existiera ninguna pantalla.",{"lead":178,"text":179},"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.",{"lead":181,"text":182},"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.",{"title":184,"images":185},"El resultado",[186,190],{"src":187,"alt":188,"caption":189},"/media/2026/02/final-design.webp","Diseño final de Astra en tema oscuro","Tema oscuro. La paleta y los componentes resueltos sobre la base de tokens.",{"src":29,"alt":191,"caption":192},"La home de Astra.fm tras el rediseño","La home rediseñada, con los lanzamientos y el contenido editorial compartiendo la primera pantalla con el reproductor.",{"title":194,"lead":195,"cards":196,"note":209},"Lo que dejó establecido el rediseño","Contado como lo que se entregó: la estructura, el sistema y las decisiones que hay detrás.",[197,200,203,206],{"lead":198,"text":199},"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.",{"lead":201,"text":202},"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.",{"lead":204,"text":205},"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.",{"lead":207,"text":208},"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.",{"type":55,"title":210,"message":211},"Lo que mediría a continuación","Las mismas tres lecturas que justificaron el rediseño: la proporción entre usuarios recurrentes y nuevos, la duración media de la sesión, y si las secciones nuevas son a las que la gente acude de verdad después de darle al play.",{"type":213,"value":214,"toc":215},"minimark",[],{"title":10,"searchDepth":216,"depth":216,"links":217},2,[],{"title":15,"description":219,"tags":220,"image":223},"Rehacer una plataforma de radio multimedia en torno al streaming, el descubrimiento y una identidad visual más clara.",[221,222],"Product Design","Design Systems",{"src":224,"alt":15},"/media/2026/02/Captura-de-pantalla-2026-02-13-a-las-18.22.02-scaled.webp","September 2024","Astra es una plataforma multimedia construida en torno a la radio en streaming y a la fotografía amateur desde una perspectiva experimental. El rediseño se propuso darle razones para quedarse: investigación, arquitectura de información, una base de tokens y una nueva capa visual.",false,"md",{},"/product-design/astra-redesign.es","case_study","Researcher, Information architecture, Visual Designer, Prototyping and testing",[234,237,239,242,245,248,251,254],{"id":235,"label":236,"field":235},"hero","Resumen",{"id":238,"label":236,"field":238},"overview",{"id":240,"label":241,"field":240},"research","Investigación",{"id":243,"label":244,"field":243},"before","El sitio antes",{"id":246,"label":247,"field":246},"ideation","Ideación",{"id":249,"label":250,"field":249},"lofi","Baja fidelidad",{"id":252,"label":253,"field":252},"hifi","Sistema visual",{"id":255,"label":256,"field":255},"learnings","Lo que dejó establecido",{"title":15,"description":226},"published","product-design/astra-redesign.es","dhLh6NeGqlF_w7afsNoZ7D93pciHQHY3Yp3eo8e0sas",{"/product-design/astra-fm-app":262,"/product-design/astra-redesign":275,"/product-design/booking-engine-setup":279,"/product-design/jackpot-ecosystem":291,"/product-design/la-caixa":303,"/product-design/new-client-area":314,"/product-design/new-reservation-details":324,"/product-design/redesign-breast-simulator":336},{"title":263,"description":264,"tags":265,"image":270,"to":273,"status":258,"company":41,"date":274},"App móvil de Astra.fm","Una experiencia móvil pensada para extender el ecosistema musical de Astra.fm, atraer nuevos oyentes y mejorar la retención de audiencia.",[22,266,267,268,269],"Design","Testing","Development","Monitoring",{"src":271,"alt":272},"/media/projects/astra-fm-app/final-home.webp","Pantalla de inicio de la app de Astra.fm","/product-design/astra-fm-app","August 2026",{"title":15,"description":219,"tags":276,"image":277,"to":278,"status":258,"company":41,"date":225},[221,222],{"src":224,"alt":15},"/product-design/astra-redesign",{"title":280,"description":281,"tags":282,"image":285,"to":288,"status":258,"company":289,"date":290},"Guesty - New Onboarding Flow","Una arquitectura nueva para la configuración del Booking Engine de Guesty que la vuelve sencilla, eliminando obstáculos para que los propietarios la completen rápido y empiecen antes a recibir huéspedes.",[283,284],"UX Research","Product Strategy",{"src":286,"alt":287},"/media/projects/guesty/hero.webp","Booking Engine Setup de Guesty","/product-design/booking-engine-setup","Guesty","July 2023",{"title":292,"description":293,"tags":294,"image":296,"to":299,"status":300,"company":301,"date":302},"Alea - Jackpot Ecosystem","Dos productos definidos a partir de sus reglas de negocio: un motor donde una campaña se configura pestaña a pestaña, y un gestor para la plantilla que ve el jugador.",[221,295],"UX Architecture",{"src":297,"alt":298},"/media/projects/alea/jackpot/image-home.webp","Template Manager, pestaña Content, con el modal de opt-in previsualizado en un móvil","/product-design/jackpot-ecosystem","private","Alea","2025",{"title":304,"description":305,"tags":306,"image":309,"to":312,"status":258,"company":304,"date":313},"La Caixa","PAC es una iniciativa privada de la Fundación La Caixa. Es una plataforma pública donde los usuarios pueden reservar salas en cualquier punto de España.",[307,308],"Researcher","User testing",{"src":310,"alt":311},"/media/2026/03/image-hero-detail.webp","Plataforma de reservas de La Caixa","/product-design/la-caixa","April 12, 2017",{"title":315,"description":316,"tags":317,"image":319,"to":322,"status":300,"company":301,"date":323},"Alea - Client Area","A design system built from the product's needs and applied to the new Client Area: catalogue, calendar, downloads and RTP.",[221,318],"Design System",{"src":320,"alt":321},"/media/projects/alea/client-area/dashboard.webp","New Client Area dashboard","/product-design/new-client-area","October 16, 2024",{"title":325,"description":326,"tags":327,"image":329,"to":332,"status":333,"company":334,"date":335},"Kigo - New reservation details","El rediseño organizó el detalle de reserva para evitar confusiones y reducir las llamadas y los correos a soporte.",[328,25],"IA Design",{"src":330,"alt":331},"/media/2026/02/image-hero-detail-v2.svg","Detalle de reserva de Kigo","/product-design/new-reservation-details","wip","Kigo","March 14, 2019",{"title":337,"description":338,"tags":339,"image":341,"to":344,"status":258,"company":345,"date":346},"Crisalix - 3D Aesthetic simulation","Rediseñar la experiencia de simulación de Crisalix para que a los cirujanos les resultara más fácil crear y gestionar simulaciones 3D de procedimientos estéticos a partir de imágenes de pacientes.",[221,340],"User Research",{"src":342,"alt":343},"/media/projects/crisalix/hero.webp","Simulador de Crisalix","/product-design/redesign-breast-simulator","Crisalix","July 2019",[348],{"slug":349,"name":301,"logo":350,"logoAlt":301,"summary":351,"description":352},"alea","/media/2026/02/Alea-RVB-Colour.svg","Diseño de producto para Alea, desde el sistema de diseño hasta los productos que se construyen con él.","Diseño de producto para Alea, desde el sistema de diseño hasta los productos que se construyen con él. Algunos detalles son confidenciales, así que estos casos están protegidos con una contraseña.",1793895644770]