Ruggable’s frontend architecture was holding back performance and developer productivity. The team faced slow page load speeds, low accessibility scores and lengthy build and deployment cycles that kept the marketing team dependent on developers for every site change. SEO rankings were suffering as a result.

Rather than a platform problem, Ruggable recognized this as an architectural opportunity: by decoupling their frontend from their commerce backend, they could get the best of both worlds. Shopify would continue to power everything commerce-critical like checkout, payments and orders, while a modern Next.js frontend on Vercel would give the team the performance and flexibility they needed.

Link to headingThe frontend Ruggable built for scale

In March 2023, Ruggable launched the headless version of Ruggable.com. The new architecture is built on three pillars:

Link to headingShopify as the commerce backbone

Ruggable chose to keep Shopify as the foundation for their commerce backend for their best-in-class at reliability, check-out, merchant tooling and ecosystem. The headless move unlocked frontend freedom without giving up any of Shopify’s strengths.

Link to headingNext.js and Vercel for the frontend

The team standardized on React and Next.js, deployed on Vercel. This gave them full control over rendering, performance, and optimization while removing constraints of a coupled theme layer. Vercel’s preview deployments transformed how the team reviewed and approved changes, enabling collaboration without requiring a local dev environment.

Link to headingContentful for content management

A unified content model in Contentful allows the marketing team to manage copy and assets across languages and regions without developer involvement. Launching promotions, landing pages and new markets that previously took weeks now takes hours.

Link to headingFaster teams and faster sites with Vercel

Ruggable's transition to a headless architecture enabled the team to optimize site performance, enhance SEO, drive conversions, and elevate developer experience. The migration also played a pivotal role in facilitating team creativity and speed, ultimately leading to Ruggable's success in achieving zero downtime during Black Friday and delivering significant business impact.

Overall the team saw:

• SEO rankings improved by 75%

• 40% faster site speed

• 300% increase in unbranded search clicks

These substantial improvements to their frontend performance were due to a few key aspects in the new architecture:

• Content modeling with Contentful: All copy and images were modeled in Contentful, enabling support for multiple languages in various locales.

• Unified tech stack: Internal, operations, and ecomm teams now use React and Next.js for all development, streamlining processes and improving efficiency. They also integrate with Shopify for the things it's good at: checkout, payments, and order management.

• Marketing empowerment: Promotions, landing pages, and launches now take hours instead of weeks thanks to Contentful's ease of use. Marketing can confidently make site changes without developer resources, knowing that their modifications won't break the site or take it down.

• Developer productivity: By creating workflows for previewing and QAing new features without the need to publish an entire theme, development cycles accelerated rapidly.

• Reliability and scalability: Achieved 100% uptime during peak seasons like Black Friday and Cyber Monday, with zero tech issues or downtime.

• International expansion: Leveraged the unified content model to launch multiple domains in various countries with localized content and translations.

Link to headingLooking ahead for Ruggable

Ruggable plans to further optimize initial page load performance and implement customer data platforms to power AI-augmented personalization. Continuing to build on the Shopify, Vercel and Contentful foundation they’ve established, the team at Ruggable is planning to further improve initial page load using SSG and next/font, and measuring their improvements with real customer data surfaced by Vercel Insights.

Ruggable’s story is proof of modern commerce: Shopify handling the transactions that power a business, Vercel delivering the frontend experience that wins customers.