Product Configurator

Overview

Product Configurator

A SaaS module enabling users to configure variant products across any e-commerce platform or internal application, eliminating third-party dependency and delivering a vastly improved configuration experience.

Outcome

↑ 86%

Increase in cost efficiency

↑ 22%

Improvement in system performance

↓ 27%

Reduction in configuration time

↑

Overall efficiency & user satisfaction

Objective

Objectives

Two core objectives: identify and document limitations of the existing third-party tool, and build an efficient proprietary configurator deployable as a SaaS module across any e-commerce or enterprise platform.

Discovery

Understanding the Existing Tool

I engaged an SME to guide me through the tool's mechanics and terminology. Over ~7 days of hands-on practice, I developed sufficient proficiency to configure products independently and experienced firsthand how cumbersome the tool was for daily users. This direct exposure enabled authentic empathy with users and identification of friction across the entire configuration workflow.

✦

AI in this phase — Copilot & Claude: Used Microsoft Copilot and Claude to capture and structure session notes from the SME walkthroughs, identifying recurring friction patterns and translating them into documented pain points. Figma AI was used to rapidly document and annotate early flow diagrams.

Research

Stakeholder Envisioning

Structured open questions were used to identify potential users, extended scope, all possible entry points, impact areas in the existing flow, and market competitors.

✦

AI in this phase — Copilot & Claude: Claude was used to synthesise stakeholder session notes into structured themes, surface contradictions across responses, and generate a consolidated insight summary — reducing analysis time and keeping the team aligned on priorities.

Persona

Having already led the BH e-Commerce portal, I was familiar with the user group, enabling a faster, more targeted interview cycle.

Key Insights

Improve overall usability and system performance

Provide visual clarity and intuitive ease of navigation

Implement proactive help text to prevent errors before they occur

Flow

High-Level Flow

Key design challenges: Users had a fixed mental model around the existing tool's layout — a significantly different interface risked disrupting productivity, and unselected configuration fields needed clear contextual communication.

Design

Visual Design

⬡

AI in this phase — Figma AI: Figma AI's auto-layout and component suggestions were used throughout the visual design phase, keeping the component structure consistent with the BH Design System and reducing manual annotation work on the configurator's complex interaction states.

Design Rationale

Reduced Visual Load — Main navigation hidden during configuration, maximising screen real estate

Ease of Access — All configuration groups listed on the left panel with anchor scrolling

Reduced Motor Load — Single continuous scroll through all configuration groups

Supportive Information — Contextual help text and pricing displayed alongside each option

Action of Trust — Persistent product image in summary panel allows visual confirmation

Reduced Time to Order — All required configuration steps on a single page

Product Listing & Detail Page

For configurable products, pricing is only available after configuration. A clear CTA on the PDP triggers the configurator.

Configuration Page

On clicking "Configure", users land on the configurator with full-width real estate and a clean, focused layout.

Edit Configuration

For previously configured products, the edit option from the PDP returns users to the configuration page with prior selections pre-populated.

Let's build something meaningful together.

Open to discussing new opportunities, design challenges, and collaborations.

Get in Touch Back to Portfolio

Interested to know more?

Product Configurator