Ayooh Naturals: E-Commerce Site for a Wellness Brand.
From a blank canvas to a live store processing real orders — how I designed, built, and scaled an e-commerce platform for a wellness products brand rooted in Haridwar, Uttarakhand.
Client
Ayooh Naturals
Timeline
Jul 2024 - Mar 2025
Last Updated
Feb 2026
Status
Live
Context
The Brand
Ayooh Naturals is a Haridwar-based wellness company offering pure essential oils, traditional attars, carrier oils, room fresheners, and aromatherapy products — ethically sourced directly from farmers.
The Problem
The brand had real products and a loyal wholesale base, but no online retail presence. Orders came through WhatsApp and word-of-mouth — there was no product catalogue, no payment system, and no way to scale.
My Role
I was the sole developer — responsible for architecture, design, content modelling, payment integration, and ongoing feature development post-launch.
The Idea
“A brand that sources from the foothills of the Himalayas deserves a storefront that feels as clean as its products.”
The Origin
The client approached me with a simple ask: make the products available online. What started as a basic product listing grew into a full e-commerce platform with CMS-driven content, a loyalty programme, and a blog — built iteratively over 8 months.
Core Assumptions
- → A clean, content-first design would match the brand's natural and premium positioning.
- → Sanity CMS would let the client manage products without developer involvement.
- → Razorpay was the right payment gateway for the Indian market.
- → The real growth channel would be returning customers, not ad traffic.
Build Process
Foundations & Content Model
Before writing a single UI component, I spent the first two weeks mapping out the product taxonomy. Ayooh Naturals had over 30 SKUs across 5 categories — essential oils, carrier oils, attars, room fresheners, and diffuser blends. I designed the Sanity schema to handle product variants, pricing, category taxonomy, and rich media from day one.
export default {
name: 'product',
type: 'document',
fields: [
{ name: 'title', type: 'string' },
{ name: 'slug', type: 'slug', options: { source: 'title' } },
{ name: 'category', type: 'reference', to: [{ type: 'category' }] },
{ name: 'price', type: 'number' },
{ name: 'mrp', type: 'number' },
{ name: 'images', type: 'array', of: [{ type: 'image' }] },
{ name: 'inStock', type: 'boolean' },
{ name: 'description', type: 'array', of: [{ type: 'block' }] }
]
}Store Launch — Core Shopping Experience
The first public release shipped in March 2025 with the complete product catalogue, category filtering, a Razorpay-powered checkout, order tracking via a custom order management flow, and a mobile-first responsive layout built to reflect the brand's natural aesthetic.
Key Decision
Used Next.js App Router with server components for product pages — giving fast page loads and excellent SEO out of the box, critical for a product-catalogue site.
Trade-off
Chose Razorpay over Stripe for its zero-friction UPI and NetBanking support. This made the Indian checkout process feel completely native. However, Razorpay's documentation and webhook reliability were challenging to work with — requiring custom solutions for idempotent order handling.
Product Reviews & Advanced Filtering
Three months post-launch (September 2024), I added a product review system and enhanced category filtering. Reviews were stored in the database and surfaced via a star-rating component on product pages. Filtering was upgraded to support multi-tag selection, price range, and in-stock toggle — improving the browsing experience significantly as the catalogue grew.
Technical Lift
Built a debounced client-side filter state that synced to URL params — so filtered views could be shared and preserved across page refreshes without any server round-trip.
User Insight
Needed a way to lessen the friction by reducing the number of steps during checkout.
Rewards Programme & Blog
In February 2026, I delivered two major features that transformed the store from a simple shop into a retention engine. The Rewards Programme lets customers earn points on purchases, referrals, and social actions — redeemable for discounts. The Blog section, built on Sanity, gave the brand a platform to publish guides on aromatherapy, essential oil usage, and wellness — driving organic traffic.
Rewards Engine
Custom-built points ledger with a referral system — new users get 15% off (up to ₹300) and referrers earn 200 points. Fully managed through the Sanity dashboard and a custom admin view.
Blog & SEO
Structured the blog around long-tail keywords for essential oil searches in India. The first 5 posts targeted queries like 'eucalyptus oil for cold' and 'how to use diffuser oil at home'.
Validation & Reality
The store went live in March 2025 and immediately started processing orders from customers who previously ordered via WhatsApp. Within a month, the client had fully transitioned away from manual ordering. The Rewards Programme launched in February 2026 drove a measurable spike in repeat purchases.
“We used to take orders on WhatsApp and forget half of them. Now everything is tracked, and customers come back on their own.”
What Worked
- • Sanity CMS — client manages products independently
- • Razorpay UPI checkout reduced cart abandonment
- • Mobile-first design matched customer device patterns
- • Rewards programme drove repeat purchase behaviour
What Didn't
- • Initial SEO wasn't prioritised — fixed in v2.0 with the blog
- • No abandoned cart recovery at launch
- • Image optimisation was an afterthought — caused slow LCP on mobile early on
Challenges
Inventory & Variant Management
Ayooh Naturals sells the same oil in multiple sizes (30ml, 100ml, 250ml) each at different price points. Modelling this cleanly in Sanity — and surfacing it correctly in the cart — required multiple iterations of the schema and checkout logic.
Razorpay Webhook Reliability
Payment webhooks occasionally arrived out of order or were delayed, causing order status inconsistencies. I implemented an idempotent order status handler and a fallback polling mechanism to resolve this without user-visible failures.
Client Content Management
The client had never used a CMS before. The initial Sanity schema was too technical — field labels like 'slug' and 'portableText' were confusing. I restructured the studio UI with custom input labels and simplified the publishing workflow, making the client self-sufficient within a week.
Outcome & Key Learnings
The Current State
Ayoohnaturals.com is live, actively processing orders, and under ongoing development. The client now manages all product updates and blog content independently through Sanity. A current site rework is underway to modernise the visual design and improve mobile performance.
Key Learnings
- 01 CMS design is product design — bad field labels cost real hours.
- 02 Webhook idempotency is not optional in payment systems.
- 03 The client's self-sufficiency is a feature, not a bonus.
- 04 Speed of checkout matters more than breadth of features.
Next Steps
- / Complete ongoing site visual rework.
- / Implement abandoned cart email recovery.
- / Expand the blog with SEO-optimised content.
- / Add automations to auto manage the site and content updates.
Growth
Current Phase
All
Happy Customers