MR MARVIS headless replatforming

MR MARVIS is one of the leading online-first fashion retailers from Western Europe. Shopify is at the core of their e-commerce platform, and in Q4 2022 they decided to migrate their legacy Shopify Liquid theme to a headless setup.

We partnered with MR MARVIS and Ask Phill to help them transition to a modern, composable headless architecture, which unlocked significant performance improvements and future omnichannel capabilities.

About MR MARVIS

Founded in Amsterdam in 2016, MR MARVIS began by offering the perfect men's short directly to consumers through their website. Over time, their product line has grown to include swim shorts, trousers, shirts, jackets and shoes.

Their first physical store opened in 2020, and they now boast 10 stores, with plans for many more in the coming years.

As a rapidly expanding omnichannel e-commerce business, MR MARVIS has substantial technical requirements to support their growing international customer base, growth strategies, and diverse product range.

Why headless

With the advent of single page applications (SPAs), it launched the need for API-first approaches. Headless architectures became popular in the mid-2010s because it allows developers to decouple the frontend from the backend, giving them more flexibility and enabling smoother integrations with various platforms.

However, headless is not a one-size-fits-all solution. It can introduce challenges such as increased complexity, potential integration issues, and the necessity for robust APIs, which may outweigh its benefits for some projects.

Headless websites are akin to Formula 1 cars: incredibly fast but requiring regular upkeep. Proper architecture, observability, and a flexible yet robust CI/CD pipeline are essential to mitigate risks.

For MR MARVIS, headless was an ideal choice due to their legacy Shopify multi-instance setup (created before Shopify Markets). A composable content management system (CMS) could significantly reduce the time spent managing content across these Shopify instances and would allow MR MARVIS to leverage smart data integration, vendor connections, AI, and more.

The legacy 'Online Store 2.0' Liquid Shopify themes used by MR MARVIS had inefficient coding, with instances of O(n³) complexity. This means that as more products were added, the page loading times increased significantly (Big-O notation measures how an algorithm's effort grows as the input size increases). Put simply, their IT-stack needed a holistic reassessment and their outdated themes needed to be replaced.

The project

Supercosmic, MR MARVIS' in-house tech team, and development agency Ask Phill collaborated to launch a headless Shopify website for 8 locales within 4 months.

Following an initial discovery phase to gather requirements, we designed a MACH (microservices-based, API-first, cloud-native SaaS, headless) architecture and divided the tasks among the in-house engineers, Ask Phill, and Supercosmic.

By adopting a deploy-fast and often strategy, we iterated rapidly and delivered value in short cycles. Within the first sprint, beta.mrmarvis.com was live, allowing everyone to track progress and provide valuable feedback. This agile approach enabled us to quickly address feedback and adapt to changing requirements.

Testing sessions and bug bounties were crucial in reducing bugs and ensuring compatibility across platforms and browsers. Maintaining the beta website that was updated multiple times daily with new features and fixes streamlined the testing and development process.

After 4 months (~8 sprints) of development we launched the headless website using a zero-downtime migration in March 2023.

Tech stack

The headless architecture of MR MARVIS nowadays consists of:

Cloudflare: reverse-proxy for enhanced security and caching.
ESLint: static code analysis to enforce coding standards and catch errors.
GitHub Actions: a CI/CD tool to automate testing and deployment.
Google Cloud Platform: used for backups.
Next.js: React framework offering speed and SEO benefits.
Playwright: E2E testing framework to automate and assert browser interaction.
Prettier: code formatter to ensure consistent style.
PostgreSQL: open-source relational database.
Redis: in-memory data store.
Sanity: CMS with image CDN for custom content management.
Shopify: e-commerce platform managing checkouts, payments, and orders.
Tailwind CSS: utility-first CSS for rapid and consistent styling.
Turborepo: build system for monorepos, abstracting them into packages.
TypeScript: typed JavaScript for improved reliability and productivity.
Vercel: developer-friendly scalable cloud platform.

Impressive results

After migrating to a revised IT-architecture and headless website, MR MARVIS saw impressive results:

Page speed increased by an avg. of 43%.
Conversion rates improved by around 8-15% (seasonality affected precise measurement).
Engineering velocity increased by 4-5x, enabling quicker iteration, experimentation, learning, and thus value delivery.

These impressive results are proof of our approach when executed with the right strategy, partners, and technology stack. As MR MARVIS continues to expand its omnichannel presence and product offerings, their headless architecture provides a solid foundation for future innovation and success.

This case study serves as an inspiration for other e-commerce businesses looking to embrace the benefits of headless and embark on their own digital transformation journey.