Custom Furniture Configurator Rebuild

The Challenge

Timberline Home Co. sold custom furniture direct to consumer, offering over 200 fabric and finish combinations across their product line. The product configurator was the core of the buying experience, and it was failing badly.

Only 11% of users who started configuring a piece actually completed a purchase. Average order value sat around $1,800 on items that could easily reach $3,500+ when fully customized. The configurator was built as a single-page jQuery application with no semantic structure, no keyboard support, and a mobile experience that made selecting options nearly impossible.

Multiple customers with disabilities had complained that the tool was completely unusable. The customer service team fielded 300+ calls per month from people who gave up on the website and wanted to order over the phone. Every phone order cost roughly $45 in labor, and they were losing far more customers who simply left without calling.

Our Approach

Phase 1: Audit and Discovery (Weeks 1-1.5)

A full accessibility scan identified 96 WCAG 2.2 AA violations across the configurator and checkout flow. The UX audit mapped the complete customization journey and identified where users dropped off, what caused confusion, and why mobile was essentially broken.

The biggest finding: the configurator loaded every fabric swatch image on page load regardless of whether the user had selected that category. With 200+ options, the browser downloaded over 40MB of images upfront. Load time was 8.2 seconds on a decent connection. On mobile data, the page was essentially unusable.

Phase 2: Redesign and Implementation (Weeks 2-5)

Stepped Configuration Flow

The configurator was rebuilt in React with a stepped flow that broke customization into logical phases: frame style, dimensions, fabric category, specific fabric, finish, and add-ons. Each step only loaded the assets relevant to that selection, and swatch images were lazy loaded with low-res placeholders that swapped in the full resolution image on interaction.

This alone cut load time by over 75%, from 8.2 seconds to 1.9 seconds.

Accessible Swatch Selection

The fabric and finish selection was the trickiest accessibility challenge. The original implementation used a grid of clickable div elements with background images and no text labels. A screen reader user encountered nothing but empty clickable elements.

Each swatch was rebuilt as a radio button within a fieldset, with visually hidden but descriptive labels ("Navy Blue Performance Velvet," "Walnut Matte Finish"). A live region announced the current configuration summary whenever a selection changed. Sighted users got the same clean visual grid, but the underlying semantics were now fully accessible.

Real-Time Price Announcements

The original price calculator updated a span element with no announcement. Screen reader users had no idea the price was changing as they made selections. An aria-live polite region was implemented that announced price changes contextually: "Updated total: $2,450. Added $200 for premium fabric upgrade." Every user got clear feedback on how their choices affected the final price.

Mobile-First Rebuild

The original swatch grid displayed at the same size regardless of viewport. On a phone, users were trying to tap 24px color squares crammed together with no spacing. The mobile layout was redesigned with a horizontally scrollable strip, 48px minimum touch targets, clear selected states, and haptic-style visual feedback on tap. The stepped flow worked naturally on mobile since each phase was already its own focused view.

Results

• Configurator completion rate increased from 11% to 38% within the first 45 days after launch
• Average order value climbed 27%, from $1,800 to $2,286, driven by better presentation of upgrade options and add-ons
• Customer service calls dropped from 300+ per month to under 80, saving an estimated $9,900 per month in labor costs
• Mobile conversions increased by 143% after the mobile-first responsive rebuild
• 100% WCAG 2.2 AA compliance across the entire configurator and checkout flow, resolving 96 violations
• Page load time dropped from 8.2 seconds to 1.9 seconds after eliminating render-blocking scripts and lazy loading swatch imagery

Key Takeaway

The configurator was the most important page on the entire site and it was the weakest link. Customers wanted to buy. The tool would not let them. Fixing the accessibility, the performance, and the mobile experience were not three separate projects. They were all the same project: making the product actually purchasable by the people trying to purchase it.

"Our configurator was the most important page on our entire site and it was our weakest link. Modern Softworks completely rebuilt how customers interact with our products online. We're seeing customers confidently customize higher-end pieces now because the experience actually guides them through it instead of overwhelming them. Our phones stopped ringing constantly and our revenue per visitor went up significantly. We should have done this years ago."

Megan Ashford, VP of Digital, Timberline Home Co.