01 · Project Overview
Building a premium landing page 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 7 landing pages (6 PDPs + 1 Collection Page).
Engagement at a glance
7
Landing Pages (6 PDP + 1 Collection)
1
Master Design Framework
4
Feedback Rounds
Phased
Rollout by Priority
Products in scope
⚡Bullet
🌀Wild Wand
🐇Buzzy Rabbit
🔄Ride & Vibe Stroker
✨Slide & Ride
🎯A-Game
Plus 1 Collection Page for 69 Sale — 7 landing pages total.
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 7 Landing Pages
A unified Durex landing page design language: shared component architecture, spacing system, typography scale, and motion guidelines across every landing page. 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 landing page 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 landing page 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 seven independent landing pages, you want a unified design language. This means shared components (feature blocks, spec tables, testimonial patterns, CTAs) that adapt to each page's personality without requiring seven 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 7 landing page 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 LP Design Framework
One shared Figma design system covering components, layout, typography, and spacing. Used as the base across all 7 LPs for portfolio consistency.
For reference only. Final framework direction will be confirmed after the kickoff discussion with the team.
02
High-Fidelity Figma Designs: 7 LPs
Full desktop and mobile designs for each page — including the Collection Page's campaign-ready hero, first-scroll product grid, and brand story section. Feature-led storytelling, scroll and parallax animation planning, conversion flow, and dev-ready handoff. All 7 Figma files handed over at completion.
Development
03
Production-Ready Pages: 7 LPs
Pixel-perfect builds from signed-off Figma designs across all 7 landing pages. GSAP scroll animations, parallax, platform integration, cross-browser and mobile QA. Delivered to staging for review before go-live.
Not included
Copy and brand guidelines — always supplied by the brand team. Raw product photos and videos are supplied by the brand team wherever necessary, under both options — Troopod needs source material for whatever falls under its scope (see Commercials, Section 09): under Option 1, Troopod produces both the finished static creatives and the product videos from that raw material. Under Option 2, the brand team additionally supplies finished static creatives directly, and Troopod still produces the product videos from the brand team's raw photos/footage.
04 · Master LP Framework
One design system, every landing page
For reference only. This framework is indicative. The final direction will be confirmed after the kickoff discussion with the brand team.
Page section architecture (the formula behind every landing page)
Section 01
Hero
Full-width hero anchoring the page: headline, supporting tagline, key visual, and primary CTA. Flexible enough to lead with a single hero moment or with the core content itself, so the page's main value is visible within the first scroll rather than buried below the fold.
Section 02
Core Content
The heart of the page, placed high in the scroll order. This flexes between a sequence of full-scroll story sections (visual, benefit-led headline, and tone-driven copy that lets the value come through implicitly rather than through explicit or instructional language) or a browsable grid layout — the Bombae page standard, adapted to Durex's visual identity, applied to whichever format the page calls for.
Section 03
Value Strip
3–4 key differentiators or trust props as icon + headline chips, reinforcing credibility and quality signals. Sequenced wherever it best supports the content above without crowding it out of the first scroll.
Section N+1
Brand Story
An optional dedicated creative storytelling block for pages that call for a broader brand narrative, used selectively rather than by default on every page.
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
The closing argument of the page: selection controls, CTA, trust badges, and cross-sell prompts driving the user toward the next step.
Persistent
Sticky Bar
Appears after the hero on scroll: thumbnail, name/price context, and CTA, always visible without interrupting the browsing flow.
How the framework adapts per page
Shared across all 7
Component library · Spacing tokens · Typography scale · Motion guidelines · Sticky bar · Conversion zone structure · Social proof pattern
Customised per page
Hero visual & framing · Core content format (story sections or grid) · Colour accent application · Section order (based on priority) · Whether a Brand Story section is included
05 · Deliverables
What you walk away with
📐
Figma Files: All 7 LPs
Complete, dev-ready Figma designs for all 7 landing pages. Desktop and mobile. Yours to keep and build on.
💻
7 Live Landing Pages
Fully built, QA tested, and deployed. GSAP animations, parallax, and platform integration included.
🗂️
HTML Files
Clean, well-commented HTML source files for all 7 landing pages, 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 7 LP 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 LP component system. Shared for alignment before individual page design begins.
03
LP Design: Sequential
Each landing page is designed one at a time, adapting the master framework to the page. 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 across all 7 landing pages, 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, phased by priority
Delivery is split into priority-based phases rather than one flat schedule, so the highest-priority pages launch first instead of everything waiting on the full batch. Each phase runs its own full cycle — design, feedback, development, QA, sign-off, and go-live — for its pages, rather than QA and handover happening only once at the very end. Development runs upto 2 pages at a time within a phase.
Delivery phases
Phase 0
Kickoff & Master Framework
Kickoff call with the brand team. Brand guidelines, product specs, and Shopify access confirmed. HTML prototype and Figma design system built to establish the shared page structure, scroll behaviour, and animation approach that every subsequent page inherits from.
Phase 1
Launch Batch 1: 2 Landing Pages
Design, feedback, development, QA, and sign-off for these two priority pages first, then straight to go-live — so the portfolio starts shipping early instead of everything waiting on the full batch. 🔒 Design freezes per page on sign-off.
Phase 2
Rollout Batch 2: 3 Landing Pages
Design, feedback, development, QA, sign-off, and go-live for the next 3 landing pages, following the same sequential-design / parallel-dev pattern as Phase 1. Exact pages to be confirmed with the brand team based on priority.
Phase 3
Final Rollout: 2 Landing Pages
Design, feedback, development, QA, sign-off, and go-live for the final 2 landing pages, closing out the full 7-page portfolio. Full Figma file handover for the entire portfolio at project close.
Note: Phase durations above are indicative. The exact page-to-phase mapping is being finalised internally and will be shared as a detailed schedule once we align on an engagement start date and page priority order.
Note: Phases 1 and 2 take longer because those pages are being designed from scratch — the component library and design language built during them carry forward to every page after. Once that foundation is in place, Phase 3 moves faster.
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 LP
Each landing page 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 phased rollout above. However, any delays in review turnaround will directly delay the phase in progress and every phase after it. 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.
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 + All 7 LP Designs | Brand Team (Creative) | Component library, design direction, layout, hierarchy, section sequencing, copy slots, motion approach | Included |
| Creative R2 | Revised LP Designs (all 7) | 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 an LP beyond the 7 scoped
✗ 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 an LP beyond the 7 scoped
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
Full end-to-end Design + Development delivery by Troopod across all 7 landing pages. Two options depending on how much of the creative production (statics & product video) Troopod handles. No hidden line items.
Design + Development
₹ 3,50,000
7 Landing Pages × ₹ 50,000 (6 PDPs + 1 Collection Page)
✓Master LP Design Framework (Figma)
✓Full Figma design for all 7 LPs (desktop + mobile)
✓Product storytelling architecture per page
✓Motion specification & animation planning
✓Pixel-perfect Figma-to-code, GSAP scroll animations & parallax
✓Cross-browser & device QA, platform integration
✓4 structured feedback rounds (2 Creative + 2 Brand)
✓Full Figma source file handover at completion
✓All exported design assets (SVG / WebP)
Choose your creative production scope
Option 1
Full Creative Scope
Troopod produces all static creatives and product videos
✓Up to 5 static creatives per page: ₹ 10,000 / page
✓Up to 5 product videos per page: ₹ 35,000 / page
✓Brand team supplies raw photos and videos wherever necessary — Troopod produces all finished static creatives and product videos from them
Option 2
Product Video Only Scope
Troopod produces product video only; brand team's creative team supplies statics
✓Up to 5 product videos per page: ₹ 35,000 / page
✓Static creatives supplied and produced by the brand team
✓Brand team also supplies raw photos and videos wherever necessary for the product videos Troopod produces
Note: The per-page creative production rates above are tentative baseline placeholders. Final rates will be confirmed internally once actual per-page design effort (number of statics/product videos typically required) is benchmarked and finalised. Creative production is billed in addition to the Design + Development price above, per page, as pages are scoped.
GST note
All prices above are exclusive of GST (18%). GST will be added to the final invoice as applicable.
Creative production costs (per the chosen option above) are billed separately, per page, once the final per-page rate is confirmed.
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 and will be refined once each page's design is finalised. Raw product photos and videos are needed from the brand team wherever necessary, under both options — Troopod needs source material for whatever falls under its scope (see Commercials, Section 09). Under Option 1, Troopod produces both the finished static creatives and the product videos from that raw material. Under Option 2, the brand team additionally supplies finished, production-ready static creatives directly; Troopod still produces the product videos from the brand team's raw photos/footage.
Required at kickoff (Week 1)
→
Brand Guidelines: Typography, colour palette, logo usage, tone of voice. Figma or PDF format preferred.
→
Product & Category Specs: Full feature list, technical specifications, dimensions, and key differentiators for each of the 6 products, plus category-level specs for the Collection Page.
→
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. Required under both options — format depends on which is chosen. Option 2: finished, production-ready hero images for all 6 products, minimum 3000px wide, PNG/TIFF preferred, on white and lifestyle variants if available. Option 1: raw/unedited product photos are enough — Troopod handles retouching and produces the finished creative.
→
Feature Visuals. Required under both options — these populate the Feature Story Sections. Option 2: finished close-up or lifestyle imagery, ready to use. Option 1: raw photos of the relevant features are enough — Troopod produces the finished visuals.
→
Written Copy: All page copy: taglines, feature headlines, benefit descriptions, disclaimers, and (for the Collection Page) brand story copy. 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)
→
Existing Analytics: Current LP 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 1 or Option 2
Full Creative Scope (Troopod handles statics + product video), or Product Video Only Scope (Troopod handles product video, brand team supplies statics). This determines the creative production line items on the kickoff invoice.
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 LP 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 & Creative Production Responsibility
All copy and brand guidelines are supplied by the brand team regardless of the option chosen. Raw product photos and videos are supplied by the brand team wherever necessary, under both options. Responsibility for producing finished creative depends on the option confirmed in Commercials (Section 09): under Option 1, Troopod is responsible for producing all finished static creatives and product videos from the brand team's raw material. Under Option 2, the brand team is additionally responsible for supplying all finished static creatives directly, while Troopod remains responsible for producing all product video from the brand team's raw material. Troopod takes no responsibility for the accuracy, legality, or compliance of any 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.