Menu
Menu
Headless eCommerce
Shopify
Sanity
The journey of transforming Sick Boi’s online presence into a cutting-edge headless eCommerce platform that combines creativity and powerful functionality.
Strategy & Discovery
Creative Workshops
UX & Design
Design System
Prototyping
Headless eCommerce
Figma
Shopify
Sanity CMS
Next.js
React
Vercel
Heroku
ShipHero
MailChimp
View live work
Sick Boi is a bold and artistic brand founded by the musician Ren, whose creative vision is at the core of the brand. Ren is an influential artist with over 2.3 million monthly listeners on Spotify, 1.9 million YouTube subscribers, and a significant following across social platforms. This new brand launch marks an important step in his creative journey, serving as an extension of his artistic identity and providing a unique platform for his audience to connect with his work.
This project challenged the boundaries of traditional eCommerce. Sick Boi’s site is built around a headless architecture, featuring a drop-based model that includes a holding page with a countdown timer that unlocks at launch. The store then becomes accessible, with products often selling out within minutes. While nontraditional, the site still incorporates essential eCommerce functionalities such as a product listing page (PLP), product detail page (PDP), basket page, and a full checkout process. The challenge was to create a headless eCommerce site that served as both an artistic statement and a functional platform, capable of handling high traffic and rapid sales while remaining true to the brand’s ethos.
We worked closely with the Sick Boi team to craft a site that balances artistic expression and eCommerce functionality. The decision to adopt a headless architecture allowed us to separate the front-end and back-end, enabling flexibility, scalability, and unparalleled performance. By leveraging a collaborative design process, we ensured that the site pushed creative boundaries while remaining practical and adaptable. The bespoke design system provided a structured yet flexible foundation, supporting the dynamic nature of the brand. Using Sanity CMS in conjunction with Shopify, we empowered the Sick Boi team to manage both content and products with ease, adapting the site for each drop with minimal developer involvement.
Products sold every second on average
Orders placed within 7 minutes of the store opening
Orders placed within 24 hours of launch
All products sold out
Page views within the first 24 hours
Views per product
From the beginning, collaboration with the Sick Boi team was at the heart of the project. Through a series of video meetings, we conducted workshops to explore design directions and gather their insights and feedback. At each stage of the design process, we presented concepts and prototypes via video calls, ensuring alignment and clarity before moving forward. This iterative approach fostered a true partnership, resulting in a website that perfectly reflects the brand’s artistic vision while meeting its functional needs.
Although the Sick Boi site pushes the boundaries of conventional eCommerce, it is underpinned by a robust and scalable design system. This system ensures that all pages maintain a cohesive theme while allowing for flexibility and adaptability. The design system provides the Sick Boi team with tools to easily update and adapt the site—from modifying layouts to changing key elements like the logo and colour palette—directly through Sanity CMS. This level of control ensures the site remains fresh and aligned with the brand’s evolving identity.
The Sick Boi store is built around a drop-based e-commerce model, designed to generate anticipation and exclusivity for product launches. Each drop transitions through distinct states, creating a structured yet dynamic flow that aligns with the brand's artistic vision. A holding page builds anticipation with a countdown timer, transitioning seamlessly into an open state when the drop goes live. The site leverages geo-localised time to ensure users worldwide have accurate and relevant information about launch times.
To achieve this, we implemented dynamic components and state management that allow the store to shift between closed, opening, and open states in real-time. By integrating Sanity CMS with Shopify in a headless architecture, the Sick Boi team can control and schedule drops effortlessly, while automated processes manage the transitions. This approach ensures a smooth, scalable, and engaging experience for users, maintaining the brand's exclusivity and driving excitement around each launch.
One of the standout features of the Sick Boi site is the 360° product view, which combines hover points and a collection of model images to create an immersive and engaging experience. This functionality allows users to explore products in detail from all angles, offering a visually interesting and interactive way to interact with items. By giving users a realistic idea of how the products look and feel, this feature enhances the shopping experience and sets the site apart from traditional eCommerce platforms.
The product detail page (PDP) offers an immersive and engaging experience, featuring a central scrollable product section with fixed side panels to maintain focus on key details. Enhancing interactivity, the Model Switcher allows users to toggle between male and female models, showcasing how the product fits on different body types. The Style Switch button adds an element of discovery by randomising another product within the drop, encouraging exploration and keeping users engaged. A tailored size selection interface integrates seamlessly with a custom size guide built in Sanity CMS, enabling bespoke sizing information for each product to ensure clarity and accuracy. This cohesive design blends functionality with artistry, creating a unique shopping journey that elevates user engagement while reflecting Sick Boi’s bold identity.
To accommodate Sick Boi’s evolving visual identity, we developed a system to upload SVG logos directly through Sanity CMS. SVG files, typically challenging to handle due to hosting limitations, are seamlessly integrated into the codebase and redeployed to the front-end. This ensures the logos display perfectly and can be updated for each drop without developer assistance.
Thanks to Sanity’s synchroniser—Sanity Connect—the Sick Boi team can seamlessly manage their products on both Shopify and Sanity CMS. Product data such as price, size, size guides, and images are added to Shopify, then automatically synced to Sanity CMS with a simple "Sync" button. This ensures data consistency, as synced data in Sanity remains read-only and mirrors Shopify’s structure.
Collections in Shopify are mapped to specific Drops in Sanity, allowing the Sick Boi team to display only drop-specific products on the front end while keeping a broader inventory in Shopify’s backend. This setup gives them precise control over what products are showcased for each drop.
Next.js and React: Used for dynamic rendering and lightning-fast page loads, ensuring the site can handle high traffic volumes seamlessly.
Sanity CMS: Allows the Sick Boi team to update content, logos, and colours effortlessly. They can preview and manage changes directly within the CMS, ensuring each drop’s design is cohesive and on-brand.
Dynamic Components: Customised features like countdown timers, presale notifications, and drop-specific landing pages create excitement and anticipation.
Global Reach: Localised pricing with automated currency updates ensures the site caters to a global audience.
Unlimited Traffic Handling: Powered by Vercel, the headless architecture handled over 600,000 page views in the first 24 hours without performance issues.
Email Subscriptions: Allows fans to receive presale notifications, fostering anticipation and increasing engagement with Mailchimp integration.
Director
@
Sick Boi
This project showcases our ability to create bespoke, high-performing eCommerce platforms that merge artistic innovation with technical excellence. The Sick Boi site exemplifies how a headless architecture can blend bold creative visions with cutting-edge technology to deliver measurable results. By building a futureproof and scalable platform, we empowered the Sick Boi team to manage their content, engage with their audience, and drive their brand forward, setting a new standard for headless, drop-based eCommerce experiences.