Case study 01 — Flagship

Rebuilding FirstCry’s product page, and the bilingual system under it.

Where parents in the UAE and Saudi Arabia decide what to buy, redesigned in English and Arabic on a Figma system I built from scratch.

5M+Monthly active users

10Product pages: 5 templates, English and Arabic

5+Teams on the Figma library

2Markets: UAE and KSA

Role: Lead Product Designer
Company: FirstCry Middle East
Languages: English + Arabic (RTL)
Platforms: iOS + Android

The redesigned FirstCry product page in English: a full-bleed product photo, floating search, wishlist and share buttons, and a size chip beside Add to Cart

The same product page in Arabic, mirrored right to left, with the size chip and Add to Cart swapped sides

The problem

01 — Why rebuild

The page looked older than the market it competed in, and the library under it had drifted.

Components differed by category, in a legacy Adobe XD library.

Competitive comparison across seven PDP dimensions and four platforms
Dimension	Old FirstCry	Noon	Namshi	Mumzworld
Aesthetics	✕No	✓Yes	✓Yes	✕No
Product visuals	✕No	✓Yes	✓Yes	✓Yes
PDP navigation	✕No	✓Yes	✕No	✕No
Information structure	✕No	✓Yes	✓Yes	✕No
Mobile UX	✕No	✓Yes	✓Yes	✓Yes
Trust signals	✕No	✓Yes	✕No	✓Yes
Variant selection	✕No	✕No	✓Yes	✕No

Fig. 01 — Competitor teardown with the PMs

Before and after

02 — The page

Less between the shopper and the choice: the product first, the size in the button bar.

The redesigned product page: the product photo fills the top of the screen, and the fixed bar holds the size chip and Add to Cart — AfterThe photo leads; the size rides beside Add to Cart.

Fig. 02 — Different products, same job

Up close

03 — Three decisions

Three parts carry the purchase, so they got the most work.

Motion — scroll, tap the size, add. The bar never leaves.

A — Variant selector

Size and colour on one sheet

Out-of-stock options stay visible, marked rather than hidden.

Size and colour bottom sheet: three colour swatches, one marked out of stock, size chips from 3–6 M to 4–6 Y with unavailable sizes dashed, a price-varies notice and Add to Cart

B — Fixed add to cart

The size rides with the button

Changing size never means scrolling back up.

Two states of the fixed bar: a 5–6 Yrs size chip beside a magenta Add to Cart button, and a disabled state with a 0–22 Yr chip and a grey button

C — Reviews on the page

Proof before the price

Ratings on the page, not behind a tab, with one-tap translation.

Ratings and reviews block: a 4.5 star average from 653 reviews, a five-bar distribution, a rate-this-product row, and a review with a Translate to Arabic link

Who it was for

04 — Personas

Four parents, reading the same page for different reasons.

Personas built from PM research and product data

SarahWorking mother, 32

Wants the button fixed at the bottom, and speed.

OmarFather, engineer, 35

Skips marketing for specs and the warranty.

FatimaExpecting mother, 28

Opens every section; reads reviews before the price.

AmiraStay-at-home mother, 30

Trusts other parents’ photos, and shares the link.

English and Arabic

05 — Bilingual by design

Arabic was drawn as its own layout, not flipped at the end.

Layout, carousels and arrows mirror; prices and Latin brand names stay left to right.

Motion — each language arrives in its own reading direction

The top of the full English product page: gallery, title, price, colour, style and size selectors, pay-later and offers — English — left to right

The same section of the Arabic product page, mirrored right to left, with the same components in reversed order — Arabic — right to left

The same system carried the rest of the app.

All Categories screen in English: age tabs for Baby, Kid and Tween, and a grid of category tiles

All Categories screen in Arabic, mirrored, with the same tiles and tabs

Fig. 05 — All Categories, English and Arabic

The system

06 — Design system

One Figma library, built from scratch in both languages, adopted by 5+ teams.

55Type tokens: 29 English, 26 Arabic

66Colour primitives: 6 ramps × 11 steps

7Core colour roles

100+Icons

English

Nunito Four roles

Arabic

Noto Sans Arabic Same roles, taller lines

Core colours

Mulberry #D32E9B · primary
Cerulean Blue #1F61F1 · accent
Apple Green #27A63F · positive
Selective Yellow #F7B929 · warning
Coral Red #F73C3C · error
Black #000000 · primary
White #FFFFFF · primary

English type scale: Display sizes in Nunito Bold, from XLarge 48/68 downwards, each with its token name — Type — English

Arabic type scale: Display sizes in Noto Sans Arabic Bold, with taller line heights than the English scale — Type — Arabic

Colour primitives: six ramps (mulberry, blue, green, yellow, red, gray), eleven steps each from 950 to 50, plus black and white — Colour — 66 primitives

Mobile number field with a UAE country selector in small, medium and large, laid out left to right — Phone field — English

The same mobile number field in its Arabic version, with the country selector moved to the right — Phone field — Arabic

Icons

From Adobe XD to Figma

07 — Adoption

Developers moved with the library, so I wrote them a guide.

In the file: playing prototypes, exporting assets, reading properties.
Around it: walkthroughs of libraries, components and handoff.

Guide page one, Starter Guide: the device size used, how to export icons, and where the prototype and export controls are in Figma — Guide 1

Guide page two: the Properties panel annotated for developers, and the file's pages, Guide, Designs and Flow — Guide 2

Trade-offs, and a dropped idea

08 — Four calls

Four calls, and what each one cost.

01

Size in the fixed bar

GainedChoice and commitment in one place.

CostLess button width; long sizes must fit a chip.

02

Trust details in sheets

GainedAnswers without leaving the product.

Cost13 sheets, in two languages.

03

Pay-later on the page

GainedInstalments beside the price.

CostA busier top of page.

04

Arabic drawn, not auto-mirrored

GainedRTL checked screen by screen.

Cost53 English frames, 46 Arabic.

Dropped

A new primary colour

A 60-30-10 study tried two new magentas. The system kept the brand’s own: Mulberry, #D32E9B.

Outcome

09 — What it left behind

A product page in two languages, and the library later pages are built from.

Five PDP templates, in English and Arabic, with their states.
One Figma library, adopted by 5+ teams, replacing Adobe XD.

What I’d do differently

MeasureAgree success metrics with the PMs at kick-off, and keep them in the file.

WebDesign desktop in the same pass, not after mobile.

ArabicFinish the Arabic set: some inputs exist only in English.

HandoffMove the guide into Dev Mode notes on each component.

Also on Behance

10 — Companion board

The same story as a board:

View the Behance board ↗

Next — 02

Shoppi — grocery delivery →