Case Study · SaaS Application

Product Configurator

Role

Lead UX Designer

Year

2025

Tools

AI-Augmented

Copilot · Claude · Figma AI

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.

Problem statement

Products were configured using third-party tools that had limited interoperability with other systems within the customer environment.

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.

Challenges

As a SaaS platform designed to support multiple brands and their customers,

Limited product knowledge posed a challenge, as the configuration-based application required a deeper understanding beyond individual products and their relationships within the broader system.
Designing within the constraints of the supported framework while ensuring alignment with brand guidelines and accessibility standards posed a key technical challenge.

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, keeping the discovery outputs clean and stakeholder-ready with a little additional formatting.

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 before moving into design.

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

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.

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 and header links hidden during configuration, maximising screen real estate and minimising cognitive distraction.

Ease of Access

All configuration groups listed on the left panel. As the user scrolls, the corresponding section header anchors to the top of the main content.

Reduced Motor Load

Single continuous scroll allows users to progress through all configuration groups without navigating between tabs or clicking next/back.

Supportive Information

Contextual help text available via info icon on hover for each characteristic. Pricing displayed alongside each option where applicable.

Action of Trust

Persistent product image in the summary panel allows users to visually confirm their configuration against the corresponding product at any point.

Reduced Time to Order

All required configuration steps on a single page enables users to complete and submit their configuration with minimal friction.

Product Listing & Detail Page

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

Configuration Page

On clicking "Configure", users land on the configurator with full-width real estate and a clean, focused layout. Once users completed configuring a product and selected “Add to Cart,” the configured item gets added as a variant of the original product.

Outcomes

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?