Waking Up to Better Performance - Migrating Groove to Headless

About Groove

Groove (formerly EasySleeper) is revolutionizing sleep wellness with a science-backed approach to comfort. Their flagship product, The Original Groove® Pillow, is an ergonomic memory foam pillow designed to correct posture and alleviate neck and upper back pain. With a cult following and over 200,000 happy sleepers, Groove needed a digital experience that was as supportive and scientifically engineered as their products.

What we did

Component-Driven UI Architecture

We built a reusable library of UI elements using Styled Components, ensuring visual consistency and allowing the marketing team to "drag and drop" sections to build new landing pages.

Sanity CMS Integration & Modeling

We designed a bespoke content schema in Sanity, giving Groove structured data fields for product specs, FAQs, and reviews, rather than dumping everything into a generic text editor.

Real-Time Content Sync

We configured webhooks and listeners to enable instant previewing, bridging the gap between the static build and the dynamic CMS data so content editors never fly blind.

Core Web Vitals Optimization

Leveraging Gatsby’s Image plugin and code splitting, we optimized asset delivery to achieve all-green Lighthouse scores, critical for maintaining Groove’s SEO rankings.

Headless Checkout Orchestration

We integrated a seamless cart experience that interfaces with their inventory system, managing state globally across the app while keeping the checkout flow secure and fast.

Mobile-First UX Refinement

Recognizing that 70% of Groove's traffic is mobile, we utilized Styled Components to write fluid, mobile-first media queries that ensure the "Add to Cart" sticky bar is always accessible.

The Challenge: Growing Pains

As Groove expanded their product line from pillows to a full suite of sleep wellness items, their legacy CMS began to show cracks. Slow page loads were hurting conversion rates, and the marketing team felt restricted by rigid templates that made launching new campaigns a nightmare. They needed a platform that offered:

Sub-second load times to boost SEO and mobile conversions.
Creative freedom for unique landing pages without developer bottlenecks.
Real-time inventory management across multiple storefronts.

The Solution: A Modern Headless Stack

We migrated Groove to a headless architecture, decoupling the frontend from the backend to unlock maximum speed and flexibility.

The Tech Stack:

Gatsby (React): We chose Gatsby for its static-site generation (SSG) capabilities, ensuring the site loads instantly by pre-rendering pages.
Sanity.io: A structured content platform that serves as the "brain" of the operation. It allows the Groove team to edit content in real-time and model complex product relationships.
Styled Components: By using CSS-in-JS, we created a modular design system. This keeps styles scoped to individual components (like product cards or testimonials), preventing style leaks and making the codebase easy to maintain.

Key Technical Highlight: Real-Time Sync

One of the most complex requirements was ensuring that content updates in Sanity reflected instantly on the Gatsby frontend without needing a full rebuild. We implemented Sanity’s real-time listeners coupled with Gatsby Preview. Now, when the Groove team fixes a typo or updates a price, the change is pushed to the preview environment in milliseconds via webhooks, allowing for a true "What You See Is What You Get" editing experience before publishing.

The Result

The new Groove site is not just a store; it’s a high-performance application. The move to headless has reduced page load times by 40%, significantly decreasing bounce rates. With Sanity and Gatsby working in harmony, the Groove team can now dream up a campaign in the morning and launch it by the afternoon, no developer required.

Related work