TsogaShop

A customer orders in the WhatsApp chat they already have with a shop, gets an invoice in the same chat and pays with M-PESA, MTN MoMo, Airtel Money, PayFast, Payphone or Apple Pay. The merchant gets the money straight away. TsogaShop also gives them a back office, broadcast messages to customers, and an AI assistant that makes product photos and drafts messages.

The old site was a SaaS template, with centred feature blocks and icons, and it never really explained how a sale works. The new page walks through one order, from the chat to the money arriving, then says what it costs and asks merchants to request a demo.

I’ve worked on WhatsApp commerce before. About ten years ago I redesigned Ongair, a dashboard for businesses talking to their customers on WhatsApp and other messaging apps.

Small shops that already sell on WhatsApp: fruit and veg sellers, butchers, tailors, mini-marts, kitchens and clothing shops. Most owners will see the page on a mid-range Android phone, often outside, and sometimes on metered data. They’re busy and wary of tools that promise a lot. They trust what they can see working.

The page tells the story of one morning at Mama Neema’s fruit shop. She wakes up to orders that were paid before she got up. Then it follows a new order, Wanjiru’s box of mangoes, through the chat and the payment until the money reaches Neema. There are 13 sections and one call to action, Request a demo.

Mama Neema, her customers and the amounts are made up, but each step of the order is how TsogaShop actually works.

Most of the page is a very dark green and an off-white. The sections about getting paid and pricing are lime, and the one about broadcasts is crimson. I never put lime text on a light background, because the contrast is too low.

I built it to WCAG 2.2 AA. Headings are set in Young Serif and the rest in Figtree, both self-hosted and subset to Latin characters.

Section 6 is about storefronts. Each merchant gets a web address of their own, where customers can browse and fill a cart, and the order still ends up in WhatsApp.

I also built working storefronts. A generator uses the TsogaShop API to make a static storefront for any merchant. Each shop is just a site.json file plus the product catalogue the generator downloads, and it uses the same design system as the new landing page. The one below was made from TsogaShop’s demo restaurant.

Section 7 is Neema’s back office at 07:30 the same morning. The KES 2,310 there is the four orders from earlier on the page, the three paid before 07:00 plus Wanjiru’s mangoes. I wanted the numbers to add up if anyone checked.

I only used things TsogaShop has said publicly. For pricing, that means setup, maintenance, the back office and the WhatsApp integration are free, and the only fee shown is 5.5% of each sale, labelled as the rate in Kenya. Merchants in other countries are asked to get in touch for theirs. The testimonials are copied word for word from tsogashop.com.

It’s a single static page. There’s no framework or build step, and it doesn’t depend on any packages. Images are responsive WebP and the fonts are self-hosted subsets. The animations are about 16 KB of JavaScript, gzipped, and every one of them ends on exactly what the static page shows. So people without JavaScript, or with reduced motion turned on, still see every section in its finished state.

I test it with Playwright in WebKit and Edge, at widths from 320px to 1440px.

The showreel at the top, The Paid Morning, is also a web page. I animated it and recorded it at 1080p and 60 frames a second, with motion blur, and the music is generated in the browser. It’s eight bars at 128 BPM, which comes to exactly 15 seconds.