Mohamad DiabProduct UI/UX designer — home
All projects

Project 7 of 7: Product case study · Multi-market platform

PhoenixBigo

One identity, many markets: a top-up platform where a country is configuration, not a redesign.

Type
Product case study
Category
Multi-market platform
Role
End-to-end Product, UI/UX & Technical Lead
Year
2026
Platforms
Web, Mobile web
PhoenixBigo's homepage on three phones: the global English version, the Iraq market in Arabic and the Kurdistan market in Kurdish — one identity, three markets

Overview

PhoenixBigo is a live top-up platform for BIGO LIVE diamonds, built using commerce-engine technology developed through the BigoIraq project and re-founded around one idea: a single brand and a single design system that can serve several countries — and, in time, several services — without a separate design for each.

It serves a global default and three markets — Iraq, Kurdistan and Iran — in English, Arabic, Kurdish (Sorani) and Persian. BIGO LIVE and Likee are available; more services are announced as coming soon.

Live
phoenixbigo.com
Markets
Global, Iraq, Kurdistan, Iran
Languages
English, Arabic, Kurdish (Sorani), Persian
Themes
Dark and light

Context

Top-up platforms for apps like BIGO LIVE serve people across several countries, each with its own language, currency and ways to pay. The usual way to grow is a separately branded, separately designed site for every market — and with it, another brand and another design to maintain each time.

The challenge

One identity that stays whole everywhere, with each market supplying only what is genuinely local.

  • One master brand, never redesigned per country
  • A market supplies its flag, currency, services and payment methods — nothing else
  • Right to left and left to right, in four languages
  • Room for more services, without implying they exist yet

My role

End-to-end Product, UI/UX & Technical Lead. I took PhoenixBigo from A to Z: the domain and hosting, the product direction and the brand, the multi-market design system, the frontend and the backend, the country and services model, the four languages, deployment and launch — and the QA, troubleshooting and iterations since. AI-assisted development is part of how I build; the product, its decisions and its delivery are mine.

One identity, three markets

PhoenixBigo's global homepage in English: the phoenix hero artwork beside the headline “Top up BIGO LIVE diamonds in seconds”, with the market, language and theme controls in the header
Global, in English: the phoenix alone.
The same homepage for the Iraq market, in Arabic and right to left: the Iraq market artwork, the market named beside the headline, and the selector set to Iraq
Iraq, in Arabic: the market's own artwork, named beside the headline.
The same homepage for the Kurdistan market, in Kurdish (Sorani): the Kurdistan market artwork and the selector set to Kurdistan
Kurdistan, in Kurdish (Sorani): the same layout, the same brand.

Key decisions

  • A country is data, not a design

    A market is a row — its flag, currency, enabled services and payment methods — fed into fixed slots of one design system. Nothing produces a per-country stylesheet, template or branch of code: adding a market is configuration.

  • Never guess a flag

    A visitor's market is detected only when it matches a market that is enabled. Kurdistan isn't a country code, so it's recognised from regional location data — and when that data is missing, the visitor is simply in Iraq. With no match, the page shows the master identity alone: a flag is never a placeholder.

  • The mark keeps its direction

    The phoenix is never mirrored for right-to-left languages. In the market selector, the flag sits at the logical end of the label — on the left in Arabic, Kurdish and Persian, on the right in English — just before the chevron.

  • Available first, coming soon second

    BIGO LIVE gets a prominent card with a working action. Services that aren't offered yet sit in a quieter block, marked coming soon, with no purchase path behind them.

  • Dark bookends, a light middle

    The theme switch remaps only the content surfaces — cards, borders and ink. The header, hero, sidebar and footer stay dark in both themes, so the brand's frame never changes.

  • Money keeps its own colours

    Payment-provider badges keep their own colours instead of the brand's orange: functional colour stays independent of brand colour, in every theme and market.

“A platform that grows with you”: BIGO LIVE as the prominent available service, Likee available, and PUBG, Cocco and Ligo marked coming soon
The services layer: BIGO LIVE first, Likee available, and the services still to come, marked as such.

The Phoenix system

Ember orange carries every action, on a calm, dark ground with warm ink. The phoenix is drawn as a head in silhouette and ships as one set: the symbol, a flat version, the favicon, app icons, and wordmarks for dark and light. A market's flag is a contextual accent beside it, never part of the mark.

  • Phoenix#FF6A3D
  • Phoenix hover#FF8B63
  • Phoenix pressed#D6501F
  • Base#0E0E10
  • Card#17171A
  • Ink#F4F2ED
The PhoenixBigo phoenix mark in its orange-to-ember gradient, large on the dark ground, then as an app icon on dark and on light, and at 48, 32 and 16 pixels
The phoenix mark, at display, app-icon and favicon sizes.

Dark and light

PhoenixBigo's packages in the dark theme: a grid of equal tiles from 10 to 25,000 diamonds priced in USDT, with Packages and Custom diamonds as two tabs
The same packages in the light theme: white tiles on a warm light surface, the same orange prices and actions
DarkLight

Four languages, one system

Arabic, English, Kurdish (Sorani) and Persian share one dictionary of interface strings. Persian was brought to full parity with the other three — 472 strings, from navigation to checkout, the legal pages and the payment-proof flow — so it never falls back to Arabic.

The localization audit was done in the rendered pages, not only in the code. It found, among other things, a support button whose label stayed Arabic in every language, and an admin sign-in page that never loaded its translations.

Across screens

Checked in a real browser from 360 to 1440px, in all four languages, dark and light, with no horizontal overflow. On a phone the market selector moves into the menu, so the wordmark never has to shrink, and the layout respects the safe areas of an installed web app.

PhoenixBigo's global homepage in English: the phoenix hero artwork beside the headline “Top up BIGO LIVE diamonds in seconds”, with the market, language and theme controls in the header
Desktop
PhoenixBigo on a phone, in English: the headline, two full-width actions and the start of the packages
Mobile

Implementation

A Node.js and Express backend over MySQL, with a framework-free JavaScript frontend. Countries, services and which service is available where are data in the database, so the frontend renders a market from its row. A visitor's market comes from IP location, matched only against enabled markets. The admin signs in with Google only, and is granted access by an existing account, never created on the way in; email notifications carry the PhoenixBigo brand.

  • Node.js
  • Express
  • MySQL
  • JavaScript
  • Country & services data model
  • IP-based market detection
  • Google sign-in
  • Email notifications
  • Installable web app

Launch and operation

PhoenixBigo runs on its own domain, with the site, the admin and the API on separate addresses, and fully isolated: its own database, its own process, its own web-server configuration, certificate and sessions. Deploys are scripted, with health checks and rollback, and each one is checked again in a real browser — which is how, among other things, a broken admin script path was caught right after a release.

Where it stands

PhoenixBigo is live. The country layer serves its first markets, and the services layer already holds BIGO LIVE and Likee, with others announced but not yet sold — each new market or service is meant to arrive as configuration, inside the same identity.