Fordel StudiosThis case study describes a real engagement. Client identity, proprietary details, and specific metrics are anonymized or approximated under NDA.
Multi-Brand Skincare E-Commerce Platform
A skincare retail startup launching in India needed a custom e-commerce platform that went beyond standard Shopify capabilities. They required a routine builder tool, cultural formula browsing (organizing products by origin — Indian, Korean, Japanese), an educational content section, and a design system that reflected premium positioning. Off-the-shelf platforms could not accommodate the custom product discovery flows.
Built a full-stack Next.js e-commerce application with custom product catalog, routine builder, cultural formula navigation, educational content engine (Formula Book), user accounts, wishlists, cart/checkout, and integrated analytics.
The engagement covered the complete e-commerce platform — from product catalog management to checkout flow. The client had a clear brand vision: premium skincare curation organized by cultural origin (Indian Ayurvedic, Korean glass-skin, Japanese minimalist, Global clinical). The standard Shopify/WooCommerce templates could not support the routine builder concept or the cultural formula navigation. We built a custom Next.js application with a headless CMS for product and content management, integrated payment processing for the Indian market, and analytics instrumentation across the full funnel.
The Challenge
The routine builder was the most complex feature — a multi-step interactive tool where customers select products for each step of their skincare or haircare routine (cleanser → toner → serum → moisturizer → sunscreen for face; shampoo → conditioner → mask for hair). Each step needed to filter products by compatibility, skin type, and concern — with real-time price aggregation for the complete routine. Product data modeling had to support multiple categorization dimensions simultaneously: brand, category, skin concern, ingredient focus, cultural origin, and routine step compatibility. The Formula Book content section needed to integrate with the product catalog so educational articles could deep-link to relevant products.
How We Built It
Discovery phase mapped the complete product taxonomy — brands, categories, cultural formulas, skin concerns, ingredient groups, and routine step mappings. This produced a data model that could support the multi-dimensional browsing and filtering the client needed. We also audited competitor sites to identify UX patterns that worked for skincare-specific discovery.
Architecture: Next.js App Router for SSR/SSG performance, headless CMS for product and content management, Tailwind CSS with a custom design system reflecting the premium brand positioning. Payment integration used Razorpay for the Indian market. Cloudflare for CDN and edge caching. Analytics stack: GA4 + GTM + Microsoft Clarity for heatmaps.
Implementation was phased: product catalog and listing pages first, then product detail with image carousels and reviews, then cart/checkout, then the routine builder, then Formula Book content, then user accounts and wishlists. Each phase was deployed to staging for client review before proceeding.
Launch included SEO setup (meta tags, Open Graph, sitemap), WhatsApp customer support integration via WATI, newsletter subscription, and promotional banner management. Post-launch support covered bug fixes, content updates, and analytics tuning.
What We Delivered
The platform launched with 50+ products across 4 cultural formula categories, a fully functional routine builder, and an integrated Formula Book content section. The routine builder drove measurably higher average order values compared to standard category browsing.
Page load performance met Core Web Vitals thresholds — LCP under 2.5s, CLS under 0.1, INP under 200ms — thanks to Next.js SSR/SSG and Cloudflare edge caching. Product pages rendered with full image carousels without layout shift.
The custom data model successfully supports 6 simultaneous filtering dimensions without query performance degradation. Product discovery flows — cultural formula, routine builder, ingredient-based, and standard category — all operate against the same catalog with different view layers.
Ready to build something like this?
Tell us what you are building. We will scope it, price it honestly, and give you a clear plan.
Start a ConversationFree 30-minute scoping call. No obligation.