Mohamad DiabProduct UI/UX designer — home
All projects

Project 6 of 7: Product case study · Commerce storefront

BigoIraq

A storefront for BIGO LIVE diamonds in Iraq, designed Arabic-first around the ways people there can actually pay.

Type
Product case study
Category
Commerce storefront
Role
End-to-end Product, UI/UX & Technical Lead
Year
2026
Platforms
Web, Mobile web
The BigoIraq storefront in Arabic on a desktop browser and on a phone: the Iraqi flag with the Takbir beside the headline “Top up BIGO LIVE coins in seconds… without complication”

Overview

BigoIraq is a live web storefront where people in Iraq buy BIGO LIVE diamonds — the in-app currency viewers send as gifts to streamers, and streamers top up for themselves. It is Arabic-first, with English and Kurdish (Sorani), and designed for the phone first.

Its promise is mechanical rather than decorative: once a payment is confirmed, the order is fulfilled automatically through a live supplier integration, instead of waiting for someone to process it by hand.

Live
bigoiraq.com
Market
Iraq
Languages
Arabic (default), English, Kurdish (Sorani)
Platform
Web, mobile-first; installable

Context

On BIGO LIVE, viewers buy diamonds to send to streamers as gifts. In Iraq, many of them can't easily pay with an international card, and buying from an informal reseller on social media usually means a person processing every order by hand. The payment methods people actually have — AsiaCell and Zain Iraq recharge cards — matter as much as the catalogue.

The challenge

Build a storefront people in Iraq can trust with their money, and that delivers without a person in the loop.

  • Let people pay with what they have, without a card
  • Deliver automatically the moment a payment is confirmed
  • Read naturally right to left, and on a phone first
  • Give the team a safe way to review the payments that need a person
BigoIraq's homepage in Arabic, right to left: the flag on the start side, the headline and two actions — start topping up, and how it works — in gold and graphite
The storefront in Arabic: the real flag, once, in the hero; gold for the one thing to do next.

My role

End-to-end Product, UI/UX & Technical Lead. I took BigoIraq from A to Z: the domain and hosting, the product plan and its rules, the UX and the visual identity, the frontend and the backend, the payment and supplier integrations, the three languages, deployment and launch — and the testing, troubleshooting and iterations since. AI-assisted development is part of how I build; the product, its decisions and its delivery are mine.

From order to diamonds

Two ways to pay share one destination. A wallet payment is confirmed on the spot; a recharge card is checked by the team first and credited to the wallet. Either way, the same fulfilment step delivers the diamonds — confirming a payment is what triggers it.

  1. Choose a package or an amount
  2. Enter your Bigo ID
  3. Pay from the wallet balance
  4. Or fund the wallet first with an AsiaCell or Zain Iraq card
  5. The team checks the card's proof and credits the wallet
  6. Diamonds delivered automatically
“From order to diamonds in seconds”: four numbered steps in Arabic — choose the package, enter your Bigo ID, complete the payment, receive instantly

Key decisions

  • Recharge cards fund a wallet; they never pay for diamonds directly

    An AsiaCell or Zain Iraq card tops up the customer's site wallet, after the team checks a proof screenshot; diamonds are always bought from the wallet, as a separate step. Every order is paid the same way, whatever funded it, and a card is checked once, by a person, without holding up an order.

  • Packages or a custom amount — one switch decides

    The catalogue runs either as fixed packages or as a custom diamond amount, never both at once. The team sets the mode for the whole site and can override it for a single customer. The live site currently runs in custom-amount mode.

  • Prices in Iraqi dinars, set rather than calculated

    Customer prices are dinar values set explicitly, not figures derived from an exchange rate at runtime: a price a customer sees is a price someone decided on.

  • Every package on equal footing

    Package tiles share one size and one weight — no featured tile — so customers compare on the numbers, not on emphasis.

  • Every order belongs to an account

    No guest checkout: customers sign in with email and password or with Google, so every order can be traced and supported.

BigoIraq's order card in custom-amount mode, in Arabic: a number of diamonds or an amount in Iraqi dinars, and a gold “Top up now” button
Custom-amount mode, live: a number of diamonds or a price in dinars, and one gold action.
BigoIraq's payment methods in Arabic: wallet balance, Zain Iraq and Asiacell, each marked as available now
The payment methods as a customer sees them: the wallet, Zain Iraq and Asiacell.

Calm ground, Iraqi colours

The design system's north star: calm and trustworthy first, premium second — on a product that moves people's money, decoration loses to clarity.

  • Gold is the only colour that means “click me”. Every real action, and text on gold is always dark.
  • The flag is literal, once. The real flag appears in the hero and nowhere else — never tiled, never a motif.
  • Status colours aren't brand colours. Each order stage — paid, processing, awaiting review, completed, refunded — has its own colour, so the team can read a queue at a glance.
  • Each typeface has one job. Cairo for headlines, prices and diamond counts; Tajawal for reading; Reem Kufi only for the Takbir in the flag.
  • Gold#D4AF37
  • Base#0E0E10
  • Card#17171A
  • Ink#F4F2ED
  • Flag red#A32D2D
  • Takbir green#14603A
The BigoIraq mascot mark, large on the product's dark ground, then as an app icon on dark and on light, and at 48, 32 and 16 pixels
The mascot mark, at display, app-icon and favicon sizes.

Right to left, first

Arabic is the default reading direction, and the layout is built around it. In the hero the flag takes the start side and the copy the end side — defined by direction, not by left and right — so the English version mirrors itself without a second layout. Kurdish (Sorani), the third language, reads right to left too.

BigoIraq's homepage in Arabic, right to left: the flag on the start side, the headline and two actions — start topping up, and how it works — in gold and graphite
Arabic, right to left — the default.
The same homepage in English, left to right: the composition mirrored, with the flag on the other side and the headline “Top up BIGO LIVE diamonds in seconds”
English, left to right: the same composition, mirrored by direction.

Across screens

Designed for the phone first: the two actions take the full width, and the header keeps only what a thumb needs — the menu, the account and a direct way to top up. The site is installable as a web app.

BigoIraq's homepage in Arabic, right to left: the flag on the start side, the headline and two actions — start topping up, and how it works — in gold and graphite
Desktop
BigoIraq on a phone, in Arabic: the headline, two full-width actions, and the start of the packages section
Mobile

Implementation

A Node.js and Express backend over MySQL, with a framework-free JavaScript frontend. Fulfilment calls the supplier's API the moment a payment is confirmed; USDT payments are integrated through NOWPayments; customers can sign in with Google.

Payments that need a person meet a separate admin, with roles to match: the owner has full access, and every other capability — approving or declining a payment, managing staff, reading the audit log — is a permission granted one at a time. Approving and declining run as single, locked operations, so a payment approved twice is still delivered once, and every administrative action is written to an audit log. The admin isn't shown here: it's private, and it holds real customers' data.

  • Node.js
  • Express
  • MySQL
  • JavaScript
  • Google sign-in
  • NOWPayments (USDT)
  • Supplier API

Launch and operation

BigoIraq runs on its own domain, with the storefront, the admin and the API on separate addresses and separate customer and admin sessions. Database changes are written so they can be re-applied safely on every deploy, and new features are tested end to end on the live system before customers rely on them. Every change since launch is recorded in a dated changelog — features, fixes and the decisions behind them.

Where it stands

BigoIraq is live at bigoiraq.com: an Arabic-first storefront in three languages, paid for with the methods people in Iraq have, and fulfilled automatically once a payment is confirmed.