Case Study

Context and problem

The beauty marketplace is preparing to launch a Product Detail Page (PDP) for a women's perfume. The goal is to maximize conversion by encouraging shoppers to add the product to their cart or initiate checkout via a "Buy Now" action. Since the reference site provided in the assignment was not accessible, Nykaa, Tira, and Myntra's beauty PDPs were examined to understand common patterns. Typical perfume PDPs feature a strong hero image, clear price and discount information, ratings & reviews, trust badges (e.g., cruelty-free, best seller), a compelling description, variant or size selection, and clear calls to action (CTA). Social sharing badges and recommendations often appear below the fold.

PDP-Wireframe ( Includes web, app and small view )

UX Objective

• Reduce decision friction and convert high-intent visitors by pairing trust signals (badges, reviews, authenticity) with affordability framing (EMI-first pricing), fast paths to purchase (Express Checkout, one-click reorder), and AOV lifts (bundles, frequently-bought-together).

Figma link shared in the next section

Here’s a detailed breakdown of the new PDP features:

1. Default PDP for signed-in/guest user

1. Enhancements: To improve the AOV and loyalty

1. Offer detail and the Product information Card section: To build trust, and gain customer attention to continue with the purhcase

1. Delivery and Serviceability

5.Customer reviews and highlights

Small view: Mobile site feature breakdown

Detailed Feature list in the figma shared below:

Figma:

https://www.figma.com/design/9ZSkFuy6QRqrTezvxC2OUa/SSBeauty_PDP?node-id=0-1&t=iyKFPOKe6VJQkfze-1

What the PDP optimizes for:

• First-fold conviction: social proof, quality badges, savings anchor, delivery promise.
• Speed to purchase: sticky CTAs, Express Checkout, pincode-aware ETA, one-click reorder.
• Order value: auto-selected bundle recommendations, “frequently brought together,” compare-and-choose.
• Trust and safety: dermatologist/cruelty-free labels, verified authentic, easy returns, ingredient transparency.
• Mobile clarity: condensed header, accordion info, fixed bottom action bar.

Key user goals covered

• Decide confidently (is this right for me, is it safe/quality, when will it arrive?).
• Pay comfortably (EMI breakdown, savings visibility).
• Buy fast (Express Checkout / reorder) or keep browsing (Add to Cart).
• Discover complements and alternatives without leaving PDP.

Tools used: Figma was used conceptually to draft the wireframes; Miro for feature breakdown explanation

Product vision & OKR

Objective (O) –Ship a modern PDP that improves purchase confidence, speeds high-intent checkouts, and lifts order value.

Key Results (KR)

Sprint planning

Epics

1. Setting up the foundation & infrastructure – Core UI/UX elements, set up backend services, product APIs, and baseline PDP template.
2. Conversion & engagement features – Additional UI/UX elements ,CTAs, trust badges, offers, and analytics instrumentation, spill-over from epic 1
3. Monetisation & optimisation – implement recommendations, social sharing, variant selection, performance improvements, and bug fixes.

Sprint plan

Note: Cross-Epic Dependencies*:* Analytics instrumentation in Epic 1 (page load, interaction, impression events) powers funnel analysis for features in Epic 2 (checkout optimisations) and Epic 3 (personalised nudges, trust signals). Any delay in Epic 1’s analytics backend work would directly impact the measurement of Epic 2 and Epic 3 features. Similarly, product catalogue APIs from Epic 1 are reused in Epic 2 for availability checks and in Epic 3 for dynamic recommendations.

User Story 1 — Size/Variant Selector with Real-time Availability & Delivery Promise

As a shopper browsing the perfume PDP

I want to easily select the desired size/variant and instantly see price, stock status, and delivery promise

so that I can make a confident purchase decision without unnecessary navigation or page reloads.

Acceptance criteria

• Size/variant selector displays all available SKUs (e.g., 50ml, 100ml) with clear labels and active/inactive states based on stock.
• On selection:
  • Price and discount update instantly.
  • Delivery ETA refreshes based on selected variant and pincode.
  • Trust badges update (e.g., "Best Seller" if relevant to variant).
• If a variant is out-of-stock:
  • Variant tile is disabled with “OOS” label.
  • Option to “Notify Me” opens a subscription flow.
• Selector is touch-friendly on mobile (swipe or tap).
• For logged-in users, last-purchased size is pre-highlighted when available.
• No full-page reload; updates happen via API call for speed (<300ms).

Analytics & events

• variant_selector event with fields: sku_id, variant_name, price, discount, in_stock, eta.
• notify_me event when user opts for OOS notification.
• delivery_eta event on ETA display change.

Dependencies / notes

• Product catalog service with real-time inventory.
• Pincode SLA service for ETA.
• Trust badge service for SKU-specific badges.
• Notification service integration for OOS alerts.

User Story 2 — Express Checkout and One-click Reorder

As a returning customer who has bought this fragrance before

I want a fast path to repurchase—Express Checkout that auto-selects my last used address and payment, and a One-click Reorder control—

so that I can complete the purchase in seconds without re-entering details.

Acceptance criteria

• “Express Checkout — Buy Now” completes purchase in ≤ 3 steps when user has saved address and payment; shows confirmation of address, delivery ETA, and total.
• “One-click Reorder (Previously purchased)” appears when user has order history for the SKU; tapping confirms size, quantity, and applies last-used payment method.
• Pincode-aware delivery promise visible before confirmation; if SLA not met, shows next-best ETA with clear message.
• If item or size is OOS, control downgrades to “Notify Me” or suggests nearest in-stock size.
• Coupons/loyalty points and COD availability respect user’s profile and pincode.
• Post-purchase, option to add bundle complements (e.g., body lotion) in a single tap on the success screen.

Analytics & events

• begin_checkout with checkout_type=express or reorder, autoloaded_fields[address, payment]=true/false, delivery_eta, cod_available.
• purchase with applied_coupons[], loyalty_points_used, fulfillment_speed.
• interaction on buy now click for one-click reorder usage tracking.

Dependencies / notes

• Saved addresses and payment tokens, reorder eligibility service, pincode SLA, inventory service.
• Graceful fallback to full checkout if any required data is missing.

Product metrics

Tools & documentation

AI for research: Chatgpt, Gemini

Wireframe: Figma

Documentation: Miro

PPT:

pdp.pptx