Case Study
Victoria Beckham
Beauty
How Fostr used Headless Shopify and the Jamstack to power e-commerce on Victoria Beckham Beauty
Download the Case Study
Introduction
When Victoria Beckham Beauty engaged Fostr , an e-commerce agency, to create their online store, they wanted a premium, bespoke customer experience to match their brand. The project had an ambitious timeline of just 3 months for its design and implementation, and needed to accommodate some very specific design requirements, as well as deliver an efficient shopping experience.
Fostr’s extensive experience as a Premier Shopify partner positioned them well to leverage the considerable power of the Shopify platform, but as the project progressed, they took a bold move to re-imagine their planned technical approach in favour of a Jamstack approach with a decoupled architecture. This case study explores some of the technical choices and the motivations behind them. And details some of the results and insights that emerged along the way.
Journey to the tech stack
Designing and building Shopify themes is a core competency of Fostr, and they have successfully utilized this approach for numerous luxury brands in the past . However, as the 12 week project progressed and more detailed functional and design requirements of the client emerged, Fostr recognized that they needed more flexibility than their usual approach would afford.
After 6 weeks of work on the project Fostr’s CTO, Mark Stewart, considered a new strategy, and rapidly built a proof of concept site to determine if a change in technical approach might be wise. This proof of concept used:
- The Shopify storefront API for managing and populating the inventory and product information
- Gridsome, a static site generator which is part of the Vue.js ecosystem, to combine the content and data into a pre-generated site.
With the proof of concept in hand, progress was fast. Fostr were able to quickly demonstrate to their clients at Victoria Beckham Beauty that they had found an approach which could:
- Provide the desired flexibility in terms of visual design, user journeys, URL design and product organisation
- Confidently satisfy the required scale and stability thanks to product pages which could now be pre-generated and served directly from a content delivery network (CDN)
- Use the same rock-solid checkout process of Shopify’s checkout flow
- Provide approachable content and inventory management tools for the team at Victoria Beckham Beauty
- Allow for rapid development and iterations as a result of the freedoms the development team now had.
With only 50% of the project time remaining this final point would be critical. Pivoting to a new technical approach was bold. But confidence came from an even greater control over the technical stack than had previously been possible. The core skills required to execute with this technical architecture are less proprietary and allow development teams to leverage more of their existing knowledge to great effect, creating impressive time to market and agility.
The decoupled architecture did not mean that the powerful benefits of Shopify would be lost, but that they could now be leveraged in even more flexible ways thanks to Shopify’s APIs.
Shopify’s API is an area where they particularly shine.
Longevity and flexibility
While other projects had enjoyed the rapid development made possible by Shopify’s themes, the approach to instead use their APIs might appear to have created more work. But Fostr founder and Chief Design officer, Ryan Foster observed that on this project, their speed of development actually increased. By decoupling the user interface from the underlying platform, they gained more freedom to customize the design, content and user experience. But there are other advantages too.
The team at Fostr created a layer of abstraction between the data services and their site generator. This allowed them to more efficiently combine and enrich data from their different APIs, and also avoid tightly coupling between the APIs and the web site.
Reusing this architecture thus became even more viable for future projects which might have slightly differing APIs and services intended to drive their site. The frontend development and interface possibilities became even less dependent on the shape of the back-end and related services.
The scale and resilience of Shopify
The checkout experience on victoriabeckhambeauty.com is handled by Shopify’s checkout UI.
Rather than redesign and implement complex checkout flows, Fostr retained the proven and effective checkout which Shopify provides. They have seen the challenges that can come from huge spikes in demand at times like Black Friday or other moments of peak traffic, and Shopify’s checkout UI has proven more than capable of weathering such demand.
Meanwhile, the product pages, where the customer initially engages with the products and the brand, receive supercharged performance as a result of being generated at build time rather than at request time, and served directly from a CDN. This performance has drawn the attention of other luxury brands as Ryan Foster commented:
Other fashion brands benchmarking against VBB want to understand how it’s so much faster.
Improving experiences
A key goal of an e-commerce site is to provide a great user experience so that it can drive greater conversion. Fostr worked closely with Victoria Beckham Beauty to achieve this for their site, but were also mindful of the importance of the brand experience.
This decoupled approach improved the developer experience, the customer experience, and the merchant experience.
While Shopify is great for managing product and inventory information, Fostr found that the bespoke content structure desired by Victoria Beckham Beauty would benefit from a content authoring experience that could be tailored to the needs of the site templates it would be populating. Contentful was chosen as the solution, and its customizable content model, along with features like staging/production content APIs brought a great experience for the authors and maintainers of the site. Contentful was also used for managing content assets and to deliver the images to the site.
The developer experience also flourished. Since the site was generated by Gridsome as part of an automated build, and populated at build time with various APIs and content feeds, it was simple to bootstrap the development environment and generate many different environments for the purposes of staging and feature reviews. The Fostr team were able to iterate more quickly and collaborate much more closely with their clients at Victoria Beckham Beauty.
Fostr’s Mark Stewart had this to say about using Netlify’s Branch Deploys and Preview Builds:
If the client needs to see a new feature, I can make a branch on my local machine, push it to Netlify and in 2 minutes the client has a new feature in front of them to review.
Risk and reward
Building the victoriabeckhambeauty.com site in record time was a remarkable success. And Ryan Foster tells us that the site is consistently performing better than expected from a conversion point of view. But such a dramatic pivot in technical architecture is not typically what a project team would be keen to undergo. On that point, Fostr weighed their decision carefully. And were able to pursue the approach in part due to the additional safetynet of retaining Shopify as a key element. With product, inventory and fulfillment facilities being handled by Shopify regardless of the frontend experience deployed, a significant failsafe existed. A great way to de-risk a project.
Along the way, the team also learned a great deal about the headless approach, encouraging them to employ the same approach again for future projects. They also spotted some trends emerging in the industry. Ryan Foster observes that the popularity of a decoupled architecture is on the rise for many of their clients when they reach turnovers of around $100M. Larger brands have more desire to provide differentiation through their online store experience and a move away from themed sites.
The model that Fostr found allows them to continue to build on the solid foundations and services of Shopify and keep flourishing as a Shopify partner, but also offer bespoke experiences for their clients built on top of the Shopify APIs, blending product detail pages and editorial content with whatever frontend stack they identify as the best choice.
Useful links
If you are interested in seeing more about this project and exploring the technologies discussed in the case study, here are some resources for you:
- Contentful, Victoria Beckham Beauty and Netlify webinar
- The victoriabeckhambeauty.com site
- Victoria Beckham Beauty in Fostr’s portfolio
- Gridsome and Netlify - a project template to deploy and explore with one click
- Netlify for Enterprise