Automating Dealer Onboarding: An Engineering Case Study
The Problem
F&I product distribution relies on a paper-heavy, error-prone onboarding process. When a new dealership signs on with an agency, reps must collect business information, configure product selections across multiple carriers, set override compensation structures for up to 12 product lines per recipient, and route legally binding documents for signature — often across multiple signers in different locations.
Before this platform:
- Agents filled out multi-page PDF forms by hand — typos, missed fields, inconsistent formatting
- Documents emailed back and forth with no visibility into signature status
- Override forms contain 144+ fields — manual placement was guesswork
- Field agents had zero mobile capability
- Management had no centralized view of the onboarding pipeline
The cost wasn't just inefficiency — it was lost revenue.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| Language | TypeScript |
| UI | React |
| Database | PostgreSQL Locally |
| ORM | Prisma |
| Auth | Google Auth (Oauth2) |
| E-Signature | DocuSign eSign SDK |
| PDF Processing | pdfjs-dist |
System Design
A multi-section wizard flow with persistent state:
Dealership Information → Agency & Carrier Selection → F&I Product Configuration →
Product Details → Product Selection + Override Enablement →
Override Distribution (12 products × 3 recipients) → Review & SignEach section writes to the database independently — a dealer can be abandoned at any step and resumed weeks later. An admin dashboard surfaces exactly where every prospect sits in the pipeline.
Key Engineering Solutions
Visual PDF Tab Placement Editor
The override form has 144+ fields in a dense grid. DocuSign requires absolute coordinates for every tab. We built a custom visual editor with multi-level zoom and coordinate normalization so all 144 fields can be placed accurately in a single session — defined once, used everywhere.
Dual Signing Modes
In-store signing uses DocuSign's embedded ceremony (no email required). Remote signing sends an envelope and tracks status via webhooks. Both modes share the same tab placement data — one template definition, two delivery paths.
Mobile-Ready
Field agents visit dealerships with phones and tablets. The entire app was rebuilt for responsive use — collapsible navigation, icon-only action buttons, table column prioritization — without changing the desktop layout.
Override Product Alignment
The app renders exactly the 12 F&I products that match the physical PDF form — same order, same abbreviations. A 1:1 mapping between what the user configures on screen and what appears on the signed document.
Results
- Pipeline visibility — every dealer's onboarding status visible in real-time
- Signing completion — in-store and remote signing from the same data, no duplicate entry
- Field accuracy — 144 override fields placed once, used everywhere
- Mobile usability — onboarding from any device
- Single-session setup — what used to take days of back-and-forth now completes in one sitting
Built with Next.js, Google Auth, Prisma, and DocuSign. More at autto.com.
