Case Study: Headstart Dairy
Interactive marketing website with Next.js
Client: Headstart DiaryVisit 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
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.
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.