Headless In Practice

Headless architecture has become widely known as an emerging technology strategy that many merchants are considering. Advantages of this architecture are mostly promoted as a means of providing businesses with more choices for integrating best-of-breed solutions, superior site performance, and other technical advantages. Though all of those advantages are true and incredibly beneficial, we are most excited about the creative opportunities that this approach has unleashed for brands.

Highly branded and unique user experiences have been somewhat out of reach for many mid-market merchants looking to elevate their brand by integrating more dynamic content throughout the shopping experience. Outside of the more expensive and sometimes cost-prohibitive monolithic platforms, there hasn’t been a complete solution that supported both the unique content and ecommerce needs of a brand. Brands have weighed the trade-offs between the two, forcing them to decide which one was more important.  

So what has changed? One change is the rise and support of APIs by some ecommerce platforms. The availability of these APIs has provided a new way to connect dynamic content experiences, business service applications, as well as the commerce catalog in such a way that has brought it all together, creating efficiencies and the opportunity to provide a better overall brand and customer experience.

Examples of How BigCommerce’s Open SaaS Supports Headless

BigCommerce made the decision early on to fully support headless by taking an open SaaS approach to their platform, exposing their catalog and features through APIs. This strategy has enabled brands to quickly adapt to change while also maintaining a lower cost of ownership by offering flexibility in supporting the front-end of choice. While there are several other platforms making similar claims, we have found BigCommerce to be much further along, having adopted their entire platform strategy to support open SaaS and headless from the start.

Headless architecture has provided a way for brands to take a step back and forward at the same time, supporting their current branding needs while also setting them up for future growth and changes. As an ecommerce design and development agency, we would like to share some specific examples of how this framework has unleashed creativity and elevated our design solutions and systems to better support a brand’s ability to manage their site in a more sustainable way. 

For many years, ZaneRay has had the benefit of doing both design and development, and quite a few of our team members have significant experience and skills in both. Understanding the development and engineering requirements has helped inform our designs throughout the years, allowing us to push a little further creatively while maintaining a keen awareness of where the lines are drawn. The headless framework has significantly expanded those lines in all directions, allowing us to design brand experiences that previously would have been cost-prohibitive for our brand partners. From a design perspective, the decoupling of the front and back end has allowed our design team to work in a more robust content management system that better supports unique and inventive designs that simply weren’t possible before. Because of this newfound freedom, we have been able to explore further with our brand partners who are looking to do something more immersive and unique to better communicate their brand experience. 

1. Skullcandy.

Skullcandy is one of those brands that has built a loyal and connected community around music and action sports, one that is quite active on their site because of their role in cultivating that culture. That cultural affinity is what sells their products as a lifestyle brand. Because of this, Skullcandy wanted a commerce site that creatively showcased their products while also telling the stories around the art and culture that are the very essence of the brand. The challenge Skullcandy presented was a question around how to best execute their 18-month Moods campaign, featuring a limited edition product, a new musician and new artwork each month. The requirements included the ability for the Skullcandy team to switch out their campaign assets each month without development restrictions and to be able to stage and schedule the release. 

Leveraging the open SaaS of BigCommerce, we were able to take a hybrid approach, by integrating a headless CMS to create the page structure and components with the ability to stage and preview the assets prior to publishing the content. The CMS also has scheduling capabilities that allow the team to schedule the page to go live in the middle of the night without any assistance from the development team. This hybrid approach has been extended to other areas of the site allowing Skullcandy to push the creative boundaries and present their brand without limitations.

2. Yeti Cycles.

Yeti Cycles is another headless site that we recently launched on BigCommerce. Their previous site was beautifully designed and served their branding needs well, however, their ‘design-first’ approach had resulted in a very fragmented and tangled technical back end over time, one that was extremely disjointed, making it difficult for the marketing team to manage or update the site. Not only was it difficult, but it was also quite expensive since most updates required engineering support. In order to achieve the marketing velocity that they needed to meet their goals, the Yeti team needed a more integrated back end along with a more user-friendly front end, providing them with the insights, tools and systems they needed to better manage their site.

One goal at the outset of the project was to provide enhancements to the overall design of the site, elevating the designs while not completely reimagining them. The Yeti Cycles team also needed to be able to carry forward the integrity of these designs for future campaigns, content updates and product launches and needed the right systems and tools that would allow them to do it on their own. To achieve this, ZaneRay created a design system that is supported by a library of reusable components along with a digital style guide, providing brand consistency across the site, allowing the team to build out new pages and upload new content. This combination of front-end tools and systems, along with a robust CMS, has enabled them to carry forward the fidelity of the designs beyond the initial site design and build. 

This system was put to the test just a few days after launching the site with the release of their new retro-themed, limited-edition ARC 35th Anniversary bike. What had previously taken many weeks of preparation and development coordination to set up for launch, now took hours and they were able to do it completely on their own. The bike sold out in a matter of hours.

Another primary goal of the project was to ensure that all of their backend systems were properly integrated so that they could fully monitor the purchase funnel and with that new visibility, make adjustments to their site based on data-driven insights. The integration challenges they had encountered with their previous tech stack had also contributed to their inability to monitor their purchase funnel since the backend systems were so fragmented. Being that headless is an API-first framework, the backend systems were able to be simplified and connected with minimal effort—creating a backend that was now fully integrated and structured for site analytics. Within BigCommerce’s Analytics admin, the Yeti team can now fully monitor abandoned cart rates, view specific products that are being abandoned, as well as build specific campaigns to decrease abandonment rates. 

3. Black Diamond Equipment.

Our third, and most recent headless project, is Black Diamond Equipment. Black Diamond is a strong outdoor brand that struggled to showcase their inspiring content on their previous website that was on one of the monolithic platforms. Encumbered by limitations and cost-prohibitive development, Black Diamond chose a headless strategy that incorporated the BigCommerce open SaaS platform for their new site. 

One of the primary goals of the replatform was to enable the Black Diamond marketing team to freely manage the site and their rich content, providing a more dynamic creative experience that better represents the brand, all while reducing their total cost of ownership. The headless solution included the integration of many 3rd party service applications and a feature-rich CMS. 

Leveraging a strategy similar to Skullcandy and Yeti Cycles, the new design set to blend rich content with products where it matters most to their customer. With the incredible imagery and stories developed by the brand, the new design and CMS allows Black Diamond to immerse their customers into the experiences the brand is known for. Not only do they have full capabilities of managing this content, but their team can also go far beyond simply updating where they are able to create new pages and content using this advanced design system and the CMS.  

Another goal for Black Diamond was to customize their messaging towards their different markets. This includes European countries and languages in addition to their pro athletes. The CMS not only supports multiple languages but the site was also programmed so the European team can present different merchandising, assets and messaging to these different customers, providing a better user experience by market. The marketing team at Black Diamond has newfound freedom that they are quickly taking advantage of as they flex their creative muscles. 

Key Takeaways

While headless architecture is still somewhat in its infancy, it is leveling the playing field of what brands can do with their digital experiences. What was once only accomplished using custom programming can now be harnessed by non-technical marketing teams expressing a true, uncompromised experience. Early adopters like BigCommerce are already way ahead in terms of setting brands and merchants up for success using this approach. The landscape is only getting better where many tools and programs are emerging to make headless an even easier architecture to consider. Unleashing this creativity for brands is only one of the advantages of headless but is probably the most exciting for those who enjoy the creation of a great user experience.