[{"data":1,"prerenderedAt":228},["ShallowReactive",2],{"case-study-swissonal-en":3},{"id":4,"title":5,"extension":6,"liveIntro":7,"liveLinkText":8,"liveUrl":9,"meta":10,"scrollytelling":11,"sections":28,"stem":215,"subtitle":216,"tags":217,"__hash__":227},"caseStudies\u002Fen\u002Fwork\u002Fswissonal.yml","Swissonal","yml","View live",null,"https:\u002F\u002Fswissonal.ch",{},[12,16,20,24],{"title":13,"label":14,"image":15},"Role","Designer and developer","\u002Fmedia\u002Fillustrations\u002Fjob.png",{"title":17,"label":18,"image":19},"Timeline","May 2024 – Jul 2024","\u002Fmedia\u002Fillustrations\u002Fcalendar.png",{"title":21,"label":22,"image":23},"Team","1 designer\u002Fdeveloper","\u002Fmedia\u002Fillustrations\u002Fteam.png",{"title":25,"label":26,"image":27},"Tools","Figma, Nuxt 3, TypeScript, UnoCSS, GSAP, Lenis, PostHog, Vercel","\u002Fmedia\u002Fillustrations\u002Ftool.png",[29,32,34,38,42,45,48,55,58,60,64,71,76,79,83,85,87,92,95,100,102,107,109,114,123,127,129,134,136,141,146,150,153,163,166,168,172,177,180,188,192,194,199,205,207,209,213],{"type":30,"text":31},"heading","Project overview",{"type":33},"scrollytelling",{"type":35,"paragraphs":36},"prose",[37],"Swissonal started with a personal problem.",{"type":39,"paragraphs":40},"bracketBlock",[41],"I wanted a simple way to know what to plant and when to plant in Switzerland.",{"type":35,"paragraphs":43},[44],"The information existed, but it felt scattered, dense, and visually unhelpful for someone just getting started.",{"type":46,"text":47},"highlighted","So I turned that gap into a product.",{"type":49,"src":50,"alt":51,"caption":52,"variant":53,"aspect":54},"media","\u002Fmedia\u002Fcases\u002Fswissonal\u002Fwebsite-mockup.png","Swissonal website mockup","Swissonal: seasonal planting calendar for Switzerland.","bare","auto",{"type":35,"paragraphs":56},[57],"This became a self-initiated project where I combined brand strategy, UX\u002FUI, front-end development, and content structuring into one tool.",{"type":30,"text":59},"Research and direction",{"type":35,"paragraphs":61},[62,63],"I began with brainstorming, references, and possible competitors.","Then I moved into discovery and brand strategy using my own project questionnaire.",{"type":65,"items":66},"inlineTags",[67,68,69,70],"brainstorm","discovery","brand strategy","creative direction",{"type":49,"src":72,"alt":73,"caption":74,"variant":53,"rounded":75,"aspect":54},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Fquestions.png","Discovery and brand strategy material","Early project framing through discovery and brand questions.",true,{"type":35,"paragraphs":77},[78],"That phase helped me define the purpose, the audience, the tone, and the future ambition of the product.",{"type":49,"src":80,"alt":81,"caption":82,"variant":53,"rounded":75,"aspect":54},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Fmood-board.png","Swissonal creative direction","Creative direction: playful, Swiss, bold, and approachable.",{"type":46,"text":84},"I wanted Swissonal to feel alive. Gardening as a hobby should feel rewarding, not heavy.",{"type":30,"text":86},"Content architecture",{"type":35,"paragraphs":88},[89,90,91],"The hardest part was not visual.","It was informational.","I researched Swiss sources and used AI as support to reach a useful approximation of what could be planted each month in Switzerland.",{"type":35,"paragraphs":93},[94],"I structured the content into three main groups:",{"type":65,"items":96},[97,98,99],"fruits","vegetables and salads","herbs and teas",{"type":46,"text":101},"The core architecture was: language → month → plant type.",{"type":103,"src":104,"placeholderLabel":105,"alt":105,"caption":106,"variant":53,"aspect":54},"video","\u002Fmedia\u002Fcases\u002Fswissonal\u002Fcontent-architecture.mp4","Swissonal content architecture","Content architecture: language → month → plant type.",{"type":30,"text":108},"Design system and UI",{"type":35,"paragraphs":110},[111,112,113],"Once the structure was clear, I moved into wireframes and interface design.","I built the visual language around bold typography, strong contrast, cartoon-like stickers, and Swiss references.","The stickers came to life using Midjourney AI.",{"type":65,"items":115},[116,117,118,119,120,121,122],"red","green","black","white","stickers","bold type","Swiss references",{"type":49,"src":124,"alt":125,"caption":126,"variant":53,"rounded":75,"aspect":54},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Fimage-brand-style.jpg","Swissonal image direction","Brand direction",{"type":30,"text":128},"What I built",{"type":35,"paragraphs":130},[131,132,133],"I designed and coded the project myself.","This was before the current wave of vibe coding tools.","The implementation was manual and structured.",{"type":46,"text":135},"Swissonal was not a static website. It was a multilingual, content-driven product.",{"type":35,"paragraphs":137},[138,139,140],"I used Nuxt 3 and organized the codebase around reusable Base components and Section components.","Base components used a B-prefix. Page-level sections used an S-prefix.","That made the interface easier to compose and easier to extend.",{"type":49,"src":142,"alt":143,"caption":144,"variant":53,"aspect":54,"maxWidth":145},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Fvscode-structure.png","Swissonal content folder structure","A modular front-end structure built with Nuxt 3. Content was organized by locale, month, and category.","md",{"type":49,"src":147,"alt":148,"caption":149,"variant":53,"aspect":54},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Ffigma.png","Swissonal Figma structure","The project structure in Figma, from research to design and components.",{"type":151,"text":152},"subheading","Technical highlights",{"type":154,"items":155},"bullets",[156,157,158,159,160,161,162],"Nuxt 3 with SSR","@nuxt\u002Fcontent for structured content rendering","i18n for English, German, and Italian","GSAP and Lenis for motion and smooth scroll","sitemap and robots for search visibility","PostHog for analytics","Vercel for deployment",{"type":39,"paragraphs":164},[165],"The most important technical decision was separating content from presentation. New months, new categories, or new languages could be added without redesigning the whole interface.",{"type":30,"text":167},"Pages and interactions",{"type":35,"paragraphs":169},[170,171],"I kept the product lean.","The site was split into three main pages: home, about, and benefits.",{"type":65,"items":173},[174,175,176],"home","about","benefits",{"type":35,"paragraphs":178},[179],"On top of the content system, I added motion and interaction where it helped the experience feel more polished.",{"type":154,"items":181},[182,183,184,185,186,187],"loading states","typewriter effect in the hero","smooth scroll","scroll-based motion","horizontal movement in the benefits page","filtering by month and category",{"type":103,"src":189,"placeholderLabel":190,"alt":190,"caption":191,"variant":53,"aspect":54},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Finteraction.mp4","Swissonal home interactions","Interactive behavior in the experience.",{"type":30,"text":193},"Distribution and measurement",{"type":35,"paragraphs":195},[196,197,198],"After launch, I treated Swissonal like a real product.","I created content for Instagram, Facebook, TikTok, and newsletter formats.","I also recorded short gardening videos to support distribution.",{"type":103,"src":200,"placeholderLabel":201,"alt":201,"caption":202,"variant":53,"aspect":203,"maxWidth":204},"\u002Fmedia\u002Fcases\u002Fswissonal\u002Fpresentation.mp4","Swissonal presentation","Presentation of the project.","9\u002F16","sm",{"type":46,"text":206},"I did not stop at launch. I also measured how people found and used the product with PostHog.",{"type":30,"text":208},"Outcome",{"type":35,"paragraphs":210},[211,212],"Swissonal became more than a visual exercise.","Brand, structure, interface, code, launch, marketing and measurement all came together in one project.",{"type":46,"text":214},"A personal gardening problem became a multilingual digital product with its own brand, content system, front-end architecture, and launch strategy.","en\u002Fwork\u002Fswissonal","A seasonal planting calendar for hobby gardeners in Switzerland",[218,219,220,86,221,222,223,224,225,226],"Product design","Front-end development","Design systems","Nuxt 3","Vue","i18n","SEO","Analytics","0→1","RAgOKSHVC__W0-1ITt75NZBvqSbK-D2bf1aqA0RfaqI",1777547833850]