Skip to content
Selected workCase study (01/02)

WaTR

Corporate water supply

WaTR supplies 20-litre drinking-water jars to offices and multi-location businesses. Its website is built for facility and procurement teams, and every section ends in the same place: a conversation about a supply plan.

Category
Corporate website
Scope
Design and front-end development
Live
watr-chi.vercel.app(opens in a new tab)
WaTR homepage: the hero, “Water supply for your business.”
Fig. 01HomepageDesktop
(01)Overview

Overview

What it is

A single-page corporate website for WaTR's office and enterprise supply. It covers three supply plans, quality standards and purification, nationwide coverage, an instant supply estimate, an FAQ and an enquiry form.

The problem

Changing water supplier is a procurement decision. Before a business gets in touch, it wants four answers: can you deliver to our offices, is the water certified, how will delivery work, and how will we be billed. The site answers each in turn, then hands over to the enquiry form.

Who it's for

Office administrators, facility managers and procurement teams, from a single office to a branch network across several cities.

The experience

An open, editorial page in WaTR's maroon and saffron. The heavier material, from a 51-city network to 18 FAQs and eight purification stages, sits behind filters, tabs and search rather than one long scroll.

WaTR network section: an interactive map of metro hubs, Tier-1 and Tier-2 cities, with region filters and city search
Fig. 02City networkDesktop
WaTR homepage on a phone
Fig. 03HomepagePhone
(02)Key features
5 ways the page does the explaining

Heavy detail, made light to browse.

  1. W.01

    Network map

    An interactive map of India with 51 anchor cities. Tilt and pan it, zoom in, filter by tier or region, or search for a city or state.

    Drag · Zoom · Filter · Search
  2. W.02

    Supply estimator

    Choose a team size from 15 to 300+ people and the page suggests monthly jar volume, delivery cadence and how many dispensers to plan for.

    Select
  3. W.03

    Standards explorer

    Quality, delivery reliability and corporate rates as switchable panels, with all eight purification stages laid out step by step.

    Switch
  4. W.04

    FAQ knowledge base

    18 questions on delivery, quality, billing and hardware, with category filters, search and a short first view that expands on request.

    Filter · Search · Expand
  5. W.05

    One enquiry path

    Every call to action leads to a single form asking for name, company, phone, email, city and requirements.

    Enquire
(03)Design and development

A brand system, paced for a buyer.

  • Maroon#791317
  • Deep maroon#5C0D11
  • Saffron#FFC400
  • Cocoa#281C1A

Typeface Manrope

Design
Brand carried from the WaTR logo: maroon and saffron on a warm off-white, with deep maroon bands for the services and network sections. Manrope throughout, set heavy for headlines.
Front end
React single-page application, bundled with Vite.
Motion
GSAP and ScrollTrigger for scroll-linked animation, Lenis for smooth scrolling, and a network map that tilts in 3D with CSS perspective.
Responsive
A dedicated mobile layout and menu, with no sideways scrolling at phone width.
Accessibility
A skip-to-content link and labelled map controls for zoom in, zoom out and reset.
(04)Result

WaTR is live. It gives the business a corporate presence that explains the service in the order a buyer weighs it, and turns that reading into an enquiry.

Visit the live site(opens in a new tab)Start a project
Next project(02)

Aquatrack

Operations CRM and mobile app