A product page in the Blue Zone Africa online store

A shop for Blue Zone Africa's herbal range, selling to the public and to a 41-person ambassador network at the same time, at two different prices. Nobody types a discount code. Opening an ambassador's link is the discount.

2
Prices, one shop
30
Day credit window
6
Emails that send themselves
0
Card details handled
The work

Selling a health product you cannot pick up.

01 The shop

It used to open on a paragraph. Now it opens on the products.

The first build put a block of text above the fold and no product photography anywhere near it, which is an odd way to sell three things people have never seen. The storefront now opens on a rotating set of four features, each laid out differently and each built on a real photograph: the three products together, then Dahome, Isosha and Asano in turn, with their own claim and a link straight through.

It stops the moment someone hovers over it or moves the keyboard into it, and there is a button to stop it outright, so it never changes under a reader mid-sentence. On phones the photograph and the words stack rather than layer, because text sitting on a product shot at that size either cannot be read or hides the product.

The whole thing deliberately borrows the portal's design language rather than inventing its own, so a customer who later becomes an ambassador does not feel handed off to a different company.

02 Product truth

On a health product, a confident wrong number is worse than no number.

Much of this phase was not design. It was reconciling what the shop said against what is actually printed on the boxes, and refusing to fill gaps with plausible guesses.

  • The products were listed under the wrong names. Descriptive stand-ins had been carried over from the brochure, so a customer holding a pack of Isosha would have found nothing called Isosha anywhere in the shop. Listings now use the names, claims and pack sizes on the packaging.
  • Dosage was left blank on purpose, then filled in properly. The printed dosage could not be read reliably from the photographs, so every page said to follow the pack until the lead coach confirmed it. It now reads one capsule daily for Isosha and Dahome, one tea bag daily for Asano, all best in the morning.
  • A regulatory claim was understating the range. The source document credited NAFDAC registration to one product; the whole range is registered. Corrected in the client's favour, after checking rather than assuming.
  • Two ingredient lists appear to have been swapped in the source document. Each reads more like the other product's purpose. They are published exactly as supplied and the discrepancy sits with the company, because correcting a health product's ingredients on a hunch is not a designer's call.
  • The recommendation row is titled "Works well alongside", not the usual claim that other customers also bought it. At the time it was written no customer had bought anything, and saying otherwise on a health product is an invention.
A product page showing ingredients and what the product is formulated to support
03 Two prices

The link is the discount. Nobody types anything.

The range sells at one price to the public and a lower one to anyone who arrives through an ambassador's link. The customer is never asked for a code and never asked whether they have one. Opening the link is enough: the price changes across the whole shop, and a basket they had already started filling is repriced too.

Two rules decide who gets paid, so they were put to the business as a written proposal and approved rather than quietly assumed. If the customer leaves and comes back later without the link, the lower price still stands for thirty days. Where someone has used more than one ambassador's link, the most recent one is credited.

A customer who arrives without a link sees the ordinary price and is not told a cheaper route exists. At the moment of buying, that only makes someone feel they have missed something they cannot act on. The question is answered plainly in the FAQ instead, where they can do something about it.

Ambassadors also got a second link on their dashboard. They had been sending their recruiting link to people who wanted to buy a product, and those customers landed on a sign-up form instead of a shop.

04 Checkout

Built for bank transfer, because that is how this market pays.

A card gateway would have been quicker to build and easier to describe, and it would have suppressed orders. Transfer is the default instrument here, so we took the harder problem: a card payment confirms itself, a transfer does not, and the order has to survive the gap between someone paying and anyone knowing they paid.

It also means the shop never handles card data at all, which removes a whole category of obligation from a business with no reason to take it on.

  • The two commonest questions are answered before payment. Checkout asks how the order should reach them: delivery by the logistics partner, three to seven days, with the cost quoted once payment clears because it depends on where they are; or free collection from a wellness centre, two to five days, with all three addresses and phone numbers listed.
  • Choosing one hides the other, so nobody is asked for a delivery address for an order they intend to collect.
  • The choice is recorded for whoever packs it, because putting something on a van and putting it on a shelf with a name on it are different jobs.
  • State is chosen from a list rather than typed, so orders can be grouped by location instead of arriving spelled five different ways.
  • The basket never carries its own prices. It stores what and how many; every line is recalculated on the server at order time. A basket that carries prices is a basket the browser can edit.
Checkout, offering delivery or free collection from a wellness centre
05 Nothing dropped

Six emails, and an 8am list of everyone who never paid.

Before this, pressing Order did nothing anyone could see. No word reached Blue Zone Africa, and the customer was left holding an account number they had to write down before closing the tab.

Now the customer is emailed immediately with the amount, the payment reference and the bank account. When they upload proof of payment, the office hears the same minute, so a payment can be checked while the customer is still expecting to hear back. Confirming it tells the customer, records the sale, credits the ambassador whose link was used, and takes the stock down.

And every morning at eight the office gets a list of orders placed but never paid for, with names and phone numbers, so those get chased instead of quietly written off. It stays silent when there is nothing outstanding, so it never becomes the email everyone learns to ignore.

Ambassadors get no per-sale email, by design. The people most likely to receive a lot of them are the ones who would stop reading our email first.

06 The money

A second price needed a second revenue split.

The company's financial model described a product sale at one price only, the ambassador one, and divided it four ways including the ambassador's retail bonus. Once the shop also sold to the public at a higher price, that sale did not fit the model, and recording it against the old figures would have understated what the company actually earned on every order placed without a referral.

There is now a second split for public sales: factory cost and contingency unchanged, no retail bonus because no ambassador was involved, and the remainder staying with the company. Both splits were checked to balance exactly against their own price. Nothing about existing records changed.

07 Live

Signed off on a real purchase, not a green test suite.

The shop went live in September 2026, proven end to end on an actual paid order: checkout, customer email, receipt upload, office alert, confirmation, sale recorded, ambassador credited, stock decremented. Then the order was removed.

Every one of those steps crosses a boundary where something can silently do nothing, which is why the sign-off was money rather than a passing test.

One thing is openly unresolved, and it is a business decision rather than a technical one. Stock figures were invented during the build so the pages had something to show, and they were never replaced. All three products now sit at a number high enough never to block a sale, and every order is checked by a person against the bank statement before anything ships. Tracking real stock properly needs a real count to start from, a screen for staff to adjust it, and somebody recording offline sales. Either answer works. It is not ours to pick.

What it runs on

The stack.

Front-end
React, Vite, Tailwind CSS, real URLs for search and link previews
Database
PostgreSQL with row-level security, stored procedures for placing, confirming and cancelling an order
Pricing
Referral-linked dual pricing, thirty-day attribution, most recent link credited, recalculated server-side
Payments
Bank transfer with database-issued references and receipt verification. No card data handled
Automation
Database webhooks into a serverless function, a scheduled unpaid-order digest, secrets in a managed vault
Imagery
Product photography cropped and re-encoded to WebP, the whole set under 540 KB for Nigerian mobile connections
Next project

Joseph & Esther Homes Website

View case study