All projects

Product / E-commerce

MyWater — Smart Water Purification

Next.js product and commerce site for a smart water purification brand: subscription-based purifiers with app-connected filter health and service tracking.

  • Next.js
  • React.js
  • JavaScript (ES6+)
  • Node.js
  • REST APIs
  • SSR / SSG
  • Cloudflare
MyWater — Smart Water Purification — cover
Client
MyWater
Duration
May 2022 — Oct 2022
Category
Product / E-commerce

MyWater turns tap water into purified mineral water through an eight-stage system sold on a subscription rather than as a one-off appliance — filters, servicing and maintenance are included, which changes the site's job from "sell a product" to "sell an ongoing relationship".

The site is a Next.js application behind Cloudflare, covering distinct product lines for homes, SMEs, offices, large corporates and restaurants, alongside glass bottles and custom RO plants. Each segment needs its own framing and its own quote path, so the same catalogue is presented several different ways depending on who is reading.

The connected-device angle runs through the content too: the companion app reports real-time filter health, service history, billing, water quality scans and consumption, so the marketing site has to explain a piece of hardware, a subscription and a software product at once.

Key features

Segment-specific product journeys for home, SME, office, corporate and restaurant

Subscription positioning with quote-request and free water survey capture

Product range pages for Terra, Neo and limited-edition units

Eight-stage purification explainer and connected-app feature content

Embedded product video content and imagery-heavy layouts

Server-rendered Next.js pages behind Cloudflare for speed and SEO

Videos

My role

Frontend developer on the Next.js site.

  • Built the segment-specific product and landing pages in Next.js
  • Implemented lead capture — quote requests and free water survey forms
  • Built the product catalogue, comparison and specification layouts
  • Handled rendering strategy, image optimisation and page performance

Challenges & solutions

Five audiences, one catalogue. A restaurant and a household buy the same hardware for entirely different reasons. Segment landing pages share components but lead with different framing, so neither audience has to read past content meant for the other.

Lead capture without wrecking the page. The business runs on survey bookings, so the capture form is prominent — but tuned so it converts without making the first visit feel like a wall.

MyCart.pk — Online Grocery Store — coverE-commerce / Grocery

MyCart.pk — Online Grocery Store

Magento grocery storefront for Karachi: seven top-level departments, daily-deal merchandising and same-city delivery with market-rate pricing at fulfilment.

  • Magento
  • PHP
  • MySQL
  • jQuery
  • +3
Case details
Optix Pakistan — ISP Website & Signup — coverTelecom / Corporate

Optix Pakistan — ISP Website & Signup

WordPress site for a Pakistani ISP: broadband, TV and phone packages with area-coverage checking and online signup for a triple-play product line.

  • WordPress
  • PHP
  • Custom WP Theme
  • Slider Revolution
  • +4
Case details