High-Traffic Lead Generation Form Redesign

Client: Home Service Quotes
Role: Senior Frontend Engineer

Challenges

The existing form was central to the client’s lead generation funnel but had several engineering and performance issues:

Rigid, linear navigation required restarting the form to make changes.
Poor mobile responsiveness with content spilling beyond viewport height.
Outdated UI layer that lacked scalability and consistency with modern brand standards.
No clear loading or processing states, leading to increased abandonment.
Inefficient rendering and lack of structured components for new features like address autocomplete and cross-sell prompts.

As the lead frontend engineer, I was responsible for translating UX goals into scalable, performant code while modernizing the architecture:

Step-based Scrolling Form in React/Next.js
Built a hybrid scrolling navigation system that preserved flexibility—users could move back and forth without losing state—while ensuring clean transitions and predictable behavior across devices.
Responsive, Viewport-Constrained Layouts
Implemented dynamic height calculations with CSS and JavaScript to keep each step within the visible screen, improving usability and eliminating awkward scroll patterns.
Clear Loading and Processing States
Integrated animated loading states with Node-powered backend APIs to give users transparent feedback while data was matched, saved, or providers were retrieved.
Address Autocomplete Integration
Added Radar autocomplete API with React debouncing and input handling to improve accuracy and speed of form submissions.
UI Modernization & Theming
Rebuilt the form styles in SASS, using a modular architecture for typography, spacing, and hierarchy. Ensured all new components aligned with brand design guidelines and could be extended easily for future projects.
Cross-Sell Enhancements
Leveraged Builder.io for A/B testing persuasive social proof language and additional service offers, allowing marketing teams to iterate without developer intervention.

Improved Form Completion Rates
+15% form completion rate across desktop and mobile.
Reduced Support Tickets
Reduced support tickets for form errors and confusion.
Scalable Codebase
A more maintainable, scalable frontend codebase ready for future iterations and experiments.

Project Gallery

Images coming soon...