DermaFlow: Automated Custom Skincare Prescription System
Figure 1: High-level overview of the automated data pipeline.
📋 Project Overview
DermaFlow is a simulated enterprise project designed to solve a common bottleneck in the medical and retail sector: scalability of personalized consultations.
The goal was to engineer a fully automated "prescription" system where a user's diagnostic answers immediately trigger the creation of a personalized WooCommerce checkout session, while simultaneously syncing granular data to a CRM for long-term retention.
- Role: Lead Automation Architect & WooCommerce Developer
- Timeline: 1 Week (Intensive Sprint)
- Stack: WooCommerce, Make.com (Integromat), Typeform, ActiveCampaign, JSON/Webhooks.
🛑 The Challenge
The client, a premium skincare clinic, relied on manual consultations to recommend products. This process had critical issues:
- Unscalable: Doctors had to manually review forms and email invoices.
- High Drop-off: The delay between "interest" and "payment" caused a 60% lead loss.
- Data Silos: Patient health data (Typeform) was not connected to their purchase history (WooCommerce).
The Mission: Build a headless-style integration that automates the entire flow from diagnosis to payment in under 5 seconds.
🛠️ The Solution & Architecture
I designed a Middleware-Driven Architecture using Make.com as the central nervous system to bridge the gap between the frontend data collection and backend commerce engine.
The Automation Workflow:
- Input: User completes a diagnostic quiz on Typeform.
- Trigger: A Webhook fires the JSON payload to Make.com.
- Logic Processing: Make.com analyzes the answers (e.g., Skin Type = Oily) using Router modules.
- Execution:
- WooCommerce: The system maps the result to specific Product IDs and generates a Dynamic Add-to-Cart URL with pre-filled billing data.
- ActiveCampaign: The user is added as a contact with specific tags (e.g.,
DIAGNOSIS: OILY,STAGE: CHECKOUT_READY).
- Delivery: The user receives an instant email containing their unique checkout link.
💻 Technical Deep Dive
1. Webhook Payload Handling
Handling the raw data from Typeform required parsing the nested JSON structure to extract variables for logic mapping.
// Sample JSON Payload processed by Make.com
{
"event_id": "01J8X...",
"form_response": {
"submitted_at": "2025-11-25T10:30:00Z",
"answers": [
{
"field": { "id": "skin_type_01", "type": "multiple_choice" },
"choice": { "label": "Oily Skin" } // Trigger for Product ID #102
},
{
"type": "email",
"email": "[email protected]"
}
]
}
}
2. Dynamic Checkout Construction
Instead of relying on standard shop pages, I utilized WooCommerce's URL parameters to bypass the catalog and land the user directly at the payment gateway with their specific prescription loaded.
Logic Formula:
https://store.com/checkout/?add-to-cart={product_id}&billing_email={email}
3. Make.com Scenario Visualization
Below is the actual logic constructed to handle the routing differences between "Dry", "Oily", and "Sensitive" skin types.
Figure 2: The "Brain" of the operation. Complex routing logic ensuring 100% accuracy in product mapping.
📊 Key Features Implemented
Conditional Routing Logic: Implemented advanced filtering in Make.com to ensure users are never recommended incompatible products.
CRM Segmentation: Automated tagging in ActiveCampaign. If a user buys "Acne Cream", they enter a specific email sequence for acne care tips, increasing LTV (Lifetime Value).
Frictionless UX: Removed 4 steps from the standard buying process (Shop Page -> Product Page -> Cart -> Checkout). Users go from Diagnosis -> Checkout.
🚀 Results
100% Automation: Eliminated the need for manual doctor review for standard cases.
Real-time Sync: Data flows between Typeform, WooCommerce, and ActiveCampaign with less than 1 second latency.
Scalable Infrastructure: The system structure allows for adding new skin types or products without rewriting code, just by adding a new branch in the Make.com scenario.
📺 Video Demo
Seeing is believing. Watch the full automated flow in action below.
