Available for collaboration العربية

UI/UX · Celestial · 2026

A high-end store that is simple to buy from.

Celestial makes cold-air diffusers and the scents that go in them, sold across Saudi Arabia. I redesigned and rebuilt its store around three goals: read as the high-end brand it is, take a shopper from first look to paid in as few steps as possible, and make the moments around paying feel like part of the product.

Visit celestial.sa

Role
Founder, designer & builder
Product
Diffusers and scents
Platform
Next.js on Cloudflare, Medusa
Languages
Arabic and English

Three goals, in this order.

  1. Read as high-end

    The diffuser is made to sit in view, on a desk or in a car. The store needed the same restraint: one object per screen, real photography, quiet type, and nothing that looks like a template.

  2. Make buying simple

    Fewer decisions between seeing a product and paying for it. The price is on the first screen, adding to the bag is one tap from anywhere, and checkout asks only for what delivery needs.

  3. Delight where it counts

    Motion only where it carries meaning: the menus, the address that becomes a shipping label, the order that arrives as a parcel ticket. Everywhere else, the store stays still.

One page, and no way into it.

Until 2025 Celestial ran on Shopify. The home page was a single scroll: a lifestyle photo, a brand statement, two cards for Essences and Vessels, and a footer. The header held the logo, the cart and a language picker, but no menu.

So every product sat behind a category card, and nothing on the first screen named a product or a price. It looked calm, but it asked the shopper to go looking.

The Shopify home page in August 2025: a woman beside the diffuser with an Arabic headline, a brand statement, Essences and Vessels cards, and a dark footer
The same page on a phone: the photo fills the screen under a logo, cart and language bar

celestial.sa in August 2025, from the Internet Archive.

The first screen names the product and its price.

The diffuser stands on a plinth with its name and price tagged beside it, and the tag goes straight to its page. The rest is one line, one sentence and one link. A high-end page earns its calm by leaving things out, so the tag does the selling.

The header gained a menu, and the menu carries the offer: Bundles shows its saving in the bar itself, before anyone opens it.

The home page on desktop: the menu with Vessels, Scents, Bundles marked Saving 16%, Explore and About us, above the hero
The home page on a phone: the headline above the diffuser, with its price tag at the bottom of the screen

Add to bag, from anywhere on the page.

Photography carries the diffuser’s page. It opens on a run of photos drifting slowly right to left, which you can also drag or flick, pinned while the page slides up over it.

Add to bag comes along the whole way down: first in a band under the photos with the name and price, then, once the page’s own button has scrolled past, in a bar floating at the bottom of the screen. Wherever you stop, buying is one tap away. On a phone the bar sits under the thumb, and steps aside while the page’s own Add to bag is on screen, and again for the footer.

Recorded on celestial.sa. The scrolling is sped up.

A scent needs the diffuser to use it in, so each scent’s page offers Vessel 01 in the same card: pick it, and one Add to bag covers both. Tabby and Tamara show the monthly price right under the button, where the decision is made.

The Lyra scent page: name, notes and price, the bottle, and a card offering to add Vessel 01 above Add to bag

An address that becomes a shipping label.

Celestial’s address step is drawn as the label that will go on the parcel: who and where on the white part, when and what on the black band. A Saudi short address fills it in, and saving locks it in place so payment can take over underneath. If a detail is missing or wrong, the field says what to fix right where it is, and the Continue bar says how many need attention.

Press Continue to payment, then switch to Before to compare.

Celestial

Secure

Back to cart

Let’s address your parcel

Enter the 4-digit code we sent to +966 55 123 4567

Resend in 0:30
RRRD
2929

From: Celestial, Riyadh

Country

Saudi Arabia

Route

—

Estimated delivery
Service
Standard delivery · Free
Parcel
2 items
From
Celestial, Riyadh
Short address—

We deliver anywhere in Saudi Arabia. Shipping abroad? Contact us

Desktop · scroll inside, then Continue to payment

Celestial

Secure

Back to cart

Let’s address your parcel

Enter the 4-digit code we sent to +966 55 123 4567

Resend in 0:30
RRRD
2929

From: Celestial, Riyadh

Country

Saudi Arabia

Route

—

Estimated delivery
Service
Standard delivery · Free
Parcel
2 items
From
Celestial, Riyadh
Short address—

We deliver anywhere in Saudi Arabia. Shipping abroad? Contact us

Secure payment · SSL encrypted · 100% safe

Phone · the summary folds to one row above the label, and Continue stays pinned to the bottom, in reach of a thumb.

Press Continue to payment on either screen, or Replay.

    Rebuilt from the shipped checkout and from the one before it. The lookup, SMS and map are simulated; the timings are the real ones.

    Paid, without a change of scene.

    Paying sends a shopper through the bank and back to a page that confirms the order, then on to the order itself. Celestial draws the light around the screen on one stage that outlasts both pages, so the change of page happens underneath it. The shipping label from checkout arrives, and its black band tears off to become the tracking stub. If the bank says no, the same page turns orange and says why, that nothing was charged, and what to try next, with a way straight back to payment.

    Press Pay, and watch the label tear into a tracking stub. Then try a declined card.

    Secure

    Payment

    Pay by card, or split it with Tabby or Tamara.

    • Pay DirectlyPay now with Mada, Visa, Mastercard, or Apple PayInstant
    • Pay later with TabbyNo interest. No late fees. Shariah compliant.Pay in 4
    • TamaraMonthly payments. Sharia-compliant.in 4 payments

    TotalSAR 303.90

    Sample order. Nothing is charged.

    Desktop · press Pay to run it live. Click or press a key during the arrival to skip to the end, as on the live site.

    Secure

    Payment

    Pay by card, or split it with Tabby or Tamara.

    • Pay DirectlyPay now with Mada, Visa, Mastercard, or Apple PayInstant
    • Pay later with TabbyNo interest. No late fees. Shariah compliant.Pay in 4
    • TamaraMonthly payments. Sharia-compliant.in 4 payments

    TotalSAR 303.90

    Sample order. Nothing is charged.

    Phone · the tear has its own tuning: 14 smaller holes instead of 24, a 1.3s pull instead of 0.4s, and the stub lands 16px below instead of 32px. With only 8px beside the stub, its swing is cut so the corner never leaves the screen.

    Press Pay on either screen, or Replay.

      Rebuilt from the shipped order page. The bank’s 3-D Secure step is left out and its wait is scripted at 2.4s. The orb is a canvas stand-in for the shipped WebGL ball; the timings are the real ones. A declined card shows the shipped message for a card without enough balance.

      Each step was designed again for a phone.

      • The header opens into the menu

        On a phone the bar is a card over the hero, and the menu grows out of it instead of sliding in from the side.

      • Buying stays under the thumb

        Add to bag is pinned to the bottom on product pages, and so is Continue in checkout, where the order summary folds to one row.

      • The label tears more slowly

        With 8px beside the stub, the phone tear has its own tuning, and its swing is cut so the corner never leaves the screen.

      • A smaller glow

        The light around the screen reaches 116px in, not 200px, and the green of a confirmed payment is fainter, as a band covers more of a small screen.

      The home page, top to bottom.

      One scroll through the home page on a laptop and on a phone: Carry the Calm, the three ways in, the Vessel and its scents, the rooms it was made for, the Voyager box, the questions, and the wordmark over the desert at the end.

      Recorded from the store as it runs today. The scrolling is sped up.

      What it runs on.

      Storefront

      Commerce

      Let’s talk product design ↗ Back to top ↑