Engineering Intuition: Translating Aesthetic Style into Relational Data Queries
A $200M+ building products manufacturer had to map subjective style to a rigid database of over 10,000 product variations. Vague terms like Craftsman, Southwest, or Modern had to resolve against glass textures, caming colors, and privacy ratings. Between a homeowner's inspiration and the manufacturer's SKU list sat a chasm of technical jargon.
Executive Summary
Context
The same manufacturer whose Oracle PIM feeds regional HubDB catalogs needed the front half of the experience. That meant a guided selling engine: users self-identify their needs through a logic-driven quiz and a filtered Inspiration Gallery. The correct SKU configurations then surface from the HubDB backend, driven by code.
What We Built
A multi-step conditional product quiz and a faceted navigation system for the Inspiration Gallery. HubDB attribute mapping links the aesthetic labels to technical field values.
Tech Stack
- HubSpot CMS Enterprise, HubDB, Custom JavaScript
Not a fit when the product line is small enough for a simple static list, or when buyers already possess deep SKU-level knowledge.
The Challenge
The website organized products around internal SKU logic rather than customer mental models, which gatekept the manufacturer's own products. A user who wanted a private, modern front door had to work through dozens of technical filters, U-factor, Low-E glass, caming type, before finding a match. That friction produced high bounce rates and choice paralysis. The selling model had to move from a component view, door slab plus doorglass, to a unified solution view that put the final look and feel ahead of individual part numbers.
Our Approach
The build began with relational mapping, because the quiz had to work as a translation layer. Divided-light styles forced a real choice. Rather than making users pick between simulated divided lights, grilles between glass, or external grilles, we grouped all three into a single customer-facing Divided Lights filter. Behind it, the system queries the HubDB product subfamily and divided-light style columns simultaneously. The quiz applies logic gates the same way. Selecting a Southwest or Mediterranean style immediately filters to the specific glass families that carry that aesthetic, so the user never sees an irrelevant product.
Impact
Twenty Style Categories, Mapped to Objective Fields
Over 20 subjective style categories map to objective HubDB field values. Aesthetic language like Modern or Old World now resolves to queryable technical attributes instead of marketing copy.
A SKU Recommendation in Under Four Clicks
The product quiz takes a user from intent to a specific SKU recommendation in under four clicks. The old catalog required dozens of technical filters.
Three Product Lines, One Selling Experience
Quiz Results That Update With the Catalog
Results query HubDB live. A new SKU added to a product family in the database automatically becomes a potential quiz result, and no developer touches the form logic.
Aesthetic labels live as multi-select tags in the HubDB glass design style column. A single product line can be tagged as both Modern and European. It then surfaces in both filtered views without duplicating rows.
A master mapping document normalized customer-facing glass design styles against internal glass family names before any UI was built. That made the quiz a query problem instead of a content problem.
Custom JavaScript intercepts user selections in the quiz and gallery. It converts them into a query string against the HubDB API, targeting the glass design style and privacy rating columns directly.
Clicking Get the Look on an inspiration image passes a pre-filtered URL parameter to the main doorglass index. The user lands on a page showing only the technical configurations of the products they just saw in the photo.
FAQ
Multi-select tags in the HubDB glass design style column let a single product line carry multiple aesthetic labels. One database row then surfaces in every relevant filtered view.
