[{"data":1,"prerenderedAt":665},["ShallowReactive",2],{"layout-profile":3,"project-product-design-astra-fm-app-es":13,"project-cards-es":576,"client-hubs-es":659},{"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":547,"card":552,"company":562,"cover":29,"coverAlt":30,"date":563,"description":564,"encrypted":565,"extension":566,"meta":567,"navigation":65,"path":568,"postType":569,"role":570,"sections":571,"seo":572,"status":573,"stem":574,"subtitle":19,"__hash__":575},"productDesignEs/product-design/astra-fm-app.es.md","App de Astra FM",{"hero":17,"projectOverview":31,"research":81,"benchmarking":163,"strategy":256,"solution":348,"finalDesign":446,"results":517},{"title":18,"lead":19,"text":20,"tags":21,"imageLayout":26,"images":27},"Astra FM · App móvil","Diseñar una experiencia de radio que no dependa del navegador","\u003Cp>Astra ya tenía una audiencia mayoritariamente móvil, pero la escucha dependía de una conexión estable y de las limitaciones del navegador. La app se diseñó para que la escucha fuera continua, fiable y estuviera disponible sin conexión.\u003C/p>",[22,23,24,25],"Product Design","Research","iOS + Android","Design + implementation","single",[28],{"src":29,"alt":30},"/media/projects/astra-fm-app/hero.webp","App móvil de Astra FM",{"action":32,"title":63,"lead":64,"cardsFirst":65,"singleRow":65,"cards":66,"text":80},{"label":33,"modalTitle":34,"groups":35},"Ver el contexto y los objetivos completos","Por qué crear una app móvil para Astra",[36,45],{"text":37,"cards":38},"\u003Cp>Astra ofrecía originalmente una versión web que permitía escuchar la radio, pero dependía de una conexión estable y no encajaba bien con el uso habitual en móvil. El proyecto arrancó con dos objetivos principales.\u003C/p>",[39,42],{"lead":40,"text":41},"Mantener la reproducción en conexiones inestables","El objetivo inicial era conseguir una escucha más fiable con una tecnología capaz de mantener la reproducción aunque bajara la calidad de la conexión a internet o aunque esta se cortara momentáneamente. Eso permitiría a los usuarios escuchar Astra durante los desplazamientos o al pasar de Wi-Fi a datos móviles, reduciendo las interrupciones y eliminando la necesidad de reiniciar la radio. Además, se incluyó una biblioteca de 100 pistas descargables, actualizada una vez por semana, para que los usuarios pudieran seguir escuchando sin conexión.",{"lead":43,"text":44},"Llegar a más usuarios","El objetivo era aumentar la presencia de Astra en iOS y Android. La app permitiría a los oyentes encontrar la radio en las principales plataformas móviles y facilitaría el acceso a quienes ya estuvieran familiarizados con ellas. Astra dejaría de depender únicamente de la web y pasaría a formar parte del entorno donde la gente escucha música habitualmente.",{"title":46,"images":47},"La solución tenía que combinar continuidad, acceso móvil y escucha sin conexión",[48,51,54,57,60],{"src":49,"alt":50},"/media/projects/astra-fm-app/screen-home.webp","Pantalla de inicio",{"src":52,"alt":53},"/media/projects/astra-fm-app/screen-radio.webp","Pantalla de radio",{"src":55,"alt":56},"/media/projects/astra-fm-app/screen-library.webp","Pantalla de la biblioteca",{"src":58,"alt":59},"/media/projects/astra-fm-app/screen-library-player.webp","Pantalla del reproductor de la biblioteca",{"src":61,"alt":62},"/media/projects/astra-fm-app/screen-shows.webp","Pantalla de programas","Resumen del proyecto","Una app móvil construida para mantener la continuidad de la escucha y ampliar el alcance de Astra",true,[67,71,74,77],{"lead":68,"text":69,"tone":70},"Empresa","Astra FM","subtle",{"lead":72,"text":73,"tone":70},"Periodo","2026",{"lead":75,"text":76,"tone":70},"Rol","Product Design · Research · Prototyping · Implementación front-end",{"lead":78,"text":79,"tone":70},"Equipo","Product Designer · Back-end","\u003Cp>Astra FM es una emisora de radio online independiente que ofrece contenido editorial musical; la app se desarrolló para cubrir dos requisitos principales: garantizar que la reproducción continúe cuando la conexión se vuelve inestable y ofrecer una opción sin conexión, integrándose además con el ecosistema y el backend que Astra ya tenía.\u003C/p>",{"action":82,"title":149,"lead":150,"singleRow":65,"cards":151,"note":160},{"label":83,"modalTitle":84,"groups":85},"Ver la investigación completa","La audiencia en números: patrones, problemas y oportunidades",[86,113,132,144],{"text":87,"cards":88},"\u003Cp>Para entender cómo interactuaban los usuarios con Astra FM antes de diseñar la app, se analizaron 1.297 sesiones de escucha a lo largo de 92 días. El objetivo era identificar patrones de consumo, puntos de abandono y oportunidades para mejorar la experiencia móvil.\u003C/p>",[89,92,95,98,101,104,107,110],{"lead":90,"text":91,"stat":65},"56 %","sesiones desde móvil",{"lead":93,"text":94,"stat":65},"44,8 %","terminan antes de 5 min",{"lead":96,"text":97,"stat":65},"29,8 %","duran más de 30 min",{"lead":99,"text":100,"stat":65},"8:00 / 18:00","franjas de mayor escucha",{"lead":102,"text":103,"stat":65},"1.297","sesiones de escucha",{"lead":105,"text":106,"stat":65},"28,4","oyentes diarios de media",{"lead":108,"text":109,"stat":65},"64","pico diario",{"lead":111,"text":112,"stat":65},"53","países alcanzados",{"title":114,"cardsColumns":115,"cards":116},"Problemas clave identificados",1,[117,120,123,126,129],{"lead":118,"tone":70,"textHtml":119},"1. Una parte importante de las sesiones es muy corta","\u003Cp>El 44,8 % de las sesiones dura menos de cinco minutos. El grupo más numeroso, el 33,6 %, se sitúa entre uno y cinco minutos. Los datos por sí solos no revelan la causa: puede tener que ver con la conectividad, con interrupciones durante la navegación, con la carga o simplemente con probar la emisora.\u003C/p>\u003Cp class=\"card-label\">Oportunidad para la app\u003C/p>\u003Cp>Crear una reproducción más estable y continua, capaz de seguir en segundo plano y de adaptarse a distintas calidades de conexión.\u003C/p>",{"lead":121,"tone":70,"textHtml":122},"2. La audiencia fluctúa y no muestra un crecimiento sostenido","\u003Cp>La media diaria pasó de 26,4 oyentes en mayo a 33,4 en junio, y bajó a 25 en julio. También hay una diferencia considerable entre el mínimo de 10 y el máximo de 64 oyentes diarios.\u003C/p>\u003Cp class=\"card-label\">Oportunidad para la app\u003C/p>\u003Cp>Introducir mecanismos de retención como notificaciones de programas, contenido guardado, acceso directo al directo y recuperación sencilla de la última experiencia.\u003C/p>",{"lead":124,"tone":70,"textHtml":125},"3. El móvil ya es el principal punto de acceso","\u003Cp>El 56 % de las sesiones procede de dispositivos móviles. Safari y el navegador de Android representan una parte relevante del consumo, lo que muestra que muchos usuarios ya escuchan Astra en el móvil dentro de una experiencia que depende del navegador.\u003C/p>\u003Cp class=\"card-label\">Oportunidad para la app\u003C/p>\u003Cp>Convertir un comportamiento que ya existe en una experiencia diseñada específicamente para escuchar la radio en el móvil.\u003C/p>",{"lead":127,"tone":70,"textHtml":128},"4. La audiencia se concentra en unos pocos mercados","\u003Cp>España representa aproximadamente el 46,4 % de las sesiones y Estados Unidos, el 25,5 %. Junto con Argentina, los tres países suman el 77,2 % de la audiencia registrada.\u003C/p>\u003Cp class=\"card-label\">Oportunidad para la app\u003C/p>\u003Cp>Consolidar los mercados donde ya hay audiencia y sostener el crecimiento con una experiencia disponible en iOS y Android.\u003C/p>",{"lead":130,"tone":70,"textHtml":131},"5. Hay periodos claros de mayor actividad","\u003Cp>Las 8:00 y las 18:00 registran los niveles de audiencia más altos. El viernes concentra el 17,2 % de la actividad semanal, mientras que el domingo tiene el nivel más bajo.\u003C/p>\u003Cp class=\"card-label\">Oportunidad para la app\u003C/p>\u003Cp>Aprovechar estas franjas para comunicar nuevos programas, enviar recordatorios relevantes y medir qué contenido genera mayor retorno.\u003C/p>",{"title":133,"images":134},"Datos de origen",[135,138,141],{"src":136,"alt":137},"/media/projects/astra-fm-app/metrics-1.webp","Sesiones de escucha y audiencia diaria a lo largo de 92 días",{"src":139,"alt":140},"/media/projects/astra-fm-app/metrics-2.webp","Desglose de sesiones por duración y dispositivo",{"src":142,"alt":143},"/media/projects/astra-fm-app/metrics-3.webp","Distribución de la audiencia por países",{"note":145},{"type":146,"title":147,"message":148},"info","Conclusión","Los datos muestran que Astra FM ya tiene una audiencia mayoritariamente móvil capaz de sesiones largas, pero también muchas escuchas breves y un crecimiento irregular. La app se creó para ofrecer una reproducción más estable, reducir las interrupciones y crear nuevos puntos de contacto que conviertan la escucha ocasional en una relación más frecuente con la radio.","Investigación y hallazgos","La evidencia que justificó crear la app",[152,154,156,158],{"lead":90,"text":153,"stat":65},"de las sesiones ya venían de móvil",{"lead":93,"text":155,"stat":65},"terminaron antes de 5 minutos",{"lead":102,"text":157,"stat":65},"sesiones analizadas en 92 días",{"lead":111,"text":159,"stat":65},"países alcanzados por Astra",{"type":146,"title":161,"message":162},"Oportunidad","Convertir un comportamiento móvil que ya existe en una experiencia estable y persistente para la escucha recurrente.",{"action":164,"title":247,"lead":248,"text":249,"imageLayout":170,"singleRow":65,"images":250},{"label":165,"modalTitle":166,"groups":167},"Ver el benchmarking completo","Lo que aprendimos de otras apps de radio musical",[168,187,225,243],{"text":169,"imageLayout":170,"images":171},"\u003Cp>Antes de definir la app, se analizó cómo otras marcas de radio habían trasladado su identidad y sus contenidos a experiencias móviles. El benchmarking ayudó a identificar soluciones, descubrir oportunidades y seleccionar las funcionalidades que más valor podían aportar a la experiencia de Astra.\u003C/p>","logos",[172,175,178,181,184],{"src":173,"alt":174},"/media/projects/astra-fm-app/logo-nts.webp","NTS",{"src":176,"alt":177},"/media/projects/astra-fm-app/logo-triple-j.webp","triple j",{"src":179,"alt":180},"/media/projects/astra-fm-app/logo-wfmu.webp","WFMU",{"src":182,"alt":183},"/media/projects/astra-fm-app/logo-kexp.webp","KEXP",{"src":185,"alt":186},"/media/projects/astra-fm-app/logo-radio-paradise.webp","Radio Paradise",{"table":188},{"headers":189,"rows":196},[190,191,192,193,194,195],"Radio","Plataforma","Perfil","Funcionalidades","Valor para Astra","Debilidades",[197,204,209,214,219],[198,199,200,201,202,203],"NTS Radio","iOS · Android","Radio independiente y descubrimiento musical.","Dos emisiones en directo, canales temáticos, archivo, colecciones editoriales y suscripción.","Referencia principal en identidad, curación humana y música alternativa.","La gran cantidad de programación y de contenido puede dificultar el descubrimiento. La navegación exige cierta familiaridad con la propuesta de la emisora.",[183,199,205,206,207,208],"Radio musical independiente y organización sin ánimo de lucro.","Radio en directo, pista actual, programación, sesiones en directo y contenido editorial.","Integra radio, comunidad, artistas y contenido audiovisual.","La experiencia combina radio, vídeo, noticias y sesiones, lo que puede dispersar la atención y restar protagonismo a la escucha en directo.",[177,199,210,211,212,213],"Radio australiana centrada en música nueva.","Radio en directo, noticias, historial y envío de pistas a plataformas musicales.","Combina escucha, descubrimiento e integración con Spotify y Apple Music.","El número de secciones, programas y contenidos puede generar una experiencia más saturada. Su propuesta está muy ligada al ecosistema australiano.",[186,199,215,216,217,218],"Radio online ecléctica curada por personas.","Múltiples mixes, audio de alta calidad, información visual y escucha sin publicidad.","Referencia en calidad de audio y continuidad de la reproducción.","Ofrece una experiencia de escucha sólida, pero con menos contenido editorial, interacción social y participación de la comunidad.",[180,220,221,222,223,224],"iOS","Radio comunitaria, libre y experimental.","Emisiones en directo, archivo, podcasts, comentarios, favoritos y descargas sin conexión.","Referencia clave para la futura capa social y la biblioteca de Astra.","Su interfaz resulta menos actual y la arquitectura es compleja. Algunas funcionalidades pueden ser difíciles de descubrir para un usuario nuevo.",{"title":226,"list":227},"Aspectos clave a comparar",[228,229,230,231,232,233,234,235,236,237,238,239,240,241,242],"Acceso directo a la radio en directo desde el arranque.","Reproductor persistente durante la navegación.","Comportamiento en conexiones inestables.","Información de pista, artista y programa.","Historial de pistas reproducidas.","Programación y próximo programa.","Acceso a emisiones anteriores.","Favoritos y biblioteca.","Descargas y escucha sin conexión.","Noticias, lanzamientos y contenido editorial.","Interacción con los oyentes.","Notificaciones.","Integración con Spotify y Apple Music.","Registro y ventajas asociadas.","Modelo de financiación o membresía.",{"note":244},{"type":146,"title":245,"message":246},"Conclusión para Astra","NTS, KEXP, triple j, Radio Paradise y WFMU aportaron referencias valiosas en curación, audio, comunidad y descubrimiento. Al mismo tiempo, varios productos introducen complejidad con demasiadas secciones, capas de navegación o contenido. Para Astra, la oportunidad estaba en construir una experiencia más enfocada, donde escuchar fuera siempre la acción principal.","Benchmarking y análisis de la competencia","La oportunidad no era añadir más contenido, sino simplificar la escucha","\u003Cp>El análisis de NTS, KEXP, triple j, Radio Paradise y WFMU mostró referencias sólidas en curación, audio y comunidad, pero también estructuras cargadas de contenido. Astra tomó una dirección más enfocada: la radio primero, acceso inmediato y funcionalidades construidas alrededor de la escucha.\u003C/p>",[251,252,253,254,255],{"src":173,"alt":174},{"src":182,"alt":183},{"src":176,"alt":177},{"src":185,"alt":186},{"src":179,"alt":180},{"action":257,"title":327,"lead":328,"cards":329},{"label":258,"modalTitle":259,"groups":260},"Ver las decisiones y la priorización","De los datos a las decisiones de producto",[261,263,279,290,306],{"text":262},"\u003Cp>Los datos mostraban que Astra ya tenía una audiencia mayoritariamente móvil, pero la experiencia de escucha seguía dependiendo del navegador y de una conexión estable.\u003C/p>",{"title":264,"cardsColumns":265,"cards":266},"Necesidades principales",4,[267,270,273,276],{"lead":268,"tone":70,"text":269},"Acceso inmediato","Dar acceso inmediato a la emisión en directo.",{"lead":271,"tone":70,"text":272},"Continuidad","Mantener la reproducción a través de los cambios de contexto.",{"lead":274,"tone":70,"text":275},"Recurrencia","Crear nuevos puntos de contacto que animen a los usuarios a volver a la radio.",{"lead":277,"tone":70,"text":278},"Sin conexión","Ofrecer una alternativa para escuchar sin conexión.",{"title":280,"text":281,"list":282},"Priorización de la primera versión","\u003Cp>Se priorizaron las funcionalidades directamente relacionadas con la escucha:\u003C/p>",[283,284,285,286,232,287,288,289],"Acceso inmediato a la emisión en directo.","Reproducción persistente y en segundo plano.","Información de la pista y del programa actual.","Acceso a la programación.","Notificaciones sobre programas y actualizaciones.","Música sin conexión a través de la biblioteca.","Recurrencia mediante actualizaciones semanales.",{"title":291,"cardsColumns":292,"cards":293},"Principios de diseño",2,[294,297,300,303],{"lead":295,"tone":70,"text":296},"La radio siempre disponible","La emisión en directo tenía que ser accesible desde el primer nivel y seguir activa durante la navegación.",{"lead":298,"tone":70,"text":299},"Escuchar antes que explorar","La interfaz tenía que dar prioridad a la reproducción. El contenido adicional debía apoyar la escucha, no competir con ella.",{"lead":301,"tone":70,"text":302},"La información en el momento justo","La pista, el artista, el programa actual y la próxima emisión tenían que aparecer de forma contextual y con una jerarquía clara.",{"lead":304,"tone":70,"text":305},"Diseñado para que vuelvan","La programación, las notificaciones y el acceso directo tenían que ayudar a convertir la escucha ocasional en una relación más frecuente.",{"title":307,"cardsColumns":115,"cards":308},"Decisiones clave de experiencia",[309,312,315,318,321,324],{"lead":310,"tone":70,"text":311},"El reproductor como núcleo de la experiencia","El 44,8 % de las sesiones terminaba antes de los cinco minutos y una parte significativa del tráfico venía de dispositivos móviles. Se priorizó un reproductor persistente, capaz de seguir en segundo plano y de gestionar los cambios en la calidad de la conexión.",{"lead":313,"tone":70,"text":314},"Acceso directo a la radio","Astra no necesitaba presentar un gran número de secciones antes de dejar escuchar. El directo tenía que estar disponible nada más abrir la app.",{"lead":316,"tone":70,"text":317},"Una arquitectura centrada en la escucha","El benchmarking mostró que algunas apps de radio combinaban demasiado contenido. Astra adoptó una estructura más enfocada, separando radio, programación, historial y contenido complementario.",{"lead":319,"tone":70,"text":320},"Diseñar para la recurrencia","Los picos de audiencia no mostraban un crecimiento sostenido. Se añadieron la programación y las notificaciones para recordar a los usuarios los programas relevantes y facilitar que volvieran a horas concretas.",{"lead":322,"tone":70,"text":323},"Integración con el ecosistema existente","La app tenía que formar parte del ecosistema de Astra. Se conectó con AzuraCast y con las fuentes de contenido existentes para mantener sincronizados el directo, las pistas, los programas y la información editorial.",{"lead":325,"tone":70,"text":326},"Biblioteca para escuchar sin conexión","La dependencia de una conexión estable afectaba también a la escucha en directo. Se creó una biblioteca disponible tras el registro como alternativa para cuando los usuarios no podían mantener la conexión.","Estrategia y decisiones de diseño","Seis decisiones guiaron la primera versión",[330,333,336,339,342,345],{"lead":331,"text":332,"tone":70},"La radio primero","Acceso inmediato a la escucha en directo desde la primera pantalla.",{"lead":334,"text":335,"tone":70},"Reproducción persistente","La escucha continúa durante la navegación y en segundo plano.",{"lead":337,"text":338,"tone":70},"Biblioteca sin conexión","Una selección descargable para que la escucha no dependa de la conexión.",{"lead":340,"text":341,"tone":70},"Actualización semanal","La biblioteca se renueva en un calendario predecible, anunciado con antelación.",{"lead":343,"text":344,"tone":70},"Menos pasos","Reducir la distancia entre abrir la app y oír sonido.",{"lead":346,"text":347,"tone":70},"Construido alrededor de la escucha","Los programas, las pistas y la comunidad apoyan la reproducción en vez de competir con ella.",{"action":349,"title":428,"lead":429,"text":430,"findingsHeaders":431,"findings":432,"imageLayout":439,"images":440},{"label":350,"modalTitle":351,"groups":352},"Ver la solución y la validación completas","Cómo la solución evolucionó hasta una beta funcional",[353,355,363,391,424],{"text":354},"\u003Cp>La solución se construyó a través de exploración, wireframes, pruebas e iteración. El objetivo era mantener la escucha en el centro de la experiencia y validar las decisiones antes de consolidar la versión beta.\u003C/p>",{"title":356,"list":357},"La solución propuesta",[358,359,360,361,362],"Radio en directo con reproducción persistente.","Biblioteca con 100 pistas disponibles sin conexión.","Actualización semanal del contenido descargado.","Programación e información de la emisión en directo.","Notificaciones para fomentar que vuelvan.",{"title":364,"text":365,"images":366},"Evolución del diseño","\u003Cp>Se exploraron distintas arquitecturas y jerarquías antes de llegar al prototipo final: navegación inicial, variantes de la portada, reproductor, programas, biblioteca y contenido editorial. Las pruebas permitieron comparar propuestas antes de decidir qué estructura reforzaba mejor la escucha.\u003C/p>",[367,371,375,379,383,387],{"src":368,"alt":369,"caption":370},"/media/projects/astra-fm-app/wireframe-home-hero-led.webp","Wireframe de la home, variante con hero","Home — con hero",{"src":372,"alt":373,"caption":374},"/media/projects/astra-fm-app/wireframe-home-player-led.webp","Wireframe de la home, variante con reproductor","Home — con reproductor",{"src":376,"alt":377,"caption":378},"/media/projects/astra-fm-app/wireframe-shows-list.webp","Wireframe de programas, variante de lista","Shows — lista",{"src":380,"alt":381,"caption":382},"/media/projects/astra-fm-app/wireframe-library.webp","Wireframe de la biblioteca","Library",{"src":384,"alt":385,"caption":386},"/media/projects/astra-fm-app/wireframe-library-grid.webp","Wireframe de la biblioteca con las playlists en cuadrícula y chips de filtro","Library — cuadrícula",{"src":388,"alt":389,"caption":390},"/media/projects/astra-fm-app/wireframe-library-list.webp","Wireframe de la biblioteca con las pistas en lista, indicadores de descarga y una barra de progreso","Library — lista con descargas",{"title":392,"text":393,"table":394},"Pruebas y hallazgos","\u003Cp>Las pruebas se centraron en las tareas principales de escucha y biblioteca: acceder a la radio, reconocer el estado de la reproducción, entender qué contenido estaba disponible sin conexión, iniciar descargas y comprender la actualización semanal. Las dificultades observadas se convirtieron directamente en iteraciones de producto.\u003C/p>",{"headers":395,"rows":399},[396,397,398],"Hallazgo durante las pruebas","Iteración realizada","Objetivo del cambio",[400,404,408,412,416,420],[401,402,403],"La actualización semanal de la biblioteca no se entendía con claridad","Se añadieron una fecha de actualización y un aviso previo","Evitar que las pistas descargadas desaparezcan sin avisar",[405,406,407],"No quedaba claro qué pistas estaban disponibles sin conexión","Se añadió un estado visual para identificar el contenido descargado","Hacer más fácil de reconocer la música sin conexión",[409,410,411],"El progreso de la descarga no era visible","Se añadieron un indicador de progreso y una confirmación al terminar","Dar control y confianza durante las descargas",[413,414,415],"Acceder a la radio requería demasiados pasos","Se dio más protagonismo al reproductor y se simplificó el acceso","Permitir que la escucha empiece de inmediato",[417,418,419],"La reproducción podía interrumpirse al cambiar de contexto","Se reforzó el comportamiento de reproducción persistente y en segundo plano","Mantener la continuidad de la escucha",[421,422,423],"Los testers necesitaban saber cuándo había versiones nuevas","Las actualizaciones se comunicaron por redes sociales y canales de la beta","Fomentar las actualizaciones y recoger feedback de cada versión",{"note":425},{"type":146,"title":426,"message":427},"Cambios principales entre versiones","Se añadieron una fecha de actualización de la biblioteca y un aviso previo; se introdujo un estado visual para el contenido descargado; se hizo visible el progreso de descarga; se simplificó el acceso a la radio; se reforzaron la reproducción persistente y en segundo plano; y se comunicaron las nuevas versiones a los testers para recoger feedback de forma continua.","Solución y validación","De los wireframes a una beta funcional","\u003Cp>Las pruebas revelaron puntos de fricción concretos: no se entendía la actualización semanal, el estado sin conexión no quedaba claro, el progreso de descarga no era visible y acceder a la radio requería demasiados pasos. Cada hallazgo se convirtió en una iteración de producto.\u003C/p>",[396,397,398],[433,434,435,436,437,438],{"finding":401,"iteration":402,"goal":403},{"finding":405,"iteration":406,"goal":407},{"finding":409,"iteration":410,"goal":411},{"finding":413,"iteration":414,"goal":415},{"finding":417,"iteration":418,"goal":419},{"finding":421,"iteration":422,"goal":423},"row",[441,442,443,444],{"src":368,"alt":369,"caption":370},{"src":372,"alt":373,"caption":374},{"src":380,"alt":381,"caption":382},{"src":376,"alt":445,"caption":378},"Wireframe de la lista de programas",{"action":447,"title":511,"lead":512,"imageLayout":439,"singleRow":65,"images":513},{"label":448,"modalTitle":449,"groups":450},"Ver todos los diseños finales","El diseño final de la app de Astra",[451,478,506],{"text":452,"imagesColumns":453,"images":454},"\u003Cp>La interfaz final organiza la experiencia en torno a la escucha en directo, la programación, las novedades musicales y una biblioteca sin conexión. Estas pantallas muestran los flujos principales de la beta y, debajo, una selección de componentes preparados para la entrega a desarrollo.\u003C/p>",3,[455,459,463,467,471,474],{"src":456,"alt":457,"caption":458},"/media/projects/astra-fm-app/final-home.webp","Pantalla de inicio en un mockup de iPhone","Home",{"src":460,"alt":461,"caption":462},"/media/projects/astra-fm-app/final-radio.webp","Pantalla de radio en directo en un mockup de iPhone","Live radio",{"src":464,"alt":465,"caption":466},"/media/projects/astra-fm-app/final-shows.webp","Pantalla de programas en un mockup de iPhone","Shows",{"src":468,"alt":469,"caption":470},"/media/projects/astra-fm-app/final-news.webp","Pantalla de novedades en un mockup de iPhone","News",{"src":472,"alt":473,"caption":382},"/media/projects/astra-fm-app/final-library.webp","Pantalla de la biblioteca en un mockup de iPhone",{"src":475,"alt":476,"caption":477},"/media/projects/astra-fm-app/final-player.webp","Pantalla del reproductor sin conexión en un mockup de iPhone","Player offline",{"title":479,"text":480,"cardsColumns":292,"cards":481},"Developer handoff","\u003Cp>La entrega no terminaba en las pantallas finales. Los componentes se publicaron en Astra Library con propiedades, dimensiones y comportamientos definidos, para que desarrollo pudiera implementar patrones reutilizables en lugar de rehacer cada pantalla por separado.\u003C/p>",[482,488,494,500],{"lead":483,"image":484,"textHtml":487},"AppMiniPlayer",{"src":485,"alt":486},"/media/projects/astra-fm-app/component-mini-player.webp","Componente AppMiniPlayer","\u003Cp>Uso · Reproductor persistente durante la navegación.\u003C/p>\u003Cp>Contrato de implementación · 393 × 60 · Props: title, artist · Mantiene play/pausa y las acciones secundarias dentro de un mismo patrón reutilizable.\u003C/p>",{"lead":489,"image":490,"textHtml":493},"LibraryCard",{"src":491,"alt":492},"/media/projects/astra-fm-app/component-library-card.webp","Componente LibraryCard","\u003Cp>Uso · Elemento reutilizable para cada playlist de la biblioteca.\u003C/p>\u003Cp>Contrato de implementación · 180 × 222 · Props: title, songCount · La portada y el contenido pueden cambiar sin modificar la estructura.\u003C/p>",{"lead":495,"image":496,"textHtml":499},"TrackListRowMobile",{"src":497,"alt":498},"/media/projects/astra-fm-app/component-track-row.webp","Componente TrackListRowMobile","\u003Cp>Uso · Fila de pista para la biblioteca y el contenido descargado.\u003C/p>\u003Cp>Contrato de implementación · 393 × 60 · Props: track, artist, time · El estado final comunica la disponibilidad sin conexión sin crear una variante de maquetación aparte.\u003C/p>",{"lead":501,"image":502,"textHtml":505},"UpdateBanner",{"src":503,"alt":504},"/media/projects/astra-fm-app/component-update-banner.webp","Componente UpdateBanner","\u003Cp>Uso · Estado de la actualización semanal de la biblioteca.\u003C/p>\u003Cp>Contrato de implementación · 361 × 106 · Prop: subtitle · Define el mensaje, la acción principal, la secundaria y el comportamiento de cierre dentro del mismo componente.\u003C/p>",{"cardsColumns":115,"cards":507},[508],{"lead":509,"tone":70,"text":510},"Principio de entrega","Figma actúa como fuente de verdad para propiedades, estados y tokens. Las pantallas muestran cómo se componen los patrones; el contrato de cada componente evita especificaciones duplicadas durante la implementación.","Diseño final","Una experiencia centrada en la radio en tres pantallas principales",[514,515,516],{"src":456,"alt":457,"caption":458},{"src":460,"alt":461,"caption":462},{"src":472,"alt":473,"caption":382},{"title":518,"lead":519,"text":520,"cards":521,"note":532,"list":536},"Resultados y aprendizajes","Lo conseguido y lo que aún hay que validar","\u003Cp>El resultado actual es una experiencia móvil funcional, lista para medir el comportamiento real. La beta permite validar la solución antes del lanzamiento público sin presentar métricas futuras como un impacto que todavía no se ha demostrado.\u003C/p>",[522,524,527,529],{"lead":24,"text":523,"tone":70},"Beta lanzada para validar la experiencia antes del lanzamiento público.",{"lead":525,"text":526,"tone":70},"100 pistas sin conexión","Biblioteca descargable con actualización semanal.",{"lead":334,"text":528,"tone":70},"Escucha en segundo plano y continuidad entre cambios de contexto.",{"lead":530,"text":531,"tone":70},"Integración con Astra","La app se conecta a AzuraCast y a las fuentes existentes para sincronizar la radio en directo, las pistas y los programas.",{"type":533,"title":534,"message":535},"warning","Impacto y adopción","Estas métricas se medirán tras el lanzamiento público. En esta fase se definen como indicadores de seguimiento, no como resultados ya alcanzados.",[537,538,539,540,541,542,543,544,545,546],"Testers reclutados y activación de la beta.","Descargas o instalaciones.","Tiempo medio de escucha.","Recurrencia semanal.","Uso de la biblioteca sin conexión.","Interrupciones o abandonos frente a la experiencia web.","Próximos pasos: analizar el comportamiento tras el lanzamiento público.","Próximos pasos: validar el uso y la comprensión de la actualización semanal.","Próximos pasos: mejorar la estabilidad a partir de los datos de reproducción.","Próximos pasos: evaluar nuevas funcionalidades a partir del uso real.",{"type":548,"value":549,"toc":550},"minimark",[],{"title":10,"searchDepth":292,"depth":292,"links":551},[],{"title":553,"description":554,"tags":555,"image":560},"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.",[23,556,557,558,559],"Design","Testing","Development","Monitoring",{"src":456,"alt":561},"Pantalla de inicio de la app de Astra.fm","Astra","August 2026","Astra ya tenía una audiencia mayoritariamente móvil, pero la escucha seguía dependiendo de una conexión estable y estaba limitada por los navegadores. La app se diseñó para que la escucha fuera continua, fiable y estuviera disponible sin conexión.",false,"md",{},"/product-design/astra-fm-app.es","case_study","Product Design, Research, iOS + Android",null,{"title":15,"description":564},"published","product-design/astra-fm-app.es","Z0qdJHLQD2lqeHpikE5LMwj2xwrqVy9Bn2jJkHsKn2Q",{"/product-design/astra-fm-app":577,"/product-design/astra-redesign":581,"/product-design/booking-engine-setup":590,"/product-design/jackpot-ecosystem":602,"/product-design/la-caixa":614,"/product-design/new-client-area":625,"/product-design/new-reservation-details":635,"/product-design/redesign-breast-simulator":648},{"title":553,"description":554,"tags":578,"image":579,"to":580,"status":573,"company":562,"date":563},[23,556,557,558,559],{"src":456,"alt":561},"/product-design/astra-fm-app",{"title":582,"description":583,"tags":584,"image":586,"to":588,"status":573,"company":562,"date":589},"Astra Redesign","Rehacer una plataforma de radio multimedia en torno al streaming, el descubrimiento y una identidad visual más clara.",[22,585],"Design Systems",{"src":587,"alt":582},"/media/2026/02/Captura-de-pantalla-2026-02-13-a-las-18.22.02-scaled.webp","/product-design/astra-redesign","September 2024",{"title":591,"description":592,"tags":593,"image":596,"to":599,"status":573,"company":600,"date":601},"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.",[594,595],"UX Research","Product Strategy",{"src":597,"alt":598},"/media/projects/guesty/hero.webp","Booking Engine Setup de Guesty","/product-design/booking-engine-setup","Guesty","July 2023",{"title":603,"description":604,"tags":605,"image":607,"to":610,"status":611,"company":612,"date":613},"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.",[22,606],"UX Architecture",{"src":608,"alt":609},"/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":615,"description":616,"tags":617,"image":620,"to":623,"status":573,"company":615,"date":624},"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.",[618,619],"Researcher","User testing",{"src":621,"alt":622},"/media/2026/03/image-hero-detail.webp","Plataforma de reservas de La Caixa","/product-design/la-caixa","April 12, 2017",{"title":626,"description":627,"tags":628,"image":630,"to":633,"status":611,"company":612,"date":634},"Alea - Client Area","A design system built from the product's needs and applied to the new Client Area: catalogue, calendar, downloads and RTP.",[22,629],"Design System",{"src":631,"alt":632},"/media/projects/alea/client-area/dashboard.webp","New Client Area dashboard","/product-design/new-client-area","October 16, 2024",{"title":636,"description":637,"tags":638,"image":641,"to":644,"status":645,"company":646,"date":647},"Kigo - New reservation details","El rediseño organizó el detalle de reserva para evitar confusiones y reducir las llamadas y los correos a soporte.",[639,640],"IA Design","Prototyping and testing",{"src":642,"alt":643},"/media/2026/02/image-hero-detail-v2.svg","Detalle de reserva de Kigo","/product-design/new-reservation-details","wip","Kigo","March 14, 2019",{"title":649,"description":650,"tags":651,"image":653,"to":656,"status":573,"company":657,"date":658},"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.",[22,652],"User Research",{"src":654,"alt":655},"/media/projects/crisalix/hero.webp","Simulador de Crisalix","/product-design/redesign-breast-simulator","Crisalix","July 2019",[660],{"slug":661,"name":612,"logo":662,"logoAlt":612,"summary":663,"description":664},"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.",1793895644734]