ciao@leomoschen.com

Email copied!

ciao@leomoschen.com

Email copied!

ciao@leomoschen.com

Email copied!

Zuru Tech

Zuru Tech

Rebuilding the face of a tech company by killing the handoff; from outdated React site to scalable Framer system in 2 months

Rebuilding the face of a tech company by killing the handoff; from outdated React site to scalable Framer system in 2 months

Rebuilding the face of a tech company by killing the handoff; from outdated React site to scalable Framer system in 2 months

Context

Late 2025. I'm part of the design team at Zuru Tech, a company where the line between technology and construction blurs. We build software that automates architectural design and manufacturing — BIM tools, robotic assembly systems, parametric modeling engines.

Before my intervention, the website workflow was the classic, slow-moving corporate machine: designers worked in Figma, prepared massive handoffs, and waited for the dev team to find bandwidth to ship. Iterations took weeks. Small tweaks required engineering tickets. The site itself had become a victim of technical debt — outdated visuals, inconsistent components, a labyrinth of information that didn't reflect the cutting-edge nature of the company.

I saw an opportunity to disrupt this.

I proposed a radical transition: migrate the entire marketing site to Framer. Not as a visual refresh, but as a structural pivot — giving designers full control over the final output and drastically reducing time-to-market.

I put together a pitch deck with hard data on why this made sense: faster iteration cycles, no more handoff friction, better performance, lower dev dependency. I prototyped a test page in Framer to show what was possible. I presented to the CTOs, Design Lead, UI Lead, and my Team Leader.

The feedback was overwhelmingly positive. They gave me the green light — and the responsibility. I spent the next two months leading the migration, coordinating a cross-functional team, and shipping the new site.

ROLE

Product designer

UX Designer

deliverable

Framer website

Year

2025

challenge

The legacy website was built in custom React. It worked, but it had aged poorly. Years of incremental changes had created visual inconsistencies. The design no longer felt premium. Animations were clunky. The site didn't do justice to what Zuru actually builds.

But the bigger challenge wasn't the site itself — it was the workflow.

Every change required:

  1. Design in Figma

  2. Handoff documentation

  3. Dev ticket

  4. Wait for sprint capacity

  5. Review implementation

  6. Request fixes

  7. Wait again

For a marketing site that needs to evolve quickly, this was unsustainable.

The challenge was twofold:

  1. Visual layer: Refine the art direction to make the complex world of Zuru Tech (BIM, automated construction, parametric design) approachable and visually stunning

  2. Process layer: Prove that moving away from traditional dev handoff wasn't a risk — it was a massive efficiency gain

I had to set the pace, manage the migration, coordinate assets, and ensure quality didn't drop during the transition.

process

I dedicated 80% of my time to this project for two months, working alongside my design colleague and a team of 3D artists.

Phase 1: Foundation (Weeks 1–2)
We started with the design system we'd built a few months earlier in Figma. I led the migration of that system into Framer — components, styles, spacing tokens, typography scales. Clean naming conventions. Organized layers. We built it to scale from day one.

Phase 2: Asset Pipeline (Weeks 3–4)
The visuals needed to match the quality of the product. I worked closely with the 3D team to generate high-quality render images of our tools and tech. I gave them direction on composition, lighting, file weight optimization, and export settings. The goal was to use visuals to explain the technology — showing a robotic arm in action instead of writing paragraphs of technical specs.

Phase 3: Build & Integration (Weeks 5–8)
This is where it got interesting. While Framer is marketed as "no-code," I pushed its boundaries. For interactions the standard library couldn't handle, I used Claude AI to generate custom code components. For more complex functionality — like a multi-step form with custom error states and redirects — I worked directly with the dev team. They built the logic, I integrated it into the Framer environment.

I also spent significant time mentoring my colleague through Framer's logic. The goal wasn't just to ship this site — it was to make this workflow sustainable for the company long-term.

Tools: Framer for build, Figma for design system foundation, Claude AI for custom code components.

Timeline: November 2025 → January 2026. The site went live on schedule.

Key decisions

Killing the Handoff

This was the biggest shift — and the riskiest pitch.

I argued that for a marketing site, the traditional design-to-dev handoff was waste. By taking full ownership of the build in Framer, we could reclaim 100% of the "polish" phase. No more "lost in translation" moments where a developer misses a margin, an easing curve, or a hover state.

The resistance I anticipated: "What if something breaks? What if we need custom functionality?"

My answer: Hybrid collaboration. For anything truly custom (complex forms, API integrations, logic-heavy features), we'd still involve devs. But for 90% of the site — landing pages, product showcases, content blocks — designers would own it end-to-end.

This decision fundamentally changed how the design team operates at Zuru. We're no longer waiting for dev capacity. We ship.


Visual Over Text

Zuru's tech is inherently complex. BIM workflows, parametric modeling, robotic assembly — these aren't easy to explain in a paragraph.

I made a strategic call: prioritize high-quality visuals and motion design over text-heavy explanations. Show the robotic arm moving. Show the software interface in action. Show the building being assembled.

This required close coordination with the 3D team. I gave them specific direction: file weight targets, lighting setups, composition guidelines. The renders needed to be stunning and performant.

The result: pages that feel cinematic, not corporate. Tech that feels approachable, not intimidating.


Scalable Modular System

I knew the site wouldn't be "done" after launch. New products. New features. New pages. The system had to support continuous evolution.

We built a modular component library in Framer that allows us to spin up new pages in hours, not weeks. Every component is production-ready. Every layer is properly named. Every variant is documented.

We traded rigid templates for a living, breathing design system. It's not just clean — it's maintainable. Future designers (or future me) won't have to reverse-engineer what I built.

Outcome

The new Zuru Tech website is live at zuru.tech.

Core improvements:

  • Modern visual language — high-quality renders, smooth animations, cinematic feel

  • Scalable system — modular components, clean architecture, fast iteration cycles

  • Designer-owned workflow — no handoff for 90% of site updates

  • Performance — faster load times, smoother interactions than the old React site

The impact:
The feedback internally has been incredible. The CTOs, design leadership, and team members have all praised the quality and the speed of delivery. More importantly, we've shifted the company's perception of what a design team can ship.

By taking ownership of the platform choice and the build process, I didn't just deliver a website — I delivered a new modus operandi. The trust I received from leadership to lead this change remains one of the most rewarding aspects of this project.

Honest reflection:
This is still evolving. We're adding pages, refining interactions, optimizing for edge cases. There are things I'd do differently with more time — better documentation for handoff to future designers, more aggressive image optimization, deeper accessibility testing.

But the foundation is solid. The system scales. The site reflects Zuru's actual DNA: fast, innovative, unafraid of change.

FAQ

FAQ

What was the biggest challenge in mentoring your colleague through Framer?

How do you measure the success of this project? What metrics prove it was worth the transition?

You mentioned the design system is "clean" and "maintainable." What does that actually mean in practice?

What was the biggest challenge in mentoring your colleague through Framer?

How do you measure the success of this project? What metrics prove it was worth the transition?

You mentioned the design system is "clean" and "maintainable." What does that actually mean in practice?