Case Study: Olifant Digital
Website rebuild with Next.js and Dato CMS
Client: Olifant DigitalVisit their site
New York-based Olifant Digital is a performance marketing agency that loves growing companies to their fullest potential.
Scope and challenges
- Build a flexible foundation to create a highly-optimized company site polished to the tiniest detail
- Optimize Olifant Digital's site to pass Google's Core Web Vitals and real experience score thresholds for multiple measurement tools
Solutions and results
- Implement Dato CMS and built hand-crafted content models
- Create an easy-to-use setup they could manage on their own
5x increase in desktop performance
Jamstack implementation with Dato CMS, Next.js, and Vercel
Our team worked with Olifant Digital, 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 5x the performance compared to the previous website.
We created a next-gen
Jamstack website for a
performance marketing agency
increase in desktop performance
The new website has a perfect 100/100 performance score on Google's PageSpeed Insights. This is a 5x increase compared to the old site on WordPress.
real experience Score on mobile
Measured on Vercel Real Experience analytics, Olifant Digital's new site has an incredible 99/100 Real Experience score on mobile. Real Experience score is measured by averaging Web Vitals scores on real website visitors.
A next-generation web stack
for a marketing agency
Orchestrating a migration project on an enterprise scale required careful planning and execution. Here's how we did it:
1. Content Modeling on Dato CMS
Olifant Digital had a Figma design and a plan for the new pages to be created. Based on the provided design, we modeled the pages and content on Dato CMS.
2. Next.js development
Once the content was fully modeled on Dato CMS, we started working on developing the Front-end code with Next.js. Having a fully modeled Headless CMS structure creates a foundation for efficient development.
3. Quality assurance
Once the development phase was completed, we began QA with Olifant Digital and their design team to ensure the site matched all their requirements and ensure the original UI design translated well to technical components.
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.