Melon Brains

Discovery — Understanding the Real Problem

When Melon Brains came to me, the surface-level ask was simple: their WordPress website was outdated and occasionally went down. But the deeper issue became clear once I understood their business.

Melon Brains sells creative and marketing expertise to other brands. Their website is not just a company profile — it is the first proof point a potential client sees of the agency's own creative standards. Every prospective client visiting the site was implicitly asking: if this agency can't manage their own website, why would I trust them with mine?

An old WordPress build that occasionally went down wasn't a technical inconvenience. It was actively undermining new business conversations before they started. On top of that, the agency's team had limited ability to update their own content — publishing new work, adding testimonials, or writing a blog post meant relying on someone else, which slowed down their ability to keep the site current with the work they were actually producing.

The agency already had a fully custom design ready — one that reflected the quality and creative identity they wanted to project. What they needed was someone who could turn that design into a website that actually performed at that level, and hand them the ability to run it themselves going forward.

Solution — What I Built and Why

I rebuilt the site from the ground up, replacing WordPress entirely, and made two decisions that shaped the whole project:

The custom design called for rich, choreographed animation — scroll-triggered effects, layered transitions, motion that felt deliberate rather than decorative. This wasn't a nice-to-have. For an agency whose product is creative execution, a flat, static website would have quietly contradicted their own pitch. I used a combination of GSAP for complex scroll-based sequences, Framer Motion for component-level transitions, and lightweight CSS animations where a full library would have been unnecessary weight. Getting these to work together without conflicting or slowing the site down was the most demanding part of the build — the goal was motion that matched the ambition of the design while staying fast on every device.

I connected the site to Contentful as a headless CMS, giving the team direct control over their blog, case studies, and portfolio — including embedded reel videos showcasing their creative work. This meant the moment the site launched, the agency stopped depending on outside help just to publish something new.

The final site includes a full set of marketing pages — Home, About, Services, Our Results, How It Works, Who We Are, Testimonials, and Contact — alongside a dynamic Blog and Portfolio section, all built to reflect the agency's actual brand rather than a generic template.

Process — How We Got There

The project moved in close coordination with the agency, translating their existing design into a working product without losing any of its intent:

• [01] — Reviewing the complete Figma design to understand every intended interaction and animation, not just the static layout
• [02] — Building the site structure and core pages first, establishing the foundation before layering in animation complexity
• [03] — Implementing the CMS architecture in Contentful, structuring content models around how the agency actually wanted to manage blog posts, case studies, and portfolio entries
• [04] — Layering in the animation work last, iterating specifically on performance — making sure rich motion never came at the cost of load speed or smoothness
• [05] — Testing across devices to confirm the experience held up outside of a single desktop browser, since a marketing agency's traffic includes prospective clients browsing from anywhere

Impact — How This Helped Their Business

Credibility restored. The site no longer goes down, and it now actively supports the agency's pitch instead of undermining it. A prospective client visiting the site sees a level of craft that matches what the agency promises to deliver for them.

Independence gained. The agency can now publish new case studies, write blog content, and update their portfolio — including video reels — entirely on their own through Contentful. What used to require developer involvement is now a task their own team handles directly, meaning their site can stay current with their actual output instead of lagging behind it.

A stronger new-business tool. The portfolio and case studies section gives the agency a living showcase of their work that they control and can keep updated, turning the website into an active part of how they win new clients — not just a static brochure sitting in the background.