Interactive Product Wizard

Challenge

A local distribution company needed a user-friendly way for prospective customers to find the right product for their needs. Clients often struggle comparing technical specs for these machines. Furthermore, the client wanted to capture user info for sales follow-up in their HubSpot CRM. The challenge was to build an interactive, step-by-step wizard that filtered machines in real-time based on user inputs, all while integrating with Airtable (databse with technical specs) and HubSpot (for lead management).

Solution

We built a multi-step React/Next.js wizard that walks the user through a series of questions and narrows down matching models in real time. At each step:

• The user’s selections filter the list of machines (sourced from Airtable) with progressive narrowing.

• A small “machine icons” widget shows how many models remain, adding a fun visual cue.

• Once the user reaches the final step, they see the matching machines with images and details, plus a “Learn More” button that opens a contact form.

• Submitted forms automatically upsert contacts into HubSpot and create a note with the user’s wizard selections—giving their sales team immediate insight into what the customer wants.

Tech Stack

1. Next.js & React:

   • For a seamless multi-step UI, quick page loads, and easy server-side data fetching.

2. TailwindCSS:

   • To rapidly style the wizard interface, create frosted-glass effects, and maintain responsiveness for mobile, tablet, and desktop.

3. Airtable:

   • Stores the machine data (model numbers, images, specs). The app fetches this data via Airtable’s REST API.

4. HubSpot:

   • Integrates via Next.js API routes for lead capture. Automatically creates or updates contacts, then associates a note for each submission.

5. react-transition-group:

   • Adds smooth page-turn animations between each step and fade-in/out transitions for machine icons.

Key Considerations

• Progressive Filtering: The wizard had to handle multiple filters (capacity, cooling, etc.) in an intuitive way, preventing the user from being overwhelmed.

• Future Expansion: The structure anticipates new machine categories (e.g., frozen beverages, milkshakes), so adding or skipping steps is straightforward.

• Responsive Design: Ensured that the wizard’s cards and transitions look great on all devices, from phones to large desktop monitors.

• Lead Management: Each submission pipes into HubSpot automatically—saving time and offering immediate insights for follow-up.

• Fun & Engaging: Used small touches like icon clouds, animated page flips, and color gradients to give the process a friendly feel that matches branding needs.

Outcome This new wizard helps prospective clients quickly find the most suitable machine, gathers lead data for the sales team, and streamlines the entire product discovery process—leading to a more efficient and engaging customer journey.