How I Led the Charge on Headless Sanity E-commerce Site
During my tenure as a product owner of Reflektor Digital, the Harklinikken team, in coordination with another agency, reached out to our team to develop a new website utilizing some of the latest technologies in order to serve a fast website capable of handling large volumes of traffic. In addition to the quicker loading times, they presented us with the challenge of utilizing new modular designs, which will allow their marketing team to construct new pages without any development work.
This project was HUGE, layered with technical complexities intertwined with the unknown scope of the project. Not only were the designs unfinished at the moment of estimating the scope, but it was a challenge for us as a team, who never developed a high-performing e-commerce site.
Undeterred, we proceeded to take on this challenge as I was highly vested in proving my capabilities, and I really love the e-commerce space, in general. My role in the project involved wearing multiple hats at once:
- Product Owner
- Technical Lead
- Senior Fullstack Developer
Background
Initially, the scope of the project was determined by the wireframes presented to us by the client. However, as a product owner, my task was to thoroughly investigate and research the scope, including items that our client may not have provided us. As part of our initial research, our team was also tasked to decide which technological stack we should proceed with for this new website. I took the lead, investigated three possible routes, and presented to our team the stack we should choose. The possible routes included:
- Create a brand new Shopify liquid theme from scratch.
- Create a headless Next.js commerce architecture with Sanity as the CMS.
- Create a headless Shopify e-commerce architecture, utilizing Hydrogen & Sanity as the CMS.
There were plenty of pros and cons of these approaches, but the decision came down to these factors: familiarity, expertise, risk, and reliability. Thus, we chose the Next.js approach.
Since our budget was limited, our team size was initially comprised of:
- 1 project manager (limited role & time),
- 1 product owner (myself),
- 2 developers: 1 senior & 1 intermediate
We also had a technical director and product manager from the agency that was dealing with Harklinikken as a client.
Challenge
Once we had settled on the architecture, we decided to proceed and outline all risks involved since the project transformed from being a website rebrand to a website migration — one architecture to another one. Our headless approach meant a few aspects need to be considered:
- All Shopify Apps need to be reviewed, and each app must undergo a viability, risk, and importance test.
- Clients’ expectations need to be handled better in order to ensure a smooth migration.
- All existing tiny features present under the hood of Shopify Liquid architecture need to be considered — items that were not scoped out initially — (Scope CREEP yikes!)
- Seamless Shopify checkout experience
- Seamless Sanity Integration with Preview functionality enabled marketers to work on creating new pages.
Furthermore, this project’s main issue was the budget and unrealized scope, which was discovered only when the client provided access to the Shopify Admin panel. (Too late! Contract signed, work began, and here we get access to the panel with lots of unidentified features)
However, as they say in project management, if budget and scope are fixed, time is the only variable, and thus, the launch was extended from the ambitious deadline of April 1st week to May 21st, 2023.
Solution
Initially, as the project began, our team tackled the front-end development work, which was more thoroughly defined because I had the opportunity to build detailed front-end design tickets during the project scoping period. We utilized JIRA for project management and had two-week sprints, with sprint review and sprint planning as the only major events/ meetings during the project. (Yes, this was our version of SCRUM. Welcome to the real world where NO ONE does it by the book)
During the initial period, while my peers worked on Sanity CMS development and front-end designs, my task was to tackle the most challenging aspects of the project: how to integrate the critical Shopify Apps with the headless approach. These important Shopify Apps were but not limited to:
- Recharge for subscriptions (CRITICAL!!)
- Rebuy for recommendation
- Loop Returns
This task required me to consult with various stakeholders, including customer support teams for each Shopify app. I even had the opportunity to talk to the product manager of some of these apps. Once I consulted with them, I had to build prototypes to provide proof of concept to the technical director, who then reassured the client that the integrations with headless were possible.
Once the proof of concepts was approved, our developers took on the task of integrating them with front-end components.
During the project, at various times, I had to demonstrate my leadership and collaboration skills, where I would have one-on-one with developers, aiding them in the repository setup or explaining how the code functions. I would also have lots of one-on-ones with the product manager to define the tickets and the scope of the sprint, aka product backlog grooming.
Results
In the end, the project was successfully launched on May 21st; here is the website video below:
We were extremely proud of what we achieved with a limited budget. The performance metrics improved significantly from 31% to 70%, and we exceeded the client’s expectations. In a world where a 4-second delay can equate to 25% fewer sales, we prioritized speed without sacrificing aesthetics or usability. For accessibility, we achieved 90% on desktop and 97% on mobile, and we achieved above 80% on SEO from a miserly 50% before the website rebrand. We would have loved to improve further, but our budget was exhausted.
As per client feedback, well there was a post-launch project, Harklinikken x Easy Gift, where, given the limited budget, I became the lead full stack developer, who worked closely with a product manager from the Siberia team. More on this in a separate case study.
Lessons Learned
Some key takeaways from my personal experience:
- Website migration scope is always more than what it seems in the beginning.
- Next.js Headless Commerce is an amazing architecture for brands looking to have blazing e-commerce sites.
- Recharge for subscriptions is SUPER amazing! I can’t believe Shopify doesn’t offer native subscriptions.
- Client expectations were not handled properly throughout the experience, and there were a lot of rough roads during the project.
- Tech Stack experience that I acquired: Next.js, Shopify APIs, Sanity CMS, Recharge APIs, Rebuy APIs, TypeScript and Storybook
One key thing I would do differently, looking back, is utilizing Composable Commerce, which I found out this year and have done a certification on it. I look forward to being given a chance to build another headless e-commerce site. Please reach out via my space in bio — (P.S. Click the telephone hotspot)
TL;DR Section
High-stakes ✅, Risky ✅, Little experience ✅
Taking on this project for Reflektor Digital to build the Harklinikken website, I donned multiple hats — Product Owner, Technical Lead, and Senior Fullstack Developer — to forge a swift, robust e-commerce platform amid uncertainties and evolving scopes.
Utilizing a headless Next.js and Sanity CMS build, we overcame technical hurdles and seamlessly integrated crucial Shopify Apps, for example, Recharge and Rebuy, and managed client expectations just enough not to derail the project.
The outcome? A stunningly fast, user-friendly site that improved performance metrics and exceeded client expectations. My leadership and technical strategies were pivotal, highlighting the immense potential of Next.js Headless Commerce, managing the team through a pseudo-Scrum framework, and setting a precedent for future e-commerce projects in Reflektor Digital.
