01 · Project Overview
Building a premium PDP experience for Durex's massager portfolio
This document is Troopod's formal response to the brief shared by the brand team. It covers our full scope of work, design approach, team structure, timelines, revision policy, and commercials for the revamp of 5 PDP pages.
Engagement at a glance
5
PDP Pages
1
Master Design Framework
4
Feedback Rounds
11–12
Weeks End-to-End
Products in scope
⚡Bullet
🌀Wild Wand
🐇Buzzy Rabbit
🔄Ride & Vibe Stroker
✨Slide & Ride
What we are building
Design
12 Design Hours / Page
Figma wireframes, visual design, component library, mobile-first responsive layouts, scroll animation planning, and full handoff-ready assets.
Development
35 Dev Hours / Page
Pixel-perfect Figma-to-code, GSAP scroll animations, cross-browser compatibility, Core Web Vitals optimisation, SEO semantic HTML, and QA cycles.
Master Framework
One Design System Across All 5
A unified Durex PDP design language: shared component architecture, spacing system, typography scale, and motion guidelines. Portfolio consistency built in.
Reference Standard
Bombae Hairplay Quality Bar
The same depth of product storytelling, scroll-driven feature reveals, and conversion-focused flow we delivered for mybombae.in/pages/hairplay-pro.
Why Troopod
We built the Hairplay Bombae page that served as your reference. We know exactly what it took: the parallax layer management, scroll-linked GSAP triggers, and PDP storytelling architecture. That isn't reference work to us; it is live production we shipped. We are not starting from scratch on the craft. We are applying it to Durex's portfolio.
02 · Understanding the Brief
The brief, and how we read it
We have gone through the brief carefully. Here is our interpretation of every dimension, so there are no surprises.
Brief objectives (our read)
01
Premium, feature-led PDP experience
Each page must feel like a brand editorial, not a standard e-commerce product page. Every feature should get dedicated real estate: its own section, its own visual moment, and clear benefit copy. The page should do the selling work the brand rep would do in person.
02
One master design system for the full portfolio
Rather than five independent pages, you want a unified design language. This means shared components (feature blocks, spec tables, testimonial patterns, CTAs) that adapt to each product's personality without requiring five separate design systems. We agree. This is the right approach for portfolio coherence and future scalability.
03
Four structured feedback rounds
Two rounds from the creative team and two from the brand team, all during the design phase before development begins. Each round has a clearly defined 3-business-day response window. Major changes must land within these rounds. Once design is signed off, no major rework will be entertained.
04
Parallel execution capability
You need to understand whether we can run pages simultaneously. Yes. We will run design and development on 2–3 pages in parallel, with a dedicated two-person build team. This is how we hit the overall timeline without compromising per-page quality.
05
Full working file handover
Upon completion, we will hand over all Figma source files (master framework + all 5 product files), all design assets (icons, illustrations, motion specs), and clean, documented front-end code. Everything your team needs to maintain and extend these pages independently.
06
Creative direction: reference quality, not reference copy
You were clear that the Bombae page was used for evaluation, not as a design template. We will develop a Durex-specific visual direction: premium, clinical confidence blended with boldness, appropriate for the massager category. Same storytelling depth and conversion architecture.
03 · Scope of Work
What we design and build
Simple and clean. We design it, we build it, we hand it over live.
Design
01
Master PDP Design Framework
One shared Figma design system covering components, layout, typography, and spacing. Used as the base across all 5 PDPs for portfolio consistency.
For reference only. Final framework direction will be confirmed after the kickoff discussion with the team.
02
High-Fidelity Figma Designs: 5 PDPs
Full desktop and mobile designs for each product. Feature-led storytelling, scroll and parallax animation planning, conversion flow, and dev-ready handoff. All 5 Figma files handed over at completion.
Development
03
Production-Ready Pages: 5 PDPs
Pixel-perfect builds from signed-off Figma designs. GSAP scroll animations, parallax, platform integration, cross-browser and mobile QA. Delivered to staging for review before go-live.
Not included
Copy, product imagery, photography, video, and brand guidelines. All content and assets to be supplied by the brand team.
04 · Master PDP Framework
One design system, five products
For reference only. This framework is indicative. The final direction will be confirmed after the kickoff discussion with the brand team.
Page section architecture (standard for each PDP)
Section 01
Product Hero
Full-width hero with product name, tagline, hero visual (supplied), and primary CTA. Sets the tone. Scroll indicator anchors user into the story below.
Section 02
Product Overview Strip
3–4 key differentiators as icon + headline chips. Gives the user a summary of what makes this product distinct before they scroll deeper.
Section 03–N
Feature Story Sections (one per key feature)
Each feature gets its own full scroll section: feature visual, benefit headline, supporting copy, specification callout, and a scroll-triggered parallax reveal. The Bombae page standard, adapted to Durex's visual identity and product content.
Section N+1
Product Education / How To Use
Step-by-step instructional section with illustrated or video-supported steps. Reduces hesitation for first-time buyers in this category.
Section N+2
Social Proof & Reviews
Curated testimonials, star rating aggregator, and review highlights. Positioned before the final CTA to resolve any remaining doubt.
Section N+3
Conversion Zone
Variant selector, quantity, add-to-cart, trust badges (discrete, discreet packaging, quality seals), and cross-sell / portfolio breadcrumbs. The closing argument of the page.
Persistent
Sticky Add-to-Cart Bar
Appears after the hero on scroll. Product thumbnail, name, price, and CTA always visible without interrupting the storytelling flow.
How the framework adapts per product
Shared across all 5
Component library · Spacing tokens · Typography scale · Motion guidelines · Sticky bar · Conversion zone structure · Social proof pattern
Customised per product
Hero visual & tagline · Feature count & content · Colour accent application · Section order (based on feature priority) · Product-specific education steps
05 · Deliverables
What you walk away with
📐
Figma Files: All 5 PDPs
Complete, dev-ready Figma designs for all 5 products. Desktop and mobile. Yours to keep and build on.
💻
5 Live PDPs
Fully built, QA tested, and deployed. GSAP animations, parallax, and platform integration included.
🗂️
HTML Files
Clean, well-commented HTML source files for all 5 PDPs handed over at project close.
🔗
Staging Links before Go-Live
Each page shared on staging for your review and sign-off before it goes live.
06 · Team & Resource Allocation
Who's working on this
🧠
Senior Product Consultant
Strategy & Direction
Overall project direction, stakeholder alignment, and quality oversight.
🎨
Designer
UI / UX
Master framework and all 5 PDP designs. Primary design contact.
⚙️
CTO
Tech Leadership
Architecture, GSAP animations, parallax, and platform integration.
💻
Developer
Frontend
Page builds, QA, and staging delivery.
How work flows
01
Kickoff & Asset Intake
Senior Product Consultant leads kickoff with the brand team. Brand assets, product specs, and Shopify access collected. Design brief locked.
02
Master Framework Design
Designer builds the master PDP component system. Shared for alignment before individual PDP design begins.
03
PDP Design: Sequential
Each PDP is designed one at a time, adapting the master framework to the product. Feedback rounds happen per page as designs are completed.
04
Development: Upto 2 Pages at a Time
Once designs are signed off, CTO and Developer build simultaneously, upto 2 pages in active development at all times. Pages don't wait on each other.
05
Staging, Review & Go-Live
Each page delivered to staging as it's completed. Reviewed, amended, and pushed live. Figma files handed over at project close.
Stakeholder interaction
From Troopod
Weekly status updates · Feedback submission links · Staging URLs at each milestone
From the Brand Team
Consolidated feedback within 3 business days per round · Asset delivery per agreed schedule
07 · Timeline & Milestones
Kickoff to delivery in 11–12 weeks
Design is sequential, one PDP at a time, with feedback from both teams running in parallel. Development runs upto 2 pages at a time. Design freezes at Week 6–7 before development begins.
Project milestones
Week 1
Kickoff & Discovery
Kickoff call with the brand team. Brand guidelines, product specs, and Shopify access confirmed. Feature prioritisation aligned per PDP.
Week 1–2
Master PDP Design Framework
HTML prototype built first to establish the page structure, scroll behaviour, and animation approach. Figma design system developed in parallel: components, typography, spacing, and motion guidelines.
Week 2–6
PDP Design: 1 Page at a Time + Ongoing Feedback
Designer works through each PDP sequentially: Bullet, Wild Wand, Buzzy Rabbit, Ride & Vibe Stroker, Slide & Ride. Roughly 1 week per page. The brand team reviews and gives feedback as pages are completed, running in parallel to the design process.
Week 6–7
Final Design Sign-off + 🔒 Design Freeze
All 5 PDPs reviewed and signed off by the brand team. Designs locked. No major rework entertained after this point. Development kicks off immediately.
Week 7–11
Development: Upto 2 Pages at a Time
CTO and Developer build upto 2 pages simultaneously. GSAP animations, parallax, platform integration across all 5 PDPs.
Week 11–12
QA & Go-Live
Cross-browser and mobile QA across all pages. Minor amends incorporated. Pages pushed live on sign-off. Figma files handed over at project close.
Timeline assumptions
Timeline assumes: 3 business days feedback turnaround per review round · All assets delivered on time · Shopify access confirmed at kickoff. Delays in any of these will shift timelines proportionally.
Estimated time per PDP
Each PDP is estimated at 2–3 weeks from design start to development-ready. This is indicative and will be confirmed once the engagement kicks off.
Review cycles & timeline impact
Yes, all four feedback rounds are accounted for within the 11–12 week timeline. However, any delays in review turnaround will directly delay the overall timeline. Each day of delayed feedback adds to the delivery date. Troopod will flag any slippage as soon as it occurs, but cannot absorb delays caused by late reviews on the brand team's side.
Note: The weeks above are indicative. Exact dates and a detailed project schedule will be shared once we align on an engagement start date.
08 · Revision Policy
Four rounds All in design Freeze after sign-off
Four feedback rounds are built into this engagement: two from the creative side and two from the brand side. All four happen during the design phase. Once design is signed off, major rework is off the table.
The design freeze rule
Non-negotiable
Design sign-off is the point of no return. All major changes (layout restructuring, section additions, visual direction changes, content strategy shifts) must happen before the design is approved. Once both teams have signed off on the Figma files and development begins, only minor amends (copy corrections, colour tweaks, CTA label changes) will be accommodated within scope. Any major rework post sign-off will be scoped and billed separately, and will impact the delivery timeline.
Review round structure
| Round | Stage | Reviewer | Scope | Included |
|---|---|---|---|---|
| Creative R1 | Master Framework + PDP Designs (all 5) | Brand Team (Creative) | Component library, design direction, layout, hierarchy, section sequencing, copy slots, motion approach | Included |
| Creative R2 | Revised PDP Designs (all 5) | Brand Team (Creative) | Revisions from Creative R1 reviewed and signed off. Final creative direction confirmed. | Included |
| Brand R1 | Full Design Review | Brand Team (Brand) | Brand compliance, tone, messaging, visual direction, category appropriateness | Included |
| Brand R2 | Final Design Sign-off | Brand Team (Brand) | Revisions from Brand R1 reviewed. Final approval before design is locked and development begins. | Included |
| Dev Review | Staging Review | Brand Team | Functional QA, animation behaviour, mobile experience, CTA links, copy accuracy. Minor amends only. | Included |
| Additional Rounds | Beyond the above | Any | Any feedback round beyond the five above. | Billed Separately |
What counts as a minor amend (in scope post sign-off)
✓ Copy text corrections within existing content slots
✓ Colour adjustments within the defined design system
✓ CTA label or link updates
✓ Animation easing or speed tweaks
✓ Mobile layout corrections identified in QA
✓ Spacing or padding refinements (not layout restructuring)
✓ Colour adjustments within the defined design system
✓ CTA label or link updates
✓ Animation easing or speed tweaks
✓ Mobile layout corrections identified in QA
✓ Spacing or padding refinements (not layout restructuring)
What counts as major rework (billed separately if post sign-off)
✗ Restructuring or reordering page sections
✗ Adding new sections not in the original signed-off design
✗ Changing the visual design direction or design system
✗ New platform integrations not scoped at kickoff
✗ Development of a sixth or additional PDP
✗ Adding new sections not in the original signed-off design
✗ Changing the visual design direction or design system
✗ New platform integrations not scoped at kickoff
✗ Development of a sixth or additional PDP
Feedback turnaround SLA
Each review round has a 3 business day feedback window from the day of submission. If feedback is not received within this window, Troopod will proceed to the next phase. A reminder will be sent at Day 2 of each window.
09 · Commercials
Transparent, all-in pricing
Two options depending on whether the brand team provides the Figma designs or Troopod handles end-to-end. No hidden line items.
Option A
Development Only
Brand provides all Figma designs for 5 PDPs
₹ 1,50,000
5 PDPs × ₹ 30,000
✓Framework component development (CSS/JS)
✓Pixel-perfect Figma-to-code for all 5 PDPs
✓GSAP scroll animations & parallax
✓Cross-browser & device QA
✓Platform integration
✓1 round of dev amends per page
✓Staging delivery + QA report
Option B
Design + Development
Full end-to-end delivery by Troopod
₹ 2,50,000
5 PDPs × ₹ 50,000
✓All of Option A, plus:
✓Master PDP Design Framework (Figma)
✓Full Figma design for all 5 PDPs (desktop + mobile)
✓Product storytelling architecture per page
✓Motion specification & animation planning
✓4 structured feedback rounds (2 Creative + 2 Brand)
✓Full Figma source file handover at completion
✓All exported design assets (SVG / WebP)
GST note
All prices above are exclusive of GST (18%). GST will be added to the final invoice as applicable.
Payment terms: Option A (Development Only)
Advance
Due before work begins
₹ 75,000
Post Delivery
Due upon final delivery & go-live
₹ 75,000
Payment terms: Option B (Design + Development)
Advance
Due before work begins
₹ 85,000
Design Handoff
Due upon final design sign-off
₹ 82,500
Post Delivery
Due upon final delivery & go-live
₹ 82,500
10 · Assets Required
What we need from your side
Troopod will handle design and development. These are the inputs we need from the brand team to get started and keep momentum.
Note: Asset requirements listed below are indicative. The final list of assets (images, videos, or both) will be shared once each PDP design is finalised. The brand team should be prepared to supply both formats as needed.
Required at kickoff (Week 1)
→
Brand Guidelines: Typography, colour palette, logo usage, tone of voice. Figma or PDF format preferred.
→
Product Specs per PDP: Full feature list, technical specifications, dimensions, and key differentiators for each of the 5 products.
→
Platform Access: Shopify collaborator access for integration and staging deployment.
→
Designated Reviewers: Named contacts from the brand team with availability for 3-business-day turnarounds on feedback rounds.
Required before design begins (by end of Week 1)
→
Product Imagery: Hero Shots. High-resolution product hero images for all 5 products. Minimum 3000px wide, PNG/TIFF preferred. On white and lifestyle variants if available.
→
Feature Visuals: Product close-ups or lifestyle imagery illustrating key features per product. These populate the Feature Story Sections.
→
Written Copy: All page copy: taglines, feature headlines, benefit descriptions, how-to-use steps, disclaimers. If copy is in progress, share what is available and indicate expected dates for remaining content.
→
Social Proof Content: Customer reviews / testimonials to be featured on the page. Star ratings, review text, reviewer first name.
Nice to have (not blocking)
→
Video Assets: Product demo videos or lifestyle clips. Will be integrated into the hero or education section where relevant.
→
Existing Analytics: Current PDP heatmaps or conversion data, if available. Informs section sequencing decisions.
→
Competitor / Inspiration References: Any additional pages the team likes (beyond the Bombae reference) for visual direction calibration.
11 · Next Steps
Let's get this moving
Once the engagement is confirmed, here is the sequence of actions to hit Week 1 of the timeline on schedule.
01
Confirm Option A or Option B
Development only, or full design + development. This determines the kickoff invoice amount and the design team assembly.
Brand Team
02
Sign SOW & Process Kickoff Payment
Formal sign-off on this document and transfer of advance. Work begins the next business day.
Brand Team
03
Schedule Kickoff Call
A 60-minute call with the brand team and Troopod. Agenda: brief alignment, feature prioritisation, asset delivery plan, Shopify access confirmation.
Both Teams
04
Deliver Initial Assets
Brand guidelines, platform access, and product specs for the first 3 products shared before or on Day 1 of the kickoff call.
Brand Team
06
Troopod Begins Master Framework
Within 2 business days of kickoff call, the Troopod design team begins the master PDP framework. Weekly check-ins start. We're off.
Troopod
Questions or additions
If any part of this document needs clarification, adjustment, or expansion, reach out directly. We are happy to get on a call before sign-off to walk through anything in detail.
Troopod contact: nj@troopod.io
Troopod contact: nj@troopod.io
12 · Terms & Conditions
Protecting both sides
These terms govern the engagement between Troopod and the brand team. By confirming this SOW, both parties agree to the following.
Payment & Cancellation
01
Advance is Non-Refundable
The advance payment is non-refundable once work has commenced. This covers discovery, framework setup, and design initiation costs incurred from Day 1.
02
Cancellation Mid-Project
If the project is cancelled after the advance is paid and work has begun, the brand team will be invoiced for all work completed up to the point of cancellation, calculated on a pro-rata basis against the total project value.
03
Late Payments
Troopod reserves the right to pause work if a milestone payment is overdue by more than 7 business days. Delivery timelines will be adjusted accordingly.
Scope & Changes
04
Change Requests
Any work outside the agreed scope (additional pages, new sections post sign-off, additional feedback rounds, or platform changes) will be scoped and quoted separately before execution. No out-of-scope work will begin without written confirmation.
05
Design Freeze
Once both parties have signed off on the final designs, no major structural or visual changes will be made without a formal change request and additional cost. Minor amends as defined in the Revision Policy are exempt.
Timelines & Delays
06
Client-Side Delays
Any delay caused by late asset delivery, delayed feedback, or unavailability of the brand team will extend the delivery timeline proportionally. Troopod will not be held responsible for missed deadlines caused by delays on the brand team's side.
07
Feedback Windows
Each review round carries a 3-business-day feedback window. If feedback is not received within this window, Troopod will proceed to the next phase. The missed review round will not be reinstated without a timeline extension.
Content & Assets
08
Client-Supplied Content
All copy, images, videos, and brand assets used in the pages are supplied by the brand team. Troopod takes no responsibility for the accuracy, legality, or compliance of client-supplied content.
09
Asset Readiness
Design and development timelines are contingent on assets being delivered in the required format and quality. Assets delivered late or in incorrect formats may cause delays for which Troopod cannot be held accountable.
Intellectual Property
10
Ownership on Full Payment
Full ownership of all design files, code, and assets created by Troopod for this project transfers to the brand team only upon receipt of the final milestone payment. Until then, all work remains the intellectual property of Troopod.
11
Portfolio Rights
Troopod reserves the right to feature the completed work in its portfolio and case studies unless explicitly requested otherwise in writing by the brand team prior to project commencement.
General
12
Confidentiality
Both parties agree to keep the terms of this engagement, including pricing and project details, confidential and not to disclose them to third parties without prior written consent.
13
Limitation of Liability
Troopod's total liability under this engagement is limited to the total fees paid by the brand team for the project. Troopod is not liable for any indirect, consequential, or business losses arising from delays, errors, or omissions in the deliverables.
14
Third-Party & Platform Liability
Troopod is not responsible for issues arising from Shopify platform outages, updates, or changes, third-party app conflicts, or any external dependency outside Troopod's direct control. If a post-delivery Shopify update or third-party app breaks any functionality, fixing it falls outside this engagement scope and will be quoted separately.
15
Post-Launch Support
Troopod provides 2 weeks of post-launch support from the go-live date. This covers bug fixes and minor changes as defined in the Revision Policy. Anything beyond 2 weeks or outside the definition of minor changes will be scoped and billed separately.
16
Formal Sign-off
A written email confirmation from the brand team constitutes formal sign-off at every stage: design approval, staging approval, and go-live clearance. Verbal confirmations or silence do not count as approval. No phase will be considered signed off without an explicit email confirmation.
17
Payment Delays
Delayed payments delay the project. Work will not proceed to the next phase until the corresponding milestone payment is received.