Tools Used:
Figma, HTML, CSS, Javascript, Photoshop
Core Objectives
- Eliminate Friction in Dynamic Selection: Provide clear, tactile UI controls for multi-dimensional product variations (color, size, material, format/bundle).
- Maintain Visual-Context Alignment: Dynamically update product gallery images, badges, and copy in real-time based on selected options.
- Maximize Cart Value: Seamlessly surface alternate formats (e.g., Single Item vs. 3-Pack Subscription) with clear value indicators.
Key Features & Design Solutions
1. Visual Attribute Pickers (Color, Material, Finish)
- Color & Material Swatches: Replaced plain dropdowns with interactive, accessible visual swatches featuring hover previews and selected-state indicator rings.
- Availability Micro-states: Integrated subtle crossed-out overlays for out-of-stock variations, accompanied by an instant “Notify Me” inline modal trigger upon click.
2. Format & Bundle Selector Cards
- Segmented Toggle / Radio Cards: Formats (e.g., “Standard Pack”, “Value 3-Pack”, “Auto-Refill Subscription”) are displayed as structured cards highlighting savings badges (e.g., Save 15%).
- Dynamic Value Messaging: Selecting a bundle automatically updates the hero banner below the price to display unit-level breakdowns (e.g., $12.00 / unit instead of $18.00).
3. Synchronized Media Gallery
- Context-Aware Visual Updates: Changing a swatch dynamically transitions the hero carousel to show the exact color variant in real-world lifestyle contexts, complete with zoom capabilities.
- Variant-Specific Content Callouts: Selecting a specific material (e.g., “Matte Leather”) swaps out a sub-feature highlight section below the fold to display care instructions tailored to that exact material.
