Kollimalai Natural Store
A modern, high-conversion digital commerce platform connecting authentic, naturally sourced products from the Kolli Hills directly to conscious consumers.
My Role
Product Engineer (Full-Stack)
Team Size
Solo / AI-Assisted
Status
Live
Platform
Web Application (E-Commerce)
Executive Summary
Overview
Kollimalai Natural Store is a digital commerce ecosystem built to digitize a traditionally offline supply chain of natural and organic goods from the Kolli Hills region. It serves as both a brand storytelling platform and a high-performance retail engine.
Why it matters: By controlling the end-to-end digital experience, the brand can authentically communicate its heritage while maximizing revenue margins. For consumers, it provides a transparent, secure, and delightful way to discover and purchase natural goods, bypassing third-party aggregators.
Context
The Problem
Business Problem: The merchant lacked a scalable digital storefront. Relying on WhatsApp orders and disjointed social media channels made inventory management chaotic and stunted growth potential.
User Problem: Customers found it difficult to browse the catalog, trust the authenticity of products, and securely process payments without a centralized, professional storefront.
Opportunity: To build a custom e-commerce solution that blends editorial brand storytelling with a frictionless, high-speed checkout flow, utilizing a decoupled architecture to maintain complete ownership of the data and UX.
Strategy & Solution
My Role
Oversaw the entire transition from an offline sales model to a scalable digital storefront, owning product strategy, UX/UI, frontend engineering, backend development, and database architecture.
Product Vision
To create a digital storefront that feels less like a sterile supermarket and more like a premium, curated artisanal boutique, without sacrificing the speed and convenience of modern e-commerce.
Information Architecture
Navigation is aggressively simplified, emphasizing top-level categories directly from the header, with a persistent search bar and universally accessible cart icon.
Key UX Decisions
Used an earthy yet modern aesthetic with muted greens and deep browns. Added subtle micro-interactions for cart updates and validations to build tactile feedback and consumer trust.
Core Features
High-Performance Product Catalog
A dynamically rendered yet statically fast grid of products with advanced filtering. Utilized Next.js Image optimization and lazy loading to achieve top-tier Lighthouse scores.
Persistent Edge Cart
Maintains its state globally across the application without requiring page reloads, keeping the user in the catalog longer and increasing Average Order Value.
Integrated Checkout
A secure, multi-step checkout process integrated with localized payment gateways. Requires absolute minimum clicks from 'Add to Cart' to 'Payment Complete'.
Trade-offs
Engineering Challenges
Custom E-Commerce vs. Shopify: The client wanted strict control over their data, zero monthly platform fees, and highly bespoke storytelling layouts that are difficult to achieve in generic Shopify themes. I chose to build a custom Next.js/Express stack from scratch. While this significantly increased initial development time, the business now owns its entire technology stack and saves thousands in recurring platform fees.
Inventory Synchronization: In a custom setup, preventing overselling of limited artisanal batches is critical. I implemented strict server-side cart validation—the frontend cart is optimistic, but the Express backend performs a hard inventory check against MongoDB at the exact moment of checkout initiation. This adds slight latency but prevents catastrophic customer service issues.
Outcomes & Roadmap
Business Impact
Successfully transitioned the business from informal chat-based sales into a scalable digital enterprise, drastically reducing manual operational hours and increasing conversion rates.
Technical Outcomes
Engineered an e-commerce platform that routinely scores 95+ on Google Lighthouse across Performance, Accessibility, and SEO.
Future: Headless CMS
Migrating static editorial content to a headless CMS (like Sanity) so the owner can publish blog posts without code deployments.
Future: Subscriptions
Modifying the MongoDB schema and payment logic to allow users to subscribe to monthly deliveries of staple natural products.
Key Takeaways
Reflection
Building e-commerce from scratch teaches you to respect the checkout flow. Every single millisecond of latency and every confusing UI element directly costs money. For e-commerce, Next.js Image optimization and Static Site Generation (SSG) are non-negotiable superpowers because they solve the biggest conversion killer: slow page loads.
Technology Stack
Frontend
Backend
Database
Deployment & Payments
Next Project
View Case Study