Puma Audit

Observed Behavior: On the Sale PLP, several products show a discount badge (e.g., “40% OFF”) that does not match the actual difference between the strikethrough price and the sale price. A shoe listed at $90 marked down to $63 shows “40% OFF” (correct is 30%).

Technical Root Cause: The discount percentage is calculated from the original MSRP stored in the product catalog, not from the most recent pre-sale price. When a product was previously discounted (e.g., from $110 to $90) and then further marked down, the badge uses the $110 baseline.

Business Impact: Overstated discounts violate FTC pricing guidelines and expose Puma to regulatory risk. Customers who notice the math discrepancy lose trust in the pricing, and this is frequently called out in consumer review sites.

Remediation Path: Calculate discount percentage from the displayed strikethrough price, not the original MSRP. Add a data validation step in the PIM pipeline that flags products where the badge percentage deviates from the actual price delta by more than 1%.

Observed Behavior: On the RS-X PDP, sizes 9 and 10 appear grayed out (suggesting “out of stock”), but selecting them anyway successfully adds the item to cart. The sizes are available for purchase despite the visual indication.

Technical Root Cause: The availability API returns stock levels per warehouse. The frontend component marks a size as unavailable if the primary warehouse has zero stock, without checking secondary or drop-ship warehouse availability.

Business Impact: Users skip available sizes, believing them sold out. For popular sizes (9-11), this directly suppresses conversion on the highest-demand SKUs.

Remediation Path: Aggregate inventory across all fulfillment sources before determining availability state. A size should only be grayed out when total allocatable inventory across all warehouses is zero.

Observed Behavior: On mobile, scrolling down the page triggers the sticky header to shrink. During the animation, the hamburger menu icon overlaps the search bar icon for approximately 400ms. Tapping during this overlap triggers both the menu and the search panel simultaneously.

Technical Root Cause: The sticky header transition uses CSS transform for the shrink animation, but the hit areas of the hamburger and search icons are not adjusted during the transition. Their position: absolute placements collide in the intermediate state.

Business Impact: Users accidentally open both panels, which stack on top of each other and require two dismiss actions to close. This is a minor but recurring frustration that adds up across sessions.

Remediation Path: Add pointer-events: none to both icons during the header transition (approximately 400ms). Alternatively, stagger the icon repositioning to prevent overlap at any point in the animation.

Observed Behavior: On an out-of-stock PDP, entering an email in the “Notify Me When Available” field and tapping submit shows a brief spinner, then returns to the empty form. No success or error message is displayed.

Technical Root Cause: The notification subscription API returns a 200 OK with a JSON body, but the frontend component only checks for the presence of a toast notification component — which is not mounted in the PDP template. The success handler fires but the UI feedback is swallowed.

Business Impact: Users who want to be notified don’t know if their submission worked. They may repeatedly submit, or worse, leave and never return because they assume the feature is broken.

Remediation Path: Add a success confirmation inline: “You’ll be emailed when this item is back in stock at [email].” Mount the toast notification component in the PDP template, or use inline feedback instead of relying on a global toast.

Observed Behavior: Activating the “Sale” filter on the Men’s Shoes PLP returns a mix of genuinely discounted items and full-price items that have a Puma Member price. The visual treatment is identical — both show strikethrough pricing — making it impossible to distinguish actual sales from member-exclusive pricing.

Technical Root Cause: The “Sale” filter queries products with compare_at_price > price, which includes both true markdowns and member-price products. The PLP tile component uses the same strikethrough pattern for both scenarios.

Business Impact: Non-members see “sale” products that revert to full price at checkout (because the member price doesn’t apply). This creates a bait-and-switch experience that damages trust and drives cart abandonment at the pricing mismatch moment.

Remediation Path: Separate “On Sale” products (true markdowns available to all) from “Member Price” products. Use distinct visual badges: “SALE” in red for true markdowns, “MEMBER PRICE” in a different color for loyalty pricing. Filter options should be separate.

Observed Behavior: On mobile PDPs, the product image carousel shows one image at a time with swipe navigation. There are no dots, counts, or thumbnails indicating how many images exist. Users may see only the hero image and never discover the detail, back, and on-model views.

Technical Root Cause: The mobile carousel component was ported from a template library that uses dot indicators, but the dots were removed during Puma’s design customization for aesthetic reasons.

Business Impact: Users who only see one product image have less confidence in the product and are less likely to convert. Multi-angle views are proven to increase conversion by 10-15% in footwear e-commerce.

Remediation Path: Add a small “1/6” counter in the bottom-right corner of the image carousel. Alternatively, restore dot indicators or show a peek of the next image at the edge of the viewport to signal swipeability.

Observed Behavior: Tapping “Size Guide” on the PDP opens the size chart in a new browser tab, navigating to a standalone HTML page. The user loses context of the product they were viewing.

Technical Root Cause: The size guide is a static HTML page hosted separately from the PDP application. It is linked with target="_blank" rather than loaded in-context.

Business Impact: The context switch increases time-to-purchase. Users must remember their intended size, switch back to the product tab, and re-find the size selector. On mobile, tab switching is especially friction-heavy.

Remediation Path: Load the size guide content in a modal or bottom sheet on the PDP. Fetch the size chart data via API and render it inline. Keep the user on the PDP at all times.

Observed Behavior: On mobile checkout, there is no progress bar or step indicator showing where the user is in the checkout flow (shipping → payment → review). Users cannot tell how many steps remain.

Technical Root Cause: The desktop checkout includes a horizontal stepper component, but it was excluded from the mobile layout due to limited horizontal space.

Business Impact: Users who don’t know how many steps remain experience anxiety and are more likely to abandon. “How long will this take?” is a subconscious friction factor in checkout completion.

Remediation Path: Add a compact progress indicator for mobile — either a minimal “Step 1 of 3” text label or a thin progress bar at the top of the viewport. This takes minimal space and provides clear orientation.

Observed Behavior: The checkout page displays a large, empty “Promo Code” input field with a prominent “Apply” button. Users who don’t have a code leave the checkout to search Google for “Puma promo code,” and a significant percentage never return.

Technical Root Cause: The promo code field was designed as a first-class form element with high visual prominence. It is not collapsed or de-emphasized in any way.

Business Impact: The visible empty promo field is the #1 driver of checkout-stage abandonment in discount-driven e-commerce. Users feel they are overpaying if they don’t have a code, creating anxiety and exit behavior.

Remediation Path: Collapse the promo code field behind a “Have a promo code?” text link. Only expand the input when the user explicitly clicks. This is the industry-standard pattern used by ASOS, Zara, and H&M.

Observed Behavior: Puma offers free shipping on orders over $75, but this information is only visible on the cart page after items are added. There is no mention of the threshold on PLPs, PDPs, or the site header.

Technical Root Cause: The free shipping messaging is hardcoded in the cart summary component. No global banner or per-product “Free shipping on orders $75+” badge exists.

Business Impact: The free shipping threshold is a powerful AOV driver. Users who are unaware of it add a single $65 item and pay for shipping, when a small upsell would have pushed them over the threshold — benefiting both the user and revenue.

Remediation Path: Add a persistent site-wide banner: “Free Shipping on Orders $75+.” On the cart page, if the subtotal is within $15 of the threshold, show a “You’re $X away from free shipping!” message with a link to a “Under $20” collection for easy add-ons.

Observed Behavior: Limited-edition collaboration pages (e.g., Puma x Lamelo Ball MB.04) display the same product tile format as regular catalog items. There is no countdown timer, no stock indicator, and no “limited release” badge.

Technical Root Cause: Collaboration products use the same PDP template as standard catalog items. There is no CMS differentiation or template variant for limited releases.

Business Impact: Limited releases depend on urgency-driven conversion. Without scarcity signals, these high-margin collaboration products are treated by users as always-available catalog items, and they defer purchase — often until the product is sold out.

Remediation Path: Create a “Limited Release” PDP template variant with a countdown timer to end-of-sale, a stock-level indicator (“Limited Stock”), and a distinct visual treatment (e.g., collaboration co-branded header). Flag products as is_limited_release in the PIM.

Observed Behavior: After guest checkout, the order confirmation page asks “Create an account to track your order” with a password field. There is no incentive offered — no discount on next purchase, no points, no mention of member pricing benefits.

Technical Root Cause: The post-checkout account creation prompt is a standard template with no dynamic content injection from the loyalty or marketing systems.

Business Impact: Post-purchase account creation is a high-leverage moment because the user has already committed. Without an incentive, the conversion rate for this prompt is low, and Puma misses the opportunity to capture repeat-purchase intent.

Remediation Path: Offer a tangible incentive: “Create an account and get 10% off your next order” or “Join Puma to unlock Member Prices on your next purchase.” Dynamically show the savings they would have gotten on the current order as a member.

Observed Behavior: No PDP on puma.com includes Product JSON-LD schema. Google Search results for Puma products show plain blue links without price, availability, or rating information.

Technical Root Cause: Structured data was never implemented in the current PDP template. The previous platform version included schema, but it was not ported during the re-platform.

Business Impact: Competitors whose PDPs show rich snippets (price, rating, availability) capture significantly higher CTR from the same SERP position. Puma is competing with one hand tied behind its back on every product query.

Remediation Path: Implement Product JSON-LD on all PDPs with name, image, description, sku, brand, offers (including price, priceCurrency, availability), and AggregateRating. Validate with Google’s Rich Results Test before deploying. This is the single highest-ROI SEO fix.

Observed Behavior: PDPs on us.puma.com include <link rel="canonical" href="https://puma.com/..."> pointing to the global domain. The global domain redirects US visitors back to us.puma.com, creating a redirect-canonical loop.

Technical Root Cause: The canonical tag is generated from a base URL configuration that was set to puma.com globally and not overridden per-region deployment.

Business Impact: Google cannot determine the authoritative URL for US product pages. This causes ranking instability and can result in the wrong regional version appearing in US search results.

Remediation Path: Set the canonical base URL per regional deployment. us.puma.com pages should canonicalize to https://us.puma.com/.... Implement hreflang tags across all regional storefronts to clarify the relationship.

Observed Behavior: Multiple PLPs use generic <title> tags like “Men’s Shoes | PUMA” and “Shoes for Men | PUMA” — which are near-duplicates. Sub-categories like “Men’s Running Shoes” also use “Men’s Shoes | PUMA” instead of a specific title.

Technical Root Cause: The PLP template generates titles from the top-level category name only. Sub-categories inherit the parent category’s title because the title-generation logic does not traverse the full category breadcrumb.

Business Impact: Duplicate titles cause Google to choose which page to rank for “puma men’s shoes,” splitting ranking authority. Sub-category pages for high-intent queries like “puma men’s running shoes” are under-optimized.

Remediation Path: Generate unique <title> tags using the full category path: “Men’s Running Shoes | PUMA” for the running sub-category. Add a <meta name="description"> that includes the product count and key attributes. Audit all PLP titles for uniqueness.

Observed Behavior: Product images on PLPs load without width and height attributes. As images load progressively, the grid layout shifts — product tiles jump downward, and the CLS score on mobile PLPs averages 0.38 (well above the 0.1 “good” threshold).

Technical Root Cause: The image CDN serves images via a <img src="..."> tag with only src and alt. The original platform passed width and height from the PIM, but the CDN proxy layer strips these attributes during URL rewriting.

Business Impact: CLS above 0.25 negatively impacts Core Web Vitals and Google ranking. Users experience jarring layout shifts that make browsing feel unstable, especially on slower connections where images load progressively.

Remediation Path: Add width and height attributes to all <img> tags based on the known aspect ratio of product imagery (standard: 1000x1000). Alternatively, use CSS aspect-ratio: 1 / 1 on the image container. Set loading="lazy" on below-the-fold images.