My client required a dedicated platform optimized for selling a specific subscription service, along with advanced features to enhance data collection and ad optimization.
I was responsible for the entire web development process from scratch, which included designing the site in Webflow, integrating Stripe for seamless checkout, and embedding Meta and TikTok pixel code. Additionally, I implemented custom JavaScript to enable interactive functionality such as texting users who engage with specific elements via their phones, and processing form information (beyond native Webflow handling).
This included collecting UTM parameters and seamlessly integrating them into Webflow's forms, further optimizing the user journey and enhancing marketing strategies.
Third Party Limitations
While the development of the site progressed smoothly with a straightforward implementation of most features, there were a few learning opportunities that presented themselves.
For one, integrating Stripe posed a unique learning curve. Initially, my client desired an embedded product checkout window directly on the checkout page. However, this specific request required a backend setup that was not directly supported by Webflow’s hosting environment.
Although feasible by exporting the Webflow frontend and setting up a separate backend for hosting, time limitations, due to design requests late in production, made this unfeasible.
Workarounds and Compromise
These kind of issues can happen, as this version of the checkout page was a late addition to the site, and my client was unaware of the process to incorporate such a feature. Adaptation is key, so I moved quickly to update my client on our limitations, and presented some possible alternatives.
With my client's approval, I went with Stripe’s no-code checkout feature, which redirects customers to a secure checkout page managed by Stripe.
To maintain a seamless user experience, I set up a redirect back to Sherpa’s confirmation page after purchase completion. This solution mirrored the original desired user flow, ensuring customer satisfaction while adhering to my client's vision.
Marketing Pixel Integration
Another learning curve in this project was the integration of Meta and TikTok pixel code. These tracking code snippets are essential for analyzing user behavior on the site—such as page visits, button clicks, and form submissions—to optimize advertising strategies.
As my first foray into embedding marketing code, I faced challenges ensuring that the correct code triggered on designated actions, verifying functionality, and devising a system to efficiently attach the code to the appropriate site elements. The complexity was heightened by the fact that this task was added after the majority of the site had been developed, requiring adding these features to elements, retroactively.
Class-Based Targeting
To streamline the process, I assigned specific classes to elements that needed to trigger the pixel code. I also set up organized tables listing all interactable elements, tagged with the corresponding pixel code they needed to fire. This helped to systematically track what code needed to be implemented, what had been added, and what had been tested. I then used JavaScript triggers for these elements, ensuring that the pixel code fired correctly upon interaction. This structured approach proved highly effective.
The experience also taught me a valuable lesson for future projects. I now make it a point to discuss pixel implementation during the initial planning stages of a website. This enabled a much easier to track, and add, process for working with pixel code.
Stepping up as project lead for the first time was a game-changer for me as a Webflow dev.
It wasn't just about managing the site build; it was a deep dive into everything from time management to the intricacies of pixel code and navigating plugin limitations. This role really sharpened my skills in building efficient, effective sites and transformed me into a more proactive and critical thinker. The whole experience with this agency task was incredibly enriching, pushing me to new levels of professional development and confidence.