So you might wonder what are the main benefits when opting out for a Headless CMS versus a traditional CMS approach. It's not about what the tool by itself can offer but rather what opportunities this architecture offers, especially for your storefront. Through this case study, we will explore how Spring leverage this opportunity with Once plugged in on top of Shopify Headless CMS.
"Once gave us a flexible tool to improve our UX"
Spring offers clean and efficient laundry tablet delivered to your mailbox. They are a Digital Native Vertical Brand with more than 50K clients and offer a wide range of products, including sprays, tablets for washing machine.
Spring built a Mobile-First User eXperience with Once
- Responsive User eXperience for mobile making hard to use specific capabilities: One site for both mobile + desktop
- Long costly processes to build and test UI changes: rely on agency only
- Hard to reflect branding through User eXperience, limitations with generic platforms (Shopify)
- Poor loading performances
- Mobile-First Interactions and navigation included: One site per device
- Drag and Drop builder for fast iterations
- Integrated SDK for developers to build custom components for the builder
- Built-in capabilities for first class loading times
"There’s no need to code to build a mobile-optimized landing page"
Mobile-First mobile UX
Spring chose Once primarily to build a mobile-first User eXperience. With more than 2/3 of their traffic coming from mobile, they needed a way to optimise their UX over the whole online experience.
"Most of our traffic is mobile so the UX needs to be thought carefully. All eCommerce platforms are desktop-first and only offer a responsive approach for mobile, which makes it hard to build a decent UX"
This is of no surprise as most platforms were born in a desktop-first/desktop only environment. 5 years ago, mobile traffic was accounting for less than 50% of the traffic within the e-commerce space. Nowadays we’re looking at a 2/3+ ratio and growing at a 25% CAGR.
So we built Once from the ground up, with this in mind: treat desktop and mobile separately in dedicated websites.
"Spring built a Mobile-First User eXperience with Once, that’s something we knew couldn’t be achieved with an responsive design approach"
This mobile-first approach is what Benjamin Guerville loves about Once, they could rethink the whole buying experience on mobile, from navigation to interactions and separate it completely from the desktop.
UX Iteration made easy
Making changes to your website over time is of central importance for any merchant seeking performance and good branding. Though it’s not as easy as it sounds when relying on monolithic platforms.
"Before Once, on Shopify we used customized templates along with the Shopify builder and extra page builders. So apart from extra landing pages, for any front-end iteration on our website, we had to create a ticket and submit it to our agency; wait for the feature/change to be picked up, developed and then released. It’s frustrating not to be in control of small changes at least, like updating the color of a button or changing its place on a page. Builders on Shopify lets you build and update only extra pages, this is very limiting"
Once developed a tool that would bring independence to merchant on small UI changes and enhance developers’ productivity on building custom features. Hence fitting in the existing context of merchant working with an agency and letting each side focus on their added value.
"What’s great about their builder is that any page is editable so I can handle simple changes whether it’s on the product page or the homepage, the agency is the go-to strategy when we need real customizations. It’s not only about being more independent but also having extensive flexibility on what can be done in terms of UX. The overall process to iterate is simpler, we can easily test and learn with Once"
Developing new features can be cumbersome for developers, especially on platforms that relies on old coding language and unmanageable environment. Moreover, it is impossible to make those features accessible to non-tech people in a simple way.
"The problem is that the current setup is inefficient when it comes to to create a branding that reflects our universe. When needing a new feature, we either find an app that matches our UI and functionality expectations or have it custom-built without being able to fine tune anything"
Once was built with a developer friendly approach (with a full Software Development Kit) so that any developper can build custom components locally with their beloved environment, which relies on modern language library (React.js). This implies that they have access to the whole open-source eco-system rather than the Shopify community. The components, when ready are pushed to the builder so they are accessible for non-tech people. By design, any component is transportable on the builder and can be tuned to any extent.
"We have worked on a small module recently, allowing a scroll similar to TikTok for a few pages. This took one week to implement and test. Anyone from the marketing team can test this feature on their landing page without the need of extra development"
Engineering behind the hood
Loading performances are central for optimizing conversion rates. This has become even more serious since mobile is taking over the majority of the trafic. So whether you’re building a new landing page or testing a new feature, speed is a recurring topic.
"When you don’t have a tech background, it’s really hard to spot opportunities to improve site speed. The only thing that you know is that the more third-party integration you have, the slower it gets. This is a challenging issue for us, we rely on our agency to improve the overall performances but still using Shopify apps heavily to avoid custom development"
Monolithic approaches are from the past, your frontend and your backend are tied together without flexibility. The results is that you rely on non optimised technologies and miss opportunities for growth. The headless approach lets you separate the frontend (your website) from the back-end (inventory, logistic, support, ...) so you can decide of your stack and chose cutting edge technologies. At Once, we offer an all included solution that optimizes your storefront from infrastructure to third-party integrations, so you don’t bother with any configuration.
"My performance drastically improved when we switched to Once, dividing by 3 our loading times. The great part is that everything is out of the box, from smart hosting, pre-built rendering, or media compression."
A solution to fit fast-growing DNVB
The problem with traditional monolithic solutions is that they no longer satisfy modern brands needs. Once differentiate from other frontend headless solutions, focusing primarily on mobile-first storefronts.
"I’ve been looking at other tools, like Shogun Frontend or Frontastic, but even though they offered a modern Headless approach, they’re all desktop-first. What I really like about Once is their mobile approach. We can have a specific UI for mobile and another one for desktop."
"Our team loves playing with Once Builder, they have specific modules for mobile and the result is just astonishing. Our mobile website is easily navigable and include smart interactions, like pinch-to-zoom images"
"I would definitely recommend Once to other fast growing DNVB, I love the approach to modern e-commerce!"