Case Study: Headstart Dairy

Interactive marketing website with Next.js


Client: Headstart Diary

Visit their site

Canada-based Headstart Diary is a dairy farm focusing on top genetics, efficient production, and happy, healthy calves.

  • Scope and challenges

    • Going from a sluggish, legacy website to a modern one that used cutting-edge technology
  • Solutions and results

    • Dato CMS implementation
    • Built a modern frontend using Next.js
    • Created a set of interactive SVG animations

Jamstack implementation with Dato CMS, Next.js, and Vercel

Our team worked with Headstart Dairy, a US-based performance marketing agency, to build a brand-new Jamstack site using Dato CMS, Next.js, and Vercel. By migrating to the Jamstack architecture and headless solutions, we optimized the site for 2x the performance compared to the previous website.

We created a Jamstack
website for a dairy farm

  • Seamless

    interactive SVG animations

    It's difficult to animate multiple SVG files 1:1 to a carefully crafted design. However, we achieved this by using a modern framework for animating SVG files: GSAP. This truly brings Headstart Dairy to the next-gen and makes the site accessible to all browsers and devices.

  • Easy

    content management

    We used Dato CMS to create an easy content managing experience for non-technical editors, making the site effortless to manage and update.

A next-generation web stack
for a marketing site

Orchestrating a migration project on an enterprise scale required careful planning and execution. Here's how we did it: 

  • 1. Content modeling

    We took the content and pages from the old WordPress installation and modeled it on Dato.

  • 2. Next.js development

    Once the content was fully modeled on Dato CMS, we developed the front-end code with Next.js. Having a fully modeled Headless CMS structure creates a foundation for efficient development.

  • 3. Animating the site

    Animating multiple SVG's for desktop and mobile is challenging but not impossible. We used GSAP and React to animate the SVGs when users scroll through the site seamlessly.

  • 4. Optimizing for Web Vitals

    After development and quality assurance regarding the UI and usability, we began the final phase for optimizing the site for Google's core web vitals and Real Experience measured with multiple metrics tools.

Get in touch

Looking to build something like this?

Let’s talk about your ideas, no charge, no obligations.

Contact Sales

* Submitting this form will not sign you up for any marketing lists. Your information is strictly used and stored for contacting you. Privacy Policy