Skip to main content
stack.com
Next.jsMagento 2TypeScriptSubscriptionsCompliancePWA
DA Drogist Health & Beauty Commerce
Omnichannel health & beauty PWA with regulated content flows.
Project Overview
DA required a compliant, high-performing storefront blending pharmacy-grade product flows with lifestyle discovery. We delivered a headless PWA integrating regulated content gating, replenishment subscriptions, and a guided product finder to streamline wellness journeys. Focus areas included performance under rich media promotions, accurate attribute-driven search, and repeat order acceleration for essentials and personalized regimes.
Screenshots
Category Experience
Guided Product Finder
Subscription & Replenishment Flow
Key Features
- Regulated content gating & pharmacy disclaimers
- Subscription & auto-replenishment for essentials
- Symptom & attribute guided product finder
- Personalized regimen suggestions
- Promotion-aware caching strategy
- Mobile-first performance budgeting
Challenges
- Balancing compliance prompts with conversion
- Ensuring fast navigation under promo-heavy layouts
- Mapping symptom terminology to product taxonomy
- Minimizing friction in subscription enrollment
Solutions
- Progressive gating with contextual inline consent
- Critical CSS extraction + deferred non-essential scripts
- Synonym & relevance tuned search index
- Inline enrollment + one-click schedule adjust
Key Metrics
+14%
Repeat Orders
1.2s
LCP Category
70k+
Monthly Sessions
Technology Stack
Frontend
Next.jsReactTypeScriptTailwindCSS
Backend
Magento 2GraphQLNode.js
Subscriptions
Replenishment EngineSchedule Optimizer
Search
Attribute FacetingSymptom Finder Index
Results
- Repeat orders up 14%
- Subscription enrollment +12%
- Improved category LCP to ~1.2s
- Reduced regulated content abandonment 18%
interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; }