Size Guide Checker Mechanism

What is the Size Guide Checker?

The Size Guide Checker is a feature that suggests recommended sizes by referencing size chart data when users enter their height and chest (or waist) measurements.

It alleviates pre-purchase anxiety of "I don't know what size fits me" and supports size selection.

Challenges to Solve

• Users can't tell which size fits them even when looking at size chart numbers
• The relationship between notations like "Euro 50" or "M" and their body type is unclear
• Customers give up on purchases due to size selection uncertainty

Automatic Input Field Switching

Input fields automatically switch based on the size chart content.

Recommended Size Calculation Logic

1. Table Data Parsing

Extracts range data for each size from the size chart HTML table.

Data Structure After Conversion:

// Height range data
heightRanges = [
  { min: 160, max: 165, size: "S" },
  { min: 165, max: 172, size: "M" },
  { min: 172, max: 180, size: "L" },
  { min: 180, max: 188, size: "XL" },
  // ...
]

// Chest range data
chestRanges = [
  { min: 84, max: 92, size: "S" },
  { min: 92, max: 100, size: "M" },
  { min: 100, max: 108, size: "L" },
  { min: 108, max: 116, size: "XL" },
  // ...
]

2. Size Determination Algorithm

Calculates recommended size based on user input values.

3. Boundary Value Handling

When input values fall on size boundaries (e.g., height 172cm applies to both M and L), both sizes are kept as candidates and the final decision is made in combination with chest measurement.

Results are displayed with hyphen connection like "M-L", presenting options to the user.

Recommendation Display

Calculation results display not just the size but also the reasoning.

Display Example:

Recommended Size: L

• Height 175cm → L
• Chest 96cm → M-L
• Based on chest measurement, we recommend L

UI Design

Consider placing the Size Guide Checker within the size chart panel.

Interaction Flow

Implementation Points

State Management

const [height, setHeight] = useState<number | null>(null);
const [chest, setChest] = useState<number | null>(null);
const [recommendation, setRecommendation] = useState<Recommendation | null>(null);

const handleCalculate = () => {
  if (height && chest) {
    const result = calculateRecommendedSize(height, chest, tableHtml);
    setRecommendation(result);
  }
};

Calculation Function

const calculateRecommendedSize = (height: number, chest: number, tableHtml: string) => {
  const heightRanges = parseHeightRanges(tableHtml);
  const chestRanges = parseChestRanges(tableHtml);

  const heightMatch = heightRanges.find(r => height >= r.min && height <= r.max);
  const chestMatch = chestRanges.find(r => chest >= r.min && chest <= r.max);

  // Calculate size index difference to determine recommendation
  // ...
};

Future Enhancement Ideas

• Purchase History Integration: Auto-fill sizes from past purchases
• Size Comparison: Conversion from "M size of a brand you usually wear"
• Body Type Selection: Adjustments for "standard", "athletic", "slim" body types

Summary

The Size Guide Checker calculates recommended sizes using size chart data. By considering both height and chest (or waist) measurements and displaying results with clear messages, it supports users in their size selection.