Gazian WaterA bottled water brand, and the store behind it
Gazian Water sells water so that the profit can go to Gaza. We built the brand's online home in English and Arabic, and the order, payment and tracking system underneath it.
- Client
- Gazian Water
- Sector
- Consumer goods
- Year
- 2026
- Platforms
- Web store, Mobile web
- Services
- Brand and graphics, Product and UX design, Web development
Gazian is a trading brand with a humanitarian purpose. The site has to sell water convincingly first, because the purpose only works if people buy the product, and it has to carry an order from enquiry through payment, dispatch and delivery.
Built for
- People buying water by the case, in English or in Arabic.
- Wholesalers and retailers asking about trade supply.
- The Gazian team, who work the orders and keep customers informed.
The problem
A cause brand has a specific way of failing. Lead with the cause and you are asking for charity, which is exactly what this brand is not. Lead with the product and the purpose reads as decoration. The site had to be a product site whose reason for existing is visible without being the pitch.
Half the audience reads Arabic. Not a translated page with an English layout behind it, but a right to left site where the navigation, the product gallery, the forms and the order flow all mirror properly.
The commercial side was not settled when the site had to exist. Bottle formats, pricing and the route to market were still moving, and a store that shows a checkout it cannot honour damages the brand more than one that does not show it at all.
Goals
- 01Build a brand site that sells the water and states the purpose once, clearly.
- 02Work as a genuine Arabic site, not a translation.
- 03Take orders now through the route that is open, without rebuilding when the store opens.
- 04Let a customer follow an order without an account.
- 05Handle trade enquiries separately from consumer orders.
Our role
We built the brand's digital presence and the commerce system behind it, working from the founder's brand documents.
What we delivered
- Brand application: wordmark, colour, type and packaging artwork in use
- Product and page design in English and Arabic
- Next.js front end with a full right-to-left layout
- Express and Prisma back end for products, orders, customers and shipping
- Stripe checkout, built and held behind a single switch
- Order tracking by order number, with status events
- Trade enquiry route, kept separate from consumer orders
How we worked
- 01
Start from the founder's words
The brand voice came from a set of approved questions and answers written by the founder. Where the site speaks about the cause, it quotes that document rather than inventing a line.
- 02
Design the product, state the purpose
The homepage is a product page. The purpose has one section of its own and one line in the footer, and it is not repeated on every screen.
- 03
Mirror, do not translate
Arabic was built as a first-class locale with its own routing, so the layout, the gallery controls and the form fields mirror rather than being flipped by a stylesheet.
- 04
Build the checkout, hold the switch
The full order and payment journey exists in the codebase. A single constant controls whether the public site offers it, and the product page, the call to action and the structured data all read that same value, so the site is never half open.
- 05
Open the route that is ready
While the switch is off, the same product page takes an order enquiry with format, quantity and destination, which is what the business can actually fulfil today.
Screens and features
One switch for the whole order journey
Product page, call to action, checkout and structured data all read the same value, so the visible offer and the interactive path can never disagree.
Order tracking without an account
An order number opens its own page with the status events recorded against it, so a customer can check on an order without signing in.
Trade kept apart from retail
Wholesale enquiries have their own route and their own form, because a pallet order and a case order are not the same conversation.
A full right-to-left site
Arabic is a routed locale with its own layout direction, not a stylesheet override on an English page.
Stripe built and waiting
Checkout, payment step, delivery address and order confirmation are implemented and covered by webhooks, ready for the day the store opens.
Technical choices
What the product is built with, and why.
- Next.js 16 with a locale segment
- Every page exists at its own English and Arabic address, so both versions are server rendered, indexable and can differ in layout rather than only in words.
- A separate Express and Prisma service
- Orders, payments and customer records sit behind their own API rather than inside the site. The store front can be redeployed without touching the system that holds orders.
- Stripe with webhook reconciliation
- Payment status comes from Stripe's webhooks rather than from the browser returning to a success page, so an order cannot be marked paid by a customer refreshing a tab.
- Redis in front of the catalogue
- Product and campaign reads are cached, so the pages that every visitor loads do not queue behind the database work that orders need.
- One constant for the launch state
- A single exported value is easier to reason about, and to reverse, than a feature flag service for a business decision that will be taken exactly once.
Launching a brand and a store together?
We do the identity and the commerce system in one piece of work. Tell us what you are selling.