Onboarding for a Waste Hauling Company
I designed and built the onboarding flow for a white-label SaaS platform for waste collection management, using an AI pipeline, from brief to deployment, with Notion, ChatGPT, Claude Code, Cursor AI, and Vercel.
An analog industry asking for digital transformation
Waste hauling companies operate with high volumes of routes, drivers, clients, and service orders, most of it managed through spreadsheets and phone calls. The challenge was clear: create a SaaS platform that centralized these operations while ensuring that users with limited digital familiarity could adopt it independently from day one.
The highest churn risk in B2B platforms happens within the first 7 days. For a sector with low digital maturity, a poorly designed onboarding meant not just churn, but cultural resistance to change. The experience needed to educate, engage, and deliver tangible value before users even completed their setup.
The platform needed to be white-label, meaning other waste hauling operators could adopt it with their own brand identity. This added a layer of complexity to the design system and the onboarding flow, which had to work consistently regardless of which brand was applied on top.
AI-Assisted Design & Build
The project was executed with a 5-step AI pipeline, from research intake to production delivery. Each tool was chosen for the type of task it performs best.
Gathered all challenge materials
Collected the full challenge brief from Notion and reviewed all research recordings to extract context, constraints, and real customer insights.
Generated the PRD
Used ChatGPT with the Notion brief and research insights to produce a comprehensive Product Requirements Document covering user journeys, edge cases, and success metrics.
Created the Implementation Plan
Brought the PRD into Claude Code to architect the technical implementation: component structure, step-flow orchestration, white-label theming, and data models.
Built the application
Developed iteratively using Cursor AI for code editing and Claude Code for complex reasoning, toggling between both tools step-by-step until the final polished prototype.
Stored & deployed
Pushed to GitHub for version control and deployed to Vercel for live hosting, making the prototype instantly shareable and publicly accessible.
Technical architecture in Claude Code
The PRD was brought into Claude Code to architect the technical structure: Vite + React + TypeScript with a white-label CSS variable theming system.
Vite + React + TypeScript
Instant live-reloads, strict type checking, ultra-high-performance UI.
Dynamic Theme Switcher
Toggle between 4 hauler brands in real time: Hauler Hero, Midwest Disposal, Eco-Waste, Urban Recycle.
CSS Variable System
Design tokens via custom properties. Brand switching via data attributes, zero JS overhead.
Modular Step Components
7 isolated steps: Address → Services → Account → Billing → Review → Success → Error states.
Project structure
Cursor AI + Claude Code
Development was iterative, using both tools in tandem: Cursor AI for fast code editing, Claude Code for complex reasoning, architecture decisions, and refinements.
CC Claude Code
- Generated the full Implementation Plan from PRD
- Architected multi-step flow state management
- Designed the white-label CSS variable system
- Implemented complex address validation logic
- Iterated on edge cases and error states
AI Cursor AI
- Fast in-editor code completion and edits
- Rapid component scaffolding
- Real-time styling adjustments
- Refactoring and code cleanup
- Step-by-step iterative UI improvements
Published and functional prototype
At the end of the process, the prototype was live, with smooth navigation across 7 onboarding steps, a functional white-label theming system switching between 4 brands in real time, and automatic deployment via Vercel.
Access the live prototype: https://hauler-hero-challenge-jawe.vercel.app/#
- →7-step flow: Address → Services → Account → Billing → Review → Success
- →White-label with 4 switchable brands in real time (Hauler Hero, Midwest Disposal, Eco-Waste, Urban Recycle)
- →CSS variable system for brand swaps with zero JS overhead
- →Address validation and form states with error handling
- →Responsive design with isolated modular components
- →Automatic deployment via GitHub + Vercel
Expanding boundaries between design and code
This project was a transformative experience that allowed me to combine UX research with real design engineering, using AI as a strategic partner at every stage, from brief to deployment.
Designing for users with low digital maturity
I learned in practice that vocabulary matters as much as interface. Designing for an analog sector requires humility: the right metaphors are worth more than any modern UI pattern.
AI pipeline as a competitive advantage
Using Notion, ChatGPT, Claude Code, and Cursor AI in sequence wasn't just about productivity, it was a way to think through the problem more deeply at each layer, from brief to architecture to code.
White-label demands systemic discipline
Designing for white-label revealed that well-named tokens and color-decoupled components aren't a luxury, they're a prerequisite for scaling with quality and delivering consistency across brands.
Autonomy to create end-to-end products
I finished the project with the ability to go from brief to a functional prototype published in production, reducing dependence on technical teams and accelerating idea validation with real users.