Inspiration
Customer churn costs businesses $1.6 trillion annually. We watched Customer Success Managers drown in disconnected spreadsheets—tracking usage here, revenue there, support tickets somewhere else—unable to see the warning signs until customers had already decided to leave.
We asked: what if we could see customer health the way doctors see human health? Not as isolated metrics, but as interconnected "genes" that together reveal the full DNA of a relationship. That's SuccessHelix.
What it does
SuccessHelix transforms scattered customer data into an intelligent genome visualization. Four interconnected "genes"—Engagement, Financial, Sentiment, and Relationship—pulse with real-time health signals. Our ML engine predicts churn probability with SHAP-powered explainability (so you know why, not just what), while embedded Tableau Cloud dashboards provide deep analytics. Ask questions in plain English: "Which customers need attention this week?" and get actionable AI insights instantly.
How we built it
- Frontend: React 18 + TypeScript with TailwindCSS, shadcn/ui components, and custom D3.js genome visualization that animates customer health as DNA strands—deployed on Vercel with SPA routing
- Backend: FastAPI (Python) powering REST APIs with scikit-learn's CalibratedClassifierCV for probability-calibrated churn predictions—deployed as a serverless container on Google Cloud Run
- ML Explainability: SHAP TreeExplainer wrapping our gradient boosting model, surfacing the exact features driving each prediction
- Tableau Integration: Full pipeline—Hyper API generates data extracts, REST API publishes to Tableau Cloud, Embedding API v3 renders interactive dashboards
- AI Layer: OpenRouter (Gemini 2.0 Flash) for natural language insights, customer diagnosis, and what-if intervention simulations
- Alerts: Slack webhooks delivering proactive notifications with one-click customer context
Challenges we ran into
- Tableau Embedding Complexity: Embedding API v3's web component lifecycle required careful script loading and state management to avoid race conditions
- SHAP + Calibrated Classifiers: Standard SHAP doesn't work directly on CalibratedClassifierCV—we had to extract the base estimator and wrap it with TreeExplainer
- Real-time Data Sync: Coordinating Hyper file generation, Tableau Cloud publishing, and frontend refresh without blocking the UI
- AI Response Formatting: Raw LLM markdown needed custom parsing to render cleanly in React components
- Cloud Deployment: Configuring Google Cloud Run with proper environment variables for Tableau tokens and ensuring CORS worked correctly between Vercel frontend and Cloud Run backend
Accomplishments that we're proud of
- End-to-end Tableau Pipeline: Hyper API → REST API multipart publish → Embedding API v3—fully automated data refresh with one click
- Interpretable ML: Not just predictions, but SHAP explanations that CSMs can actually act on ("engagement_score drove 40% of this risk")
- The DNA Metaphor: Complex health data becomes intuitive—genes connect, cascade effects visualize, and the genome tells a story
- Production-Ready Deployment: Live on Vercel + Google Cloud Run with auto-scaling, ready for real-world use
- Production-Ready Alerts: One-click Slack notifications with full customer context, ready for real CSM workflows
APIs and Dev Tools Used
| Tool | Usage |
|---|---|
| Tableau Hyper API | Programmatic .hyper extract generation for customer health, gene scores, cascade events |
| Tableau Embedding API v3 | Native <tableau-viz> web component embedding with event listeners |
| Tableau REST API | Multipart/mixed datasource publishing to Tableau Cloud |
| OpenRouter (Gemini 2.0 Flash) | Natural language insights, customer diagnosis, what-if simulations |
| scikit-learn | CalibratedClassifierCV + GradientBoostingClassifier for calibrated churn probabilities |
| SHAP | TreeExplainer for feature importance and individual prediction explanations |
| D3.js | Custom genome visualization with animated DNA strands and cascade flows |
| FastAPI | High-performance async Python backend with automatic OpenAPI docs |
| React + TypeScript | Type-safe frontend with TailwindCSS and shadcn/ui |
| Slack Webhooks | Proactive health alerts with interactive message blocks |
| Google Cloud Run | Serverless container deployment for backend API with auto-scaling |
| Vercel | Frontend hosting with edge network and SPA routing |
What we learned
- Tableau's Power is in the Pipeline: Hyper API + Embedding API v3 together unlock experiences impossible with either alone
- Explainability > Accuracy: CSMs don't trust black boxes—SHAP values turned our model from "interesting" to "actionable"
- Metaphors Matter: The DNA framing transformed how users understood health—it's not a score, it's a living system
- Serverless Simplifies: Google Cloud Run made backend deployment painless—just push a container and it scales automatically
What's next for SuccessHelix
- Historical Churn Labels: Train on real outcomes for proper model evaluation and continuous improvement
- Real-time WebSocket Streaming: Live health updates as customer behavior changes
- Custom Gene Weights: Let CSMs configure weights per customer segment or industry
- Tableau Actions Integration: Bidirectional communication—click in Tableau, update the genome; click the genome, filter Tableau
- Multi-tenant SaaS: Deploy as a service with isolated customer workspaces
Built With
- d3.js
- fastapi
- gcloud
- openrouter
- python
- react
- scikit-learn
- shadcn/ui
- shap
- slack
- tableau-embedding-api-v3
- tableau-hyper-api
- tableau-rest-api
- tailwindcss
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.