A purified drinking water brand with a Vietnamese identity

Vietnam Water

Vietnam Water Beverage Co., Ltd. is based in Tan Binh, Ho Chi Minh City, and produces bottled purified water in three sizes, 350ml, 500ml and 1.5L, for studying, working, exercise and the family. Its products reach consumers through a network of dealers, supermarkets and stores across many provinces.

MONA designed and developed a brand website for Vietnam Water on WordPress. Instead of opening with a spec sheet, the homepage tells the story behind the brand name: a drop of water travels through the three regions of Vietnam before it goes into the bottle.

Visit the live website

Vietnam Water website hero screen with a greeting from the Vietnamese soul over misty mountains

Industry: Bottled drinking water
Item: Website design & development
Platform: WordPress
Website: vietnamwater.vn

The challenge

The homepage tells the story of a water drop traveling through three regions before it goes into the bottle

Purified water is a hard product to tell apart: every bottle is clear, every label says safe. What Vietnam Water has that other brands don't is its name, so the website turns the name itself into the story.

The homepage opens with the line A greeting from the Vietnamese soul over misty mountains. As visitors scroll down, they follow a water drop drifting along a dotted line through the North, the Central region and the South, each region drawn in navy line art: the One Pillar Pagoda and strings of flags, a cyclo, the ancient capital of Hue, motorbikes on the street and a cable-stayed bridge. After the three regions, the drop falls into a Vietnam Water bottle standing on the water, with the word Pure in large type running behind it.

Only after the story does the sales part begin: three sizes, 350ml, 500ml and 1.5L, a product page filtered by water line, a distribution page split by province, and every store listed with opening hours and a Google Maps directions button. The end of the homepage splits into two paths, one for retail buyers and one for people who want to become dealers.

As you scroll, the water drop drifts along the dotted line through each region

Interface highlights

All illustrations are single-color navy line art on white paper, and the pink from the logo is used only for headings and buttons.

The water drop continues past the ancient capital of Hue and into the South on the Vietnam Water homepage — The Central region is drawn with the ancient capital of Hue, the South with motorbikes on the street

The Vietnam Water bottle appears under a cable-stayed bridge at the end of the three-region story — After the three regions, the water drop falls into a Vietnam Water bottle

A Vietnam Water bottle standing on the water with the word Pure in large type — The bottle sits on the water, with the word Pure running behind it

Pure, safe, proudly from Vietnam block around the Vietnam Water bottle — The brand's three promises arranged around the bottle

The three Vietnam Water sizes, 350ml, 500ml and 1.5L, on the homepage — Three sizes, each bottle labeled with the occasion it suits

Vietnam Water about page: pride in the Vietnamese land in every pure drop — The about page keeps the same line-art style as the homepage

Deliverables

What MONA did for Vietnam Water

01
UX/UI design in the navy and pink of the logo, illustrated with line drawings of landmarks from the three regions
02
Built a scroll storytelling effect where the water drop drifts along a dotted line through three regions and falls into the bottle
03
Built a product page filtered by water line and a distribution page by province with Google Maps directions
04
Developed on WordPress, with a contact form that separates individual customers from businesses and partners
05
Optimized load speed and responsive display, with the three-region story stacked vertically on phones

Interface experience

The line art runs through every page, from the homepage to the about and contact pages, so visitors who switch pages still feel they are in the same story.