[{"data":1,"prerenderedAt":237},["ShallowReactive",2],{"work-en-beau-rivage":3,"work-cards-en":150},{"id":4,"title":5,"approach":6,"body":72,"brief":79,"card":85,"description":76,"extension":89,"gallery":90,"hero":107,"heroAlt":108,"meta":109,"navigation":110,"outcome":111,"path":115,"problem":116,"reflection":119,"resources":120,"role":136,"seo":145,"status":146,"stem":147,"summary":148,"__hash__":149},"work_en\u002Fwork\u002Fbeau-rivage.md","Beau-Rivage Eco-Redesign",[7,25,37,54,59],{"label":8,"title":9,"prose":10,"artifacts":13},"Audit","Weighing the existing site",[11,12],"Before redesigning anything we measured what was there, because eco-conception only means something against a baseline. The existing site leaned on autoplay video and unoptimized images across a deep structure of rooms, suites, restaurants, bars, and spas. A single page weighed more than thirteen megabytes and scored an F on EcoIndex, with an estimated 368 kg of CO2 a year at ten thousand visits a month.","We also mapped the real user journeys (a prospect informing themselves, a guest comparing rooms) so the redesign could keep what people actually came for while shedding the weight they never asked for.",[14,20],{"src":15,"alt":16,"caption":17,"decision":18,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-audit-1.jpg","A project slide titled 'Revue des éléments du site non écoconçus' with three columns, Vidéos, Images and Animations, listing the original site's media as high quality, oversized, uncompressed and on autoplay.","Audit — the original site's media, reviewed.","Naming every heavy ingredient first showed that video and images were most of the weight, so that is where the redesign would be won or lost.","half",{"src":21,"alt":22,"caption":23,"decision":24,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-audit-2.jpg","A project slide titled 'Revue des éléments du site non écoconçus' noting illustrations with no informative value, very large quantities of high-quality media, and pages that repeat another page's content.","Audit — how much of it carried no information.","Most of the media was decorative, so we could cut weight without cutting anything a guest actually came for.",{"label":26,"title":27,"prose":28,"artifacts":30},"Redesign","Luxury without the weight",[29],"The design question was the interesting one: how do you keep an image of prestige while removing the heavy ingredients that usually signal it? We rebuilt the key pages (the homepage, the rooms and suites, a suite like the Riviera) around restraint, treating generous space and careful typography as the luxury signal instead of autoplay spectacle.",[31],{"src":32,"alt":33,"caption":34,"decision":35,"width":36},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-redesign.jpg","A project slide titled 'Comment retranscrire le luxe de manière écoconçue?' pairing a four-point design approach (refined layout, revalued colors, lighter media via sober SVGs, less content) with mockups of the redesigned homepage, the La Plage page and the Suite Riviera.","Redesign — keeping the luxury, dropping the weight.","We treated restraint as the luxury signal, putting refined type and space and sober SVGs in place of autoplay spectacle.","wide",{"label":38,"title":39,"prose":40,"artifacts":43},"Build","Nuxt 3, SSR, and image discipline",[41,42],"We started from Vue, the framework we knew, and moved to Nuxt 3 specifically for the sustainability tools it brings. Server-side rendering means the page arrives ready to display with minimal work on the visitor's device, and Nuxt Image handles the single biggest source of weight automatically: converting images to modern formats like WebP and AVIF, lazy-loading them, and resizing them to the actual screen rather than shipping one huge file to everyone.","That combination is most of the win. An SSR architecture on Node.js keeps client-side work and therefore device energy low, and disciplined image handling turns the heaviest pages into the lightest. The point throughout was that sustainability here is not a vibe, it is specific technical choices with measurable effects.",[44,49],{"src":45,"alt":46,"caption":47,"decision":48,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-build-1.jpg","A project slide titled 'Nuxt Image' showing a Beau-Rivage interior converted to AVIF and resized, dropping from 51.5 kB to 22.5 kB, a 56% saving, beside the NuxtImg code that does it.","Build — Nuxt Image does the heavy lifting.","Automatic conversion to WebP and AVIF, plus resizing to the viewport, turned the heaviest source of weight into the lightest.",{"src":50,"alt":51,"caption":52,"decision":53,"width":19},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-build-2.jpg","A project slide titled 'Server-Side Rendering (SSR)' with a diagram of the request flow where the server sends ready-made HTML so the page displays with minimal work on the visitor's device.","Build — server-side rendering on Nuxt 3.","Rendering on the server means the page arrives ready to show, keeping client-side work and device energy low.",{"label":55,"title":56,"prose":57},"Hosting","Looking for green, honestly",[58],"We also looked at where the site would live, checking hosts against the Green Web Foundation's dataset. The honest finding was a gray area: our platform runs on AWS infrastructure in Europe, which claims renewable energy but is not cleanly listed as green. Rather than overclaim, we noted it as a real limit, because an eco-conception project that fudges its own hosting is not being honest about its footprint.",{"label":60,"title":61,"prose":62,"artifacts":65},"Results","From F to A",[63,64],"The before-and-after is the part I am proudest of, because it is measured, not asserted. Page weight dropped from 13.11 MB to 504 KB. Estimated annual carbon fell from 368 kg to 15.35 kg of CO2. The EcoIndex grade went from F to A, and the overall quality score rose from 36 to 73, with performance climbing from 66 to 98.","That is roughly a 95% reduction in weight and carbon, a site about twenty times lighter, with usability and performance going up rather than down. The luxury survived the diet.",[66],{"src":67,"alt":68,"caption":69,"decision":70,"width":71},"\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fartifact-results.jpg","Four measurement tools comparing the original and redesigned site: Website Carbon (F to A, 368 to 15.35 kg CO2 a year), Beacon (13.11 MB to 504 KB), Ecograder (36 to 73) and Lighthouse (performance 66 to 98).","Results — measured across four tools, before and after.","Every number in this study is one of these four readings, before and after, not an assertion.","full",{"type":73,"value":74,"toc":75},"minimark",[],{"title":76,"searchDepth":77,"depth":77,"links":78},"",2,[],{"role":80,"year":81,"host":82,"scope":83,"shipped":84},"Eco-design & build","2025","HEIG-VD · Eco-conception","Team of four","Redesign + Nuxt 3 build",{"title":86,"alt":87,"image":88},"Beau-Rivage Eco-Redesign — a 95% lighter luxury hotel site","The redesigned Beau-Rivage Palace site: restrained, elegant, far lighter than the original.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fadjacent.jpg","md",[91,95,99,103],{"alt":92,"caption":93,"src":94},"Redesigned homepage editorial band: the Beau-Rivage Palace facade above its outdoor pool and Lake Geneva, under the heading Le Beau Rivage.","Homepage — the hotel, set on the lake.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-01.jpg",{"alt":96,"caption":97,"src":98},"Redesigned Chambres et Suites page: four room cards (Supérieure vue ville, vue lac et alpes, Deluxe, Deluxe Riviera) in optimized interior photography.","Rooms — the listing, rebuilt light.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-02.jpg",{"alt":100,"caption":101,"src":102},"The Suite Riviera page: a four-image grid of the suite's salon, bedroom and lake-view bathroom in optimized photography.","Suite Riviera — luxury without the weight.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-03.jpg",{"alt":104,"caption":105,"src":106},"Redesigned Restaurants et Bars page: cards for PIC au Beau-Rivage Palace, Café Beau-Rivage and La Terrasse in optimized photography.","Restaurants and bars — the range, kept light.","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fgallery-04.jpg","\u002Fimages\u002Fwork\u002Fbeau-rivage\u002Fhero.jpg","The redesigned Beau-Rivage Palace homepage at rest: a restrained top navigation and the centered 'Beau-Rivage Palace, Lausanne Switzerland' logo over a field of fine gold lines, far lighter than the original site.",{},true,[112,113,114],"A redesigned Beau-Rivage Palace site that is roughly 95% lighter in weight and carbon than the original, EcoIndex F to A, while keeping the feel of a five-star brand.","A Nuxt 3 build using server-side rendering and automatic image optimization as the main levers, with a measured before-and-after rather than a claim.","An honest account of the limits, including the gray area around green hosting, because an eco-conception project has to measure its own footprint truthfully.","\u002Fwork\u002Fbeau-rivage",[117,118],"Luxury hotel websites are some of the heaviest on the web: autoplay video, enormous images, and every format imaginable, all in the name of prestige. That weight is not free. It is bandwidth, energy, and carbon on every single visit.","The brief was to redesign the Beau-Rivage Palace website under eco-conception (responsible digital design) principles, and the real challenge was the tension inside it: cut the site's environmental cost dramatically without losing the sense of luxury that is the whole point of the brand.","This project made digital sustainability concrete for me. It is easy to talk about responsible design in the abstract; it is much more useful to cut a real site's carbon by 95% and be able to show the numbers. The lesson that stuck is that the heaviest, most wasteful parts of a site are usually the most automatable to fix, images above all, and that you can be lighter and faster and still feel expensive. It sits close to the question behind my thesis: making the invisible energy cost of the digital visible, and then doing something about it.",[121,125,129,133],{"type":122,"title":123,"url":124},"demo","Version éconçue du site (démo)","https:\u002F\u002Fheig-ecoconception-brp.netlify.app\u002F",{"type":126,"title":127,"url":128},"github","Code source (Nuxt 3)","https:\u002F\u002Fgithub.com\u002Fjerem-marti\u002FHEIG-VD_COMEM_IM51_EcoC_Groupe-CJJN",{"type":130,"title":131,"url":132},"pdf","Présentation du projet","\u002Ffiles\u002Fbeau-rivage-presentation.pdf",{"type":130,"title":134,"url":135},"Déclaration d'écoconception (RGESN)","\u002Ffiles\u002Fbeau-rivage-rgesn.pdf",{"led":137,"contributed":140,"notTouched":142,"team":144},[138,139],"The technical build: the move to Nuxt 3, server-side rendering, and the image-optimization pipeline","The before-and-after measurement of weight, carbon, and performance",[141],"The audit of the existing site and the redesign, with the team",[143],"Parts of the visual design and the mockups, shared within the team of four","Team of four (Group CJJN) for the Eco-conception module at HEIG-VD: Nicolas Aerny, Joël Gaillard, Jérémy Martin, and Clément Künzi. Taught by Stéphane Lecorney.",{"title":5,"description":76},"live","work\u002Fbeau-rivage","A ground-up eco-redesign of the Beau-Rivage Palace website that cut its weight and carbon by roughly 95% while keeping the feel of a five-star hotel. An audit of the existing site, a fresh design, and a Nuxt 3 build tuned for sustainability.","-wPdzDuGtFxwzz72qxuYdMDOxV7zNi2GkI8YWPIw64A",[151,157,163,165,171,177,183,189,195,201,207,213,219,225,231],{"path":152,"card":153},"\u002Fwork\u002Fa-ta-dispo",{"title":154,"alt":155,"image":156},"À ta Dispo — matching event volunteers with organizers","The hand-drawn À ta Dispo wordmark, a coral logo on a pink sticker shape, on a plain coral background.","\u002Fimages\u002Fwork\u002Fa-ta-dispo\u002Fadjacent.jpg",{"path":158,"card":159},"\u002Fwork\u002Fan-aura-of-words",{"title":160,"image":161,"alt":162},"An Aura of Words — Lugano's parks, told by their reviews","\u002Fimages\u002Fwork\u002Fan-aura-of-words\u002Fadjacent.jpg","Lugano's five parks shown on a map, each as a color-blended organic aura sized by review volume.",{"path":115,"card":164},{"title":86,"alt":87,"image":88},{"path":166,"card":167},"\u002Fwork\u002Fbereal",{"title":168,"alt":169,"image":170},"Re-coding BeReal — a dual-camera capture and image pipeline","Re-coding BeReal: the composed dual-photo post beside a friend's feed, on a dark mobile interface.","\u002Fimages\u002Fwork\u002Fbereal\u002Fadjacent.jpg",{"path":172,"card":173},"\u002Fwork\u002Fbrushbuddy",{"title":174,"image":175,"alt":176},"BrushBuddy — a monster cube that guides two-minute toothbrushing","\u002Fimages\u002Fwork\u002Fbrushbuddy\u002Fadjacent.jpg","A hand lifts the toothbrush from the dock on top of the BrushBuddy cube, which has a worried yellow monster face.",{"path":178,"card":179},"\u002Fwork\u002Fcultural-trails",{"title":180,"alt":181,"image":182},"Cultural Trails — a full-stack heritage walking app","Two screens from the Sentiers culturels app on the project's green, peach and blue trail ribbon: the explore map of trails across the Lausanne shore, and in-walk navigation following a route on a satellite map.","\u002Fimages\u002Fwork\u002Fcultural-trails\u002Fadjacent.jpg",{"path":184,"card":185},"\u002Fwork\u002Fdatabloom",{"title":186,"image":187,"alt":188},"DataBloom — making the energy impact of digital usage visible","\u002Fimages\u002Fwork\u002Fdatabloom\u002Fadjacent.jpg","The DataBloom flower: ultramarine felt petals on a green segmented stem in a small terracotta pot, on a white studio backdrop.",{"path":190,"card":191},"\u002Fwork\u002Felen",{"title":192,"image":193,"alt":194},"ELEN — a speculative camera for invisible wireless presences","\u002Fimages\u002Fwork\u002Felen\u002Fadjacent.jpg","ELEN, a handheld camera with a translucent orange body and twin white handles, lit on a gray studio backdrop, its deep-blue screen showing through the plexiglass.",{"path":196,"card":197},"\u002Fwork\u002Ffamily-space",{"title":198,"image":199,"alt":200},"UBS Family Space — a family's shared place to manage money","\u002Fimages\u002Fwork\u002Ffamily-space\u002Fadjacent.jpg","UBS Family Space concept: two phone screens on a soft red gradient, a parent's hub for the child's analytics, limits, and goals, and the child's savings-goal screen.",{"path":202,"card":203},"\u002Fwork\u002Fhuman-loci",{"title":204,"image":205,"alt":206},"Human Loci — a synesthetic listening object","\u002Fimages\u002Fwork\u002Fhuman-loci\u002Fadjacent.jpg","Human Loci: a transparent acrylic listening box with three plaster disks for a park, a marina, and a train station.",{"path":208,"card":209},"\u002Fwork\u002Fmeeting-pond",{"title":210,"alt":211,"image":212},"Meeting Pond — connected light objects for distant presence","Two connected Meeting Pond units standing side by side, one glowing blue and the other pink, each showing ripples across a 32×32 LED grid.","\u002Fimages\u002Fwork\u002Fmeeting-pond\u002Fadjacent.jpg",{"path":214,"card":215},"\u002Fwork\u002Fthea",{"title":216,"image":217,"alt":218},"Thea — a calm new sense for living with allergies","\u002Fimages\u002Fwork\u002Fthea\u002Fadjacent.jpg","The Thea wearable suspended in a lattice of orange cords against a cobalt sky, its oblong gauge glowing, an editorial shot from the final presentation.",{"path":220,"card":221},"\u002Fwork\u002Fuefa-female-coaches",{"title":222,"alt":223,"image":224},"Why Not You? — the UEFA female coaches campaign","The Why Not You? campaign: bold display typography over a female coach, with the line Lead Your Passion, Shape the Game.","\u002Fimages\u002Fwork\u002Fuefa-female-coaches\u002Fadjacent.jpg",{"path":226,"card":227},"\u002Fwork\u002Fwama",{"title":228,"image":229,"alt":230},"Wama — machine learning as a sink-side witness","\u002Fimages\u002Fwork\u002Fwama\u002Fadjacent.jpg","Wama's built sink rig at an angle: a tap pouring into a clear basin, the phone in its laser-cut holder showing the character.",{"path":232,"card":233},"\u002Fwork\u002Fwematch",{"title":234,"image":235,"alt":236},"WeMatch — an AX matching service for the WeRoad world","\u002Fimages\u002Fwork\u002Fwematch\u002Fadjacent.jpg","WeMatch title card: 'WeMatch finds your group before you find your trip' in coral and ink on a soft white-to-pink gradient, with the round Matchy agent character.",1783535584989]