[{"data":1,"prerenderedAt":350},["ShallowReactive",2],{"layout-profile":3,"project-product-design-astra-redesign-en":13,"project-cards-en":259,"client-hubs-en":344},{"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":48,"description":225,"encrypted":226,"extension":227,"meta":228,"navigation":67,"path":229,"postType":230,"role":231,"sections":232,"seo":255,"status":256,"stem":257,"subtitle":19,"__hash__":258},"productDesign/product-design/astra-redesign.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","Keeping people on the site, not just on the stream.","\u003Cp>Astra is a multimedia platform built around streaming radio and amateur photography from an experimental perspective. The site did one thing well and nothing else: you arrived, you listened, you left. The redesign set out to give it reasons to stay, without turning an independent radio into a 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","Astra.fm home after the redesign, with new releases and the featured track","The home after the redesign","Releases and editorial share the first screen with the player, so there is something to do beyond pressing play.",{"title":34,"lead":35,"groups":36,"note":54},"A radio with nothing to do around it","Sessions were short and almost nobody came back. The problem was not the stream, it was everything the site did not offer.",[37,52],{"cards":38},[39,43,46,49],{"lead":40,"text":41,"tone":42},"Company","Astra","subtle",{"lead":44,"text":45,"tone":42},"Role","Researcher, information architecture, visual design, prototyping and testing",{"lead":47,"text":48,"tone":42},"Date","September 2024",{"lead":50,"text":51,"tone":42},"Scope","Research, IA, design system foundations and the redesigned site",{"text":53},"\u003Cp>The redesign had one objective: keep people on the site longer, not only to listen to the radio but to use the platform as somewhere to spend time with music and art from an alternative perspective. As it stood, the radio had very little to attract or retain anyone, and the sessions showed it, both in visits and in listening time. Metrics and qualitative data made the case for rebuilding it.\u003C/p>",{"type":55,"title":56,"message":57},"info","What this case reports","The project is documented through research, design and handoff. It reports what was found, decided and built rather than post-launch results, which were not measured as part of this work.",{"title":59,"lead":60,"groups":61,"note":76},"The numbers said the same thing twice","Almost everyone arriving was new, and almost nobody stayed four minutes.",[62,74],{"cards":63},[64,68,71],{"lead":65,"text":66,"stat":67,"tone":42},"312","new users against 33 returning: the audience renewed itself instead of coming back",true,{"lead":69,"text":70,"stat":67,"tone":42},"33","returning users, which is what made retention the problem to solve",{"lead":72,"text":73,"stat":67,"tone":42},"4m 10s","average interaction time per session across cohorts",{"text":75},"\u003Cp>Three readings pointed the same way. The proportion of new to returning users was so lopsided that growth was not the issue; retention was. Cohort analysis showed the long-term engagement was thin enough that it had to be built rather than optimised. And an average session of just over four minutes said the site gave people nothing to do once the stream was playing.\u003C/p>",{"type":55,"title":77,"message":78},"The conclusion that set the scope","The redesign could not be a visual refresh. If the average visit lasts four minutes, the work is to add reasons to stay, and that is an information architecture problem before it is a visual one.",{"title":80,"lead":81,"groups":82},"What the site was","A full-bleed image, the name of the track, and the player. Beautiful, and with nowhere to go.",[83,94],{"text":84,"images":85},"\u003Cp>The original landing page was built around large responsive images that filled the browser in both directions, with a short note about the featured work. It read as a statement rather than a site: everything the visitor could do was on that first screen, and it was to press play.\u003C/p>",[86,90],{"src":87,"crop":67,"alt":88,"caption":89},"/media/projects/astra-web/old-hero.webp","Original Astra.fm landing page, a full-bleed photograph with the player controls on top","The original landing page. The photograph fills the browser and the only affordance is the player.",{"src":91,"crop":67,"alt":92,"caption":93},"/media/projects/astra-web/old-home.webp","Original Astra.fm home with a dark layout and a single featured image","The home below the fold. Sections existed, but they were reached by scrolling past a full screen of image.",{"images":95},[96,100],{"src":97,"crop":67,"alt":98,"caption":99},"/media/projects/astra-web/old-player.webp","Original Astra.fm with the radio player expanded over the content","With the player open. The stream took the screen, so listening and browsing were exclusive of each other.",{"src":101,"alt":102},"/media/projects/astra-web/old-brand.webp","The original Astra mark, a triangular A in grey",{"title":104,"lead":105,"groups":106,"action":122},"From the metrics to a list of what the site was missing","A brainstorming session turned the data into components, and a competitor review told us which of them were worth building.",[107,114],{"text":108,"images":109},"\u003Cp>The session started from the objectives and a summary of the metrics and the qualitative data from the feedback forms. Ideas came out of the exchange rather than from a brief, and what came out of it was a list of the components that had to exist in the first phase.\u003C/p>",[110],{"src":111,"alt":112,"caption":113},"/media/2026/02/brainstorming.svg","Brainstorming board with the ideas grouped by area","Brainstorming. The objectives and the metrics on the table, and the essential components for the first phase coming out of it.",{"title":115,"text":116,"images":117},"Analysis of competitors","\u003Cp>The review covered products directly comparable to Astra and others with a long history in entertainment that could contribute ideas. Reading it against the quantitative data made the points to improve concrete, which is what allowed the redesign to be scoped instead of debated.\u003C/p>",[118],{"src":119,"alt":120,"caption":121},"/media/2026/02/competitors.webp","Competitor analysis board","The competitor review. Direct competitors alongside established entertainment products, read against our own numbers.",{"label":123,"modalTitle":124,"groups":125},"View the structure that came out of it","What the site was missing",[126,141],{"text":127,"cards":128},"\u003Cp>The redesign added sections so the experience goes beyond listening. The new areas include a blog with current writing on design, technology, cinema and photography, alongside the visual work the platform already had.\u003C/p>",[129,132,135,138],{"lead":130,"text":131},"Editorial","A blog with writing on design, technology, cinema and photography, so there is something to read while the stream plays.",{"lead":133,"text":134},"Visual work","The photography and visual art the platform is built around, given a place of its own instead of living inside the player.",{"lead":136,"text":137},"Shows","Programmes with their own description and history, so a listener can follow one rather than catch whatever is on.",{"lead":139,"text":140},"Releases","New music surfaced on the first screen, which is what gives a returning visitor a reason to come back.",{"title":142,"images":143},"The wireframes that fixed it",[144,148],{"src":145,"crop":67,"alt":146,"caption":147},"/media/projects/astra-web/wireframe-gallery.webp","Wireframe of the visual art gallery","Visual art gallery. The images get a grid of their own rather than a slot in the home.",{"src":149,"crop":67,"alt":150,"caption":151},"/media/projects/astra-web/wireframe-show.webp","Wireframe of a radio show description with its track history","Show description. The programme, its next tracks and the history, so the stream has context around it.",{"title":153,"lead":154,"groups":155},"Low fidelity first, and tested before it was designed","Sketches from the session became a prototype that could be iterated and put in front of a user as a task test.",[156],{"text":157,"images":158},"\u003Cp>With the sketches and the comments from the sessions collected, the idea was worked into a low-fidelity prototype: something that could be changed cheaply and, above all, shared with a user for validation in a task test format before anything looked finished.\u003C/p>",[159,163],{"src":160,"alt":161,"caption":162},"/media/2026/02/sketches-1.svg","Sketches created during the brainstorming session","Sketches created during the brainstorming session.",{"src":164,"alt":165,"caption":166},"/media/2026/02/wireframes.svg","Initial wireframes","Initial wireframes, the version that went into the task test.",{"title":168,"lead":169,"groups":170},"The visual layer started from its variables, not its screens","Primitives, spacing, tokens and an 8pt grid came first. The logo, the palette and the iconography came after.",[171,183],{"text":172,"cards":173},"\u003Cp>The design phase started from scratch and, deliberately, from the logic: the primitive colours, the numeric base, the paddings, margins and spacing, and the tokens for colour, devices and text modes, on an 8pt grid. Only once that was defined did the visible layer follow: the logo for desktop and mobile, the colour palette, the iconography and the components the redesign needed.\u003C/p>",[174,177,180],{"lead":175,"text":176},"Primitives and tokens","Colour, devices and text modes defined as variables in Figma before any screen existed.",{"lead":178,"text":179},"An 8pt base","Paddings, margins and spacing resolved on one grid, so the layout has a single source of measurement.",{"lead":181,"text":182},"Brand and iconography","A logo for desktop and mobile, the palette and the icon set, built on top of the variables rather than beside them.",{"title":184,"images":185},"The result",[186,190],{"src":187,"alt":188,"caption":189},"/media/2026/02/final-design.webp","Final Astra design in dark theme","Dark theme. The palette and the components resolved on the token base.",{"src":29,"alt":191,"caption":192},"Astra.fm home after the redesign","The redesigned home, with releases and editorial sharing the first screen with the player.",{"title":194,"lead":195,"cards":196,"note":209},"What the redesign established","Reported as what was delivered: the structure, the system and the decisions behind them.",[197,200,203,206],{"lead":198,"text":199},"A site with somewhere to go","Editorial, visual work, shows and releases give a visit a purpose beyond the four minutes the stream held.",{"lead":201,"text":202},"A token base, not a style","Colour, spacing and text modes were defined as variables, so the visual layer can change without redrawing the site.",{"lead":204,"text":205},"Validated before it was pretty","The task test ran on the low-fidelity prototype, which is where changing something still costs nothing.",{"lead":207,"text":208},"A brand that fits its container","The mark was redrawn for desktop and mobile as part of the system rather than dropped in at the end.",{"type":55,"title":210,"message":211},"What I would measure next","The same three readings that justified the redesign: the ratio of returning to new users, the average session length, and whether the new sections are what people actually reach for after pressing 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},"Rebuilding a multimedia radio platform around streaming, discovery and a clearer visual identity.",[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","Astra is a multimedia platform built around streaming radio and amateur photography from an experimental perspective. The redesign set out to give it reasons to stay: research, information architecture, a token base and a new visual layer.",false,"md",{},"/product-design/astra-redesign","case_study","Researcher, Information architecture, Visual Designer, Prototyping and testing",[233,236,238,240,243,246,249,252],{"id":234,"label":235,"field":234},"hero","Overview",{"id":237,"label":235,"field":237},"overview",{"id":239,"label":22,"field":239},"research",{"id":241,"label":242,"field":241},"before","The site before",{"id":244,"label":245,"field":244},"ideation","Ideation",{"id":247,"label":248,"field":247},"lofi","Low fidelity",{"id":250,"label":251,"field":250},"hifi","Visual system",{"id":253,"label":254,"field":253},"learnings","What it established",{"title":15,"description":225},"published","product-design/astra-redesign","LMKxr4-l-fA4NYOw_HJKDGPjYhlKUQaFs10VEzQfaVg",{"/product-design/astra-fm-app":260,"/product-design/astra-redesign":273,"/product-design/booking-engine-setup":276,"/product-design/jackpot-ecosystem":288,"/product-design/la-caixa":300,"/product-design/new-client-area":311,"/product-design/new-reservation-details":321,"/product-design/redesign-breast-simulator":333},{"title":261,"description":262,"tags":263,"image":268,"to":271,"status":256,"company":41,"date":272},"Astra.fm Mobile App","A mobile experience intended for the purpose of extending Astra.fm's music ecosystem, drawing in new listeners, and improving audience retention.",[22,264,265,266,267],"Design","Testing","Development","Monitoring",{"src":269,"alt":270},"/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":274,"image":275,"to":229,"status":256,"company":41,"date":48},[221,222],{"src":224,"alt":15},{"title":277,"description":278,"tags":279,"image":282,"to":285,"status":256,"company":286,"date":287},"Guesty - New Onboarding Flow","New architecture for the setup of Guesty’s Booking Engine to make configuration easy, removing obstacles so property owners can set it up quickly and start welcoming guests sooner.",[280,281],"UX Research","Product Strategy",{"src":283,"alt":284},"/media/projects/guesty/hero.webp","Booking Engine Setup de Guesty","/product-design/booking-engine-setup","Guesty","July 2023",{"title":289,"description":290,"tags":291,"image":293,"to":296,"status":297,"company":298,"date":299},"Alea - Jackpot Ecosystem","Two products defined from their business rules: an engine where a campaign is configured tab by tab, and a manager for the player-facing template.",[221,292],"UX Architecture",{"src":294,"alt":295},"/media/projects/alea/jackpot/image-home.webp","Template Manager, Content tab, with the opt-in modal previewed on a phone","/product-design/jackpot-ecosystem","private","Alea","2025",{"title":301,"description":302,"tags":303,"image":306,"to":309,"status":256,"company":301,"date":310},"La Caixa","PAC is a private initiative belonging to the La Caixa Foundation. It is a public platform where users can book rooms anywhere in Spain.",[304,305],"Researcher","User testing",{"src":307,"alt":308},"/media/2026/03/image-hero-detail.webp","Plataforma de reservas de La Caixa","/product-design/la-caixa","April 12, 2017",{"title":312,"description":313,"tags":314,"image":316,"to":319,"status":297,"company":298,"date":320},"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,315],"Design System",{"src":317,"alt":318},"/media/projects/alea/client-area/dashboard.webp","New Client Area dashboard","/product-design/new-client-area","October 16, 2024",{"title":322,"description":323,"tags":324,"image":326,"to":329,"status":330,"company":331,"date":332},"Kigo - New reservation details","The redesign organized the reservation detail to avoid confusion and reduce calls and emails to support.",[325,25],"IA Design",{"src":327,"alt":328},"/media/2026/02/image-hero-detail-v2.svg","Detalle de reserva de Kigo","/product-design/new-reservation-details","wip","Kigo","March 14, 2019",{"title":334,"description":335,"tags":336,"image":338,"to":341,"status":256,"company":342,"date":343},"Crisalix - 3D Aesthetic simulation","Redesign Crisalix's simulation experience so that surgeons would find it easier to create and manage 3D aesthetic procedure simulations based on patient images.",[221,337],"User Research",{"src":339,"alt":340},"/media/projects/crisalix/hero.webp","Simulador de Crisalix","/product-design/redesign-breast-simulator","Crisalix","July 2019",[345],{"slug":346,"name":298,"logo":347,"logoAlt":298,"summary":348,"description":349},"alea","/media/2026/02/Alea-RVB-Colour.svg","Product design for Alea, from the design system to the products built on it.","Product design for Alea, from the design system to the products built on it. Some details are confidential, so these case studies sit behind one password.",1793895644697]