Founded in 2002, StriVectin is a leading skincare brand, with a range of anti-aging skincare products available both in cosmetics shops and online. With a base of fans making regular purchases, their e-commerce store was quite popular.
Unfortunately, it had become increasingly difficult for the team to make changes to their seven-year-old codebase, built on a legacy platform. So in 2018, they decided it was time for a refresh.
Building a Prototype Quickly By Leveraging Existing Design & Data
Strivectin had a long relationship with Elevar, a digital agency focused on e-commerce, and the initial push on StriVectin fell to Thomas Slade, Elevar’s VP of engineering.
The project had several high-level goals: move off of Magento to Shopify, improve performance and user experience, improve the developer experience with modern tooling, and use static payloads in order to reduce server costs and improve security and reliability.
Slade’s main motivation was to demonstrate that the project’s goals were achievable.
In many cases, prototypes are incredibly time-consuming to do well because they need to feel real, which often involves both design and data, which can take extra time. However, Gatsby enabled Elevar to leverage existing content and design to quickly create a prototype showing Gatsby’s potential.
That prototype used the existing design from the StriVectin site and pulled the product data from the existing Magento database by using knex.js, objection.js and GraphQL to create a wrapper around the production Magento EAV datastore so that the new Gatsby prototype could use real data.
With a GraphQL wrapper around the Magento datastore, the Gatsby prototype was able to use StriVectin’s production content to power the prototype.
This was intentional: by using the current design assets, and the legacy database, Slade was able to complete the prototype phase in under a week.
Moreover, the wrapper they built for the Magento datastore could be reused for future clients to help quickly prototype a Gatsby site and sell them on the benefits of a similar migration. With Magento ending support for 1.x in 2020, Elevar had other clients in similar situations with Magento, and they knew they’d be able to reuse the GraphQL wrapper for the Magento EAV datastore with those other clients as well. They would then be able to show the potential of using Gatsby on their stores to help reduce the fear of switching to a more modern approach so clients wouldn’t be chained to Magento for all aspects of their site and content management processes.
Even though the prototype kept the legacy visual design and the existing data model from Magento, it was enough to show the potential performance gains of a static store powered by Gatsby. The Elevar team was blown away by the performance internally, and so they decided to deploy the static payload and share it with StriVectin where the response was similar amazement
Having been burned by Black Friday/Cyber Monday performance issues and downtime in the past with their Magento site, the idea of a faster site that was also more secure and required significantly less money and complexity for hosting and infrastructure, it was immediately attractive. And when the next Black Friday/Cyber Monday rolled around with their new static-payload site, it didn’t skip a beat.
Since the Magento data model was designed around maximum product flexibility, it was more complex than what they would eventually need. However, the GraphQL wrapper that Thomas built helped mitigate some of that complexity. Also, by using the existing site design and database, they reduced variability between the original site and the prototype so that any comparisons between the two were focused on performance rather than design or product information.
A Prototype You Don’t Have To Throw Away
Gatsby’s approach to the Content Mesh opened the door for Elevar to build a working prototype and validate the potential performance gains without worrying about each of the tools they’d eventually use. Since Gatsby is agnostic to where the content comes from, it helps avoid lock-in and empower teams to choose the content store or stores that works best for their team.
That all helped the team reduce risk and maximize flexibility by using Gatsby as the glue for all of the pieces and replacing/updating them piecemeal instead of as one huge project. It also ensured they could choose specialized products and tools that were the best for StriVectin without having to find a single platform to do everything. And, if they need to replace a component in the future, they’ll be less tightly bound to a specific set of tools.
While the finished StriVectin site would ultimately be powered by tools other than Magento, the structure, patterns, and processes that came out of the prototype remained relevant once they moved to the production site. While the back-end would ultimately change, their experience using the GraphQL with the prototype made it a natural transition to swap out Shopify for Magento.
Brad Redding and Thomas Slade shared more about Elevar and Strivectin’s story on the webinar “Optimizing E-commerce with Gatsby.”