TWO MEN AND A TRUCK®

Innovative changes to online quote form

To keep pace with evolving technology, accessibility best practices, and modern UX standards, TWO MEN AND A TRUCK partnered with RDG to update their online quote form, originally built in 2017. Through strategic backend enhancements and meaningful UX improvements, we streamlined the experience, eliminated long-standing pain points, and delivered a more intuitive, scalable product for future growth.

Services:
Planning & Strategy
Back-end Development
User Experience
Front-end Development
Integration
Technologies:
React
Project Link:
Laptop with lead capture form in progress

Project Expertise

Modern web applications

Because of the inherit complexity of this quote form, we developed a custom web application to handle the various states, paths, and endpoints. The custom application, decoupled from the CMS the rest of the website uses, allowed us to more easily integrate with other systems build custom features.

Accessibility

Accessibility was a major focus in this upgrade, specifically moving towards a progressive disclosure structure. This allowed users the simplicity of focusing on one step at a time while providing peace of mind knowing where they've already been and what information has already been provided.

Project Contributors

Sam head and shoulders, with blonde hair and white and blue plaid shirt

Sam Oltz

Senior developer

Ashley head and shoulders, with glasses, brown hair, and burgundy shirt with cream cardigan

Ashley Helminiak

UX designer & front end developer

Megan head and shoulders, with long brown hair and a dark shirt

Megan James

UX designer

Project Brief

In 2023, TWO MEN AND A TRUCK set out to modernize their online quote form. Their goals were clear: Remain competitive in a rapidly evolving digital landscape, improve ease of use for customers, address accumulated technical debt, and create a stronger foundation for future innovation. The redesign focused on three key initiatives:

  1. Overhaul inventory collection: Reimagine how customers add belongings to allow greater flexibility and accuracy.
  2. Improve UX and accessibility: Identify friction points and remove usability and accessibility barriers.
  3. Update technology: Evaluate and modernize the tech stack to improve performance, maintainability, and long-term scalability.

Overhaul inventory collection

TWO MEN AND A TRUCK had big dreams for changes to their inventory collection. Among them, adding image recognition to support customers taking photos of the belongings they needed to move and having them identified. But to pave the way to make that dream a reality, we needed to look at the inventory flow as a whole first. In doing so, we were able to make some major improvements, including the elimination of a linear loop for adding belongings one room at a time, or having a separate process for moves from storage units vs. businesses and homes.

Challenge

Inventory additions were restricted based on "normal" home layout

Solution

Replace room-based restrictions with weighted autocomplete

Previously, users selected a room (e.g., “Bedroom”) and were shown a predefined list of furniture associated with that room. While logical, this approach limited flexibility and prevented users from adding items outside predefined lists. We replaced this structure with a weighted autocomplete field with partial search matching and smart weighting to surface commonly selected items first. This allowed any item to be added to any room and created a far more flexible and intuitive inventory experience.

Challenge

Inventory process was too linear

Solution

Streamline item and box entry

The former process required users to select a room, choose item types and quantities, indicate box counts, and repeat the process for every room. This proved to be time consuming and tedious. In response, we consolidated item and box entry into a unified, streamlined workflow — eliminating unnecessary steps and significantly speeding up inventory entry.
Item List step on inventory form, with list of bedroom furniture and boxes included
Inventory add item form, in resting and activated states, searching for "king" with list of weighted results

Improve UX and accessibility

Over the years, best practices have changed and improved, and TWO MEN AND A TRUCK wanted their app to improve along with it.

Challenge

Difficult to review previously entered information

Solution

Replace wizard steps with progressive disclosure

The original wizard-style form forced users to move linearly through steps, which created friction. Users couldn’t easily review earlier responses, editing previous entries required stepping backward multiple times, and there was no holistic summary before submission. To address these issues, we transitioned to a progressive disclosure model, which displays summarized data for each section, allows direct navigation to any section for editing, improves clarity and control, and reduces cognitive load. This approach dramatically improved usability and transparency.

Challenge

Some accessibility features were outdated

Solution

Adopt Chakra UI

The original implementation relied heavily on custom-built React components. Since 2017, the React ecosystem has matured significantly. We migrated to Chakra UI, a modern component library known for strong accessibility foundations, customizability, and cleaner, more maintainable code. This shift allowed us to eliminate outdated practices and align with modern accessibility standards.
Third step of lead form open, with two previous steps completed and collapsed. Address and building type fields displayed and populated.
New progressive disclosure version of the lead form.

Update technology

Modernizing an existing application requires balance. Changing too much introduces risk; changing too little limits improvement. We evaluated the entire stack and made deliberate decisions on what to change and what to keep.

Typescript codebase

We migrated the entire codebase to TypeScript, introducing strict type definitions at every level. Because both the frontend and backend now use TypeScript, the application is fully type-safe — from database to API to React UI — significantly reducing runtime errors and improving developer confidence.

Modern React patterns

We modernized the React architecture, which reduced complexity and improved maintainability. The most significant improvements included converting class components to functional components with hooks, moving from a custom Redux setup to Redux Toolkit, and simplifying form logic using React Hook Form.

Expanded test coverage

To increase reliability, we implemented both functional testing and end-to-end testing. Our process now includes writing a test to reproduce any reported bug, followed by a test confirming its resolution. Having a mechanism for discovering bugs before they're shipped has meaningfully increased confidence in future releases.

Results

This upgrade resulted in faster and more intuitive inventory entry, improved accessibility compliance, reduced technical debt, stronger architectural foundation for future innovation (including image recognition integration), and improved internal developer velocity and confidence.