Back
Challenges
The project involved integrating Memberstack with Webflow to deliver a seamless membership experience, creating gated content without disrupting page structure or performance. Stripe Checkout was set up for subscriptions, ensuring correct plan assignments and handling webhook data to power automated processes. These automations, built with Zapier, securely generated and sent user credentials upon payment completion. Advanced event tracking was implemented by configuring Facebook Pixel alongside server-side and client-side Conversion API (CAPI) via Stape, ensuring accurate tracking of key actions like purchases and add-to-cart events while avoiding duplication or mismatches in reporting. Additionally, accessibility issues were addressed by resolving cases where login and password reset buttons worked only in incognito mode, and security measures ensured gated content remained inaccessible without authentication—all while optimizing speed and responsiveness across the site.
The solution
I delivered a fully integrated Webflow + Memberstack + Stripe platform, enhanced with Facebook Pixel & CAPI tracking through Stape. This hybrid event-tracking setup ensured accurate measurement of key user actions across browsers and devices, even in cases where ad blockers or privacy settings might block client-side tracking. By refining the checkout and onboarding flow, users received instant access to gated content without friction. The integration of server-side CAPI allowed precise purchase attribution, improving the platform’s ad performance insights.
The process
- Research & Requirements Gathering
Defined the membership model, tracking requirements, and integration flow for Webflow, Memberstack, Stripe, and Stape. Conducted competitor analysis to identify best practices in membership platforms and AI learning resources.
- Wireframing
Created low-fidelity wireframes for the members area, checkout process, and content access pages. This helped visualize user flows and identify key interactions before moving to high-fidelity designs.
- High-Fidelity Mockups
Designed UI screens in Figma with brand consistency. Focused on creating a clean, modern aesthetic that conveyed professionalism and approachability. Incorporated user feedback to refine the design before development.
- Development in Webflow
Built responsive pages, implemented CMS collections, and structured gated content areas.
- Memberstack Integration
Configured membership tiers, gated content rules, and dashboards. Set up user authentication and profile management to ensure secure access to premium resources.
- Stripe Integration
Customized checkout sessions, tested payment flows, and handled subscription logic. Ensured a seamless payment experience for users, including handling cancellations and renewals.
- Advanced Tracking Setup
Installed Facebook Pixel for browser events and configured server-side CAPI through Stape, firing Purchase and Add to Cart events from both client and server for maximum accuracy.
- Automation Setup
Used Zapier to connect Stripe and Memberstack, sending credentials via Mailgun. This automated the onboarding process, ensuring users received their login details immediately after purchase.
- Testing & Optimization
Addressed reported UI issues, fine-tuned event deduplication for tracking, and optimized site performance. Conducted thorough testing across devices to ensure a smooth user experience.
End result
The final platform is a secure, high-performance, and conversion-optimized members area that delivers AI prompt learning resources in an engaging environment. The addition of Facebook Pixel + CAPI tracking provided better marketing attribution, supporting more effective ad campaigns. Performance optimizations ensured the site loads fast, while advanced automations streamlined onboarding. This combination of seamless membership experience, robust payment flow, and precise tracking positioned AI Black Magic to scale confidentl
AI Black Magic
Last modified
Aug 13, 2025
Industry
IT & Technology
Technology
Webflow
Skills
Webflow
Figma
UI/UX design
Memberstack
Zapier
Stripe
FB Pixel
CAPI
About the project
AI Black Magic is an exclusive learning platform designed to help users master AI prompt engineering and related skills. The site offers gated content, including structured guides, examples, and resources, to empower users in leveraging AI for creative, business, and technical applications. Built on Webflow and integrated with Memberstack and Stripe, the platform provides a secure, seamless experience for users to sign up, manage memberships, and access premium content.
My role
As the lead designer and developer, I was responsible for planning, designing, and building the entire private members area from scratch. This included implementing membership-based gated content, customizing user flows, and integrating secure payment processing. Leveraging my expertise in Webflow, Memberstack, and Stripe, I crafted a responsive, user-friendly interface while ensuring backend integrations functioned flawlessly.I also implemented Facebook Pixel and Meta Conversion API (CAPI) tracking through Stape, enabling accurate tracking of critical events like Purchase and Add to Cart for marketing optimization.