[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"case-study-zytro-website-en":3},{"id":4,"title":5,"extension":6,"liveIntro":7,"liveLinkText":7,"liveUrl":7,"meta":8,"scrollytelling":9,"sections":26,"stem":214,"subtitle":215,"tags":216,"__hash__":228},"caseStudies\u002Fen\u002Fwork\u002Fzytro-website.yml","Zytro Website","yml",null,{},[10,14,18,22],{"title":11,"label":12,"image":13},"Role","UX\u002FUI designer","\u002Fmedia\u002Fillustrations\u002Fjob.png",{"title":15,"label":16,"image":17},"Timeline",2024,"\u002Fmedia\u002Fillustrations\u002Fcalendar.png",{"title":19,"label":20,"image":21},"Team","1 designer, 2 developers, CEO, 2 salespeople","\u002Fmedia\u002Fillustrations\u002Fteam.png",{"title":23,"label":24,"image":25},"Tools","Figma","\u002Fmedia\u002Fillustrations\u002Ftool.png",[27,30,32,37,44,46,49,53,59,62,69,71,73,77,84,87,92,96,100,104,106,108,112,115,119,124,126,130,134,136,140,144,146,150,155,157,161,165,167,171,175,177,181,186,188,192,196,198,202,207,209],{"type":28,"text":29},"heading","Project overview",{"type":31},"scrollytelling",{"type":33,"paragraphs":34},"prose",[35,36],"Zytro is a 3D visualization company for architecture and real estate, based in London, blending architecture, design, and technology to create immersive visuals and digital experiences.","This project was a website relaunch designed to reposition the brand and better match the quality of the work.",{"type":38,"src":39,"alt":40,"caption":41,"variant":42,"aspect":43},"media","\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fcover.png","Awwwards nominee recognition for Zytro website","[Awwwards nominee recognition](https:\u002F\u002Fwww.awwwards.com\u002Fsites\u002Fzytro) for Zytro website","bare","auto",{"type":28,"text":45},"The goal",{"type":47,"text":48},"highlighted","The relaunch had to make Zytro feel as advanced as the environments it creates.",{"type":33,"paragraphs":50},[51,52],"The previous website did not fully express the studio’s range, visual ambition, or premium positioning.","The new one had to feel:",{"type":54,"items":55},"inlineTags",[56,57,58],"creative","technical","current",{"type":33,"paragraphs":60},[61],"It also needed to:",{"type":63,"items":64},"bullets",[65,66,67,68],"elevate brand perception","present services more clearly","make the portfolio easier to explore","turn the site into a stronger expression of the studio’s identity",{"type":47,"text":70},"In this project, interface quality was part of brand positioning.",{"type":28,"text":72},"Creative direction",{"type":33,"paragraphs":74},[75,76],"The direction was bold and cinematic.","I used a dark interface as the base, then introduced:",{"type":54,"items":78},[79,80,81,82,83],"soft gradients","glowing details","large-scale type","thin graphic lines","deconstructed layout language",{"type":33,"paragraphs":85},[86],"The result felt:",{"type":54,"items":88},[89,90,91],"digital","architectural","up to date",{"type":38,"src":93,"alt":94,"variant":42,"rounded":95,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fprototypes.png","Zytro prototypes demonstrating the visual direction",true,{"type":38,"src":97,"alt":98,"caption":99,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fcolors.png","Zytro color system","Color system.",{"type":38,"src":101,"alt":102,"caption":103,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Ftypography.png","Zytro typography","Typography and asset style.",{"type":28,"text":105},"Highlights of the website",{"type":47,"text":107},"Motion was used to guide attention, control pacing, and make the long-scroll experience feel alive.",{"type":109,"paragraphs":110},"bracketBlock",[111],"Rather than treating sections as static blocks, I designed them to respond to scroll and work as part of one continuous visual system.",{"type":113,"text":114},"subheading","Parallax cards that reveal the company in layers",{"type":33,"paragraphs":116},[117,118],"The company’s core areas were presented through stacked cards that moved one over another.","This gave each branch more presence and helped the section unfold with more rhythm.",{"type":120,"src":121,"placeholderLabel":122,"alt":122,"caption":123,"variant":42,"aspect":43},"video","\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fparallax-cards.mp4","Parallax cards section of Zytro website","Layered cards used to pace the core areas.",{"type":113,"text":125},"A growing video reveal",{"type":33,"paragraphs":127},[128,129],"One section paired Zytro’s core statement with a video that expanded during scroll.","That created a stronger transition from message to proof.",{"type":120,"src":131,"placeholderLabel":132,"alt":132,"caption":133,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fvideo-growing.mp4","Video growing section of Zytro website","A transformation-based transition inside the introduction section.",{"type":113,"text":135},"Client logos as a moving trust signal",{"type":33,"paragraphs":137},[138,139],"Instead of a static logo wall, I used parallax and focus shifts to make social proof feel more dynamic.","This gave the section more presence without adding extra content.",{"type":120,"src":141,"placeholderLabel":142,"alt":142,"caption":143,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fclients.mp4","Client logos section of Zytro website","Client logos revealed through focus and motion.",{"type":113,"text":145},"A bento-style work section",{"type":33,"paragraphs":147},[148,149],"The work section used a bento-style layout instead of a standard grid.","Project details opened inside the same page, which kept exploration fluid and reduced unnecessary navigation.",{"type":120,"src":151,"placeholderLabel":152,"alt":153,"caption":154,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fwork-gallery.mp4","Work section of Zytro website","Work gallery section of Zytro website","A bento-style portfolio with in-page project details.",{"type":113,"text":156},"A direction-aware CTA",{"type":33,"paragraphs":158},[159,160],"The CTA reacted to scroll direction.","That small behavior made the page feel more responsive and gave the call to action more presence.",{"type":120,"src":162,"placeholderLabel":163,"alt":163,"caption":164,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fcta.mp4","CTA section of Zytro website","A CTA that shifts direction with scroll.",{"type":113,"text":166},"Services through tabs",{"type":33,"paragraphs":168},[169,170],"The services section used tabs to keep multiple offerings inside one space.","This reduced repetition and made the content easier to scan.",{"type":120,"src":172,"placeholderLabel":173,"alt":173,"caption":174,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Ftabs.mp4","Services tabs section of Zytro website","Tabbed services layout.",{"type":113,"text":176},"A team introduction built through transformation",{"type":33,"paragraphs":178},[179,180],"This section introduced the team through a scroll-based transition.","Shape, image, and text changed together, making the reveal feel more dynamic and less static.",{"type":120,"src":182,"placeholderLabel":183,"alt":184,"caption":185,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Finfinite-scroll.mp4","Infinite scroll section of Zytro website","About section of Zytro website","A transformation-based transition inside the team section.",{"type":113,"text":187},"A team grid that reacts to scroll",{"type":33,"paragraphs":189},[190,191],"The team section used motion to stay consistent with the rest of the site.","Even supporting content needed to feel intentional.",{"type":120,"src":193,"placeholderLabel":194,"alt":194,"caption":195,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Fteam.mp4","Team section of Zytro website","The team grid moves with the page.",{"type":113,"text":197},"A footer that arrives like a final scene",{"type":33,"paragraphs":199},[200,201],"The footer was designed as part of the experience, not just an ending.","It entered with motion and helped the site close with the same energy it opened with.",{"type":120,"src":203,"placeholderLabel":204,"alt":205,"caption":206,"variant":42,"aspect":43},"\u002Fmedia\u002Fcases\u002Fzytro-website\u002Ffooter.mp4","Footer section of Zytro website","Footer of Zytro website","The closing section comes in with motion and presence.",{"type":28,"text":208},"Outcome",{"type":33,"paragraphs":210},[211,212,213],"The final site gave Zytro a stronger and more contemporary digital presence.","It felt more premium, more distinctive, and more aligned with the level of the work.","The relaunch was also recognized by Awwwards as a Nominee.","en\u002Fwork\u002Fzytro-website","Website relaunch for a 3D visualization studio working across architecture, design, and technology.",[217,218,219,220,221,222,223,224,225,226,227],"UX\u002FUI","website relaunch","brand experience","interactive design","visual design","motion design","parallax","storytelling","creative direction","responsive design","microinteractions","zSpePZT71MpE-xSsMn7d-vkLodoilMNqzPuhSkB4xQY",1777381213615]