متجر فاخر يسهُل الشراء منه.

تصنع سيليستيال ناشرات عطر تعمل بالهواء البارد والعطور التي تُستخدم فيها، وتبيعها في أنحاء السعودية. أعدتُ تصميم متجرها وبناءه حول ثلاثة أهداف: أن يظهر بمظهر العلامة الفاخرة التي هي عليها، وأن ينقل المتسوّق من النظرة الأولى إلى إتمام الدفع بأقل عدد من الخطوات، وأن تبدو اللحظات المحيطة بالدفع جزءًا من المنتج نفسه.

الدور
مؤسس ومصمم ومطوّر
المنتج
ناشرات العطر والعطور
المنصة
Next.js على Cloudflare، وMedusa
اللغات
العربية والإنجليزية

ثلاثة أهداف، بهذا الترتيب.

  1. أن يبدو فاخرًا

    صُمّم الناشر ليكون على مرأى العين، على مكتب أو في سيارة. واحتاج المتجر إلى القدر نفسه من الاتزان: قطعة واحدة في كل شاشة، وصور حقيقية، وخط هادئ، ولا شيء يبدو كقالب جاهز.

  2. أن يكون الشراء بسيطًا

    قرارات أقل بين رؤية المنتج ودفع ثمنه. السعر في الشاشة الأولى، والإضافة إلى السلة بلمسة واحدة من أي مكان، وصفحة الدفع لا تطلب إلا ما يحتاجه التوصيل.

  3. إمتاع في المواضع المهمة

    الحركة فقط حيث تحمل معنى: القوائم، والعنوان الذي يتحول إلى ملصق شحن، والطلب الذي يصل على هيئة تذكرة طرد. وفي ما عدا ذلك يبقى المتجر ساكنًا.

صفحة واحدة، بلا مدخل إليها.

حتى عام 2025 كانت سيليستيال تعمل على Shopify. كانت الصفحة الرئيسية تمريرًا واحدًا: صورة من الحياة اليومية، وعبارة عن العلامة، وبطاقتان للعطور والناشرات، ثم التذييل. وكان الشريط العلوي يضم الشعار والسلة واختيار اللغة، دون قائمة.

فكان كل منتج مختبئًا خلف بطاقة فئة، ولم يكن في الشاشة الأولى ما يذكر منتجًا أو سعرًا. بدت الصفحة هادئة، لكنها تركت المتسوّق يبحث بنفسه.

الصفحة الرئيسية على Shopify في أغسطس 2025: امرأة بجانب الناشر مع عنوان عربي، وعبارة عن العلامة، وبطاقتا العطور والناشرات، وتذييل داكن
الصفحة نفسها على الجوال: الصورة تملأ الشاشة تحت شريط الشعار والسلة واللغة

celestial.sa في أغسطس 2025، من أرشيف الإنترنت.

الشاشة الأولى تذكر المنتج وسعره.

يقف الناشر على قاعدة وبجانبه وسم باسمه وسعره، والوسم يأخذك مباشرة إلى صفحته. وما تبقى سطر واحد وجملة واحدة ورابط واحد. الصفحة الفاخرة تكسب هدوءها بما تتركه، فيتولى الوسم مهمة البيع.

وأصبح للشريط العلوي قائمة تحمل العرض: تُظهر الباقات نسبة التوفير في الشريط نفسه، قبل أن يفتحها أحد.

الصفحة الرئيسية على سطح المكتب: القائمة بالناشرات والعطور والباقات مع وسم «توفير 16%»، و«استكشف» و«من نحن»، فوق الواجهة
الصفحة الرئيسية على الجوال: العنوان فوق الناشر، ووسم السعر أسفل الشاشة

«أضف إلى السلة» من أي مكان في الصفحة.

الصور هي ما يحمل صفحة الناشر. تبدأ بشريط من الصور ينساب ببطء من اليمين إلى اليسار، ويمكنك أيضًا سحبه أو دفعه، ويبقى ثابتًا بينما تنزلق الصفحة فوقه.

يرافقك زر «أضف إلى السلة» طوال الطريق: أولًا في شريط تحت الصور مع الاسم والسعر، ثم في شريط عائم أسفل الشاشة بعد أن يتجاوز التمرير زر الصفحة نفسه. فأينما توقفت، يكون الشراء على بعد لمسة. وعلى الجوال يقع الشريط تحت الإبهام، ويتنحّى حين يظهر زر الصفحة نفسه على الشاشة، ثم عند التذييل.

مسجّل على celestial.sa، والتمرير مسرَّع.

العطر يحتاج إلى ناشر ليُستخدم فيه، لذلك تعرض صفحة كل عطر الناشر Vessel 01 في البطاقة نفسها: اختره، وتكفي ضغطة واحدة على «أضف إلى السلة» للاثنين. وتعرض تابي وتمارا القسط الشهري تحت الزر مباشرة، حيث يُتخذ القرار.

صفحة عطر Lyra: الاسم والمكونات والسعر، والقارورة، وبطاقة تعرض إضافة Vessel 01 فوق زر «أضف إلى السلة»

عنوان يصبح ملصق شحن.

خطوة العنوان في سيليستيال مرسومة على هيئة الملصق الذي سيوضع على الطرد: من وأين في الجزء الأبيض، ومتى وماذا في الشريط الأسود. يملؤه العنوان الوطني المختصر، وحفظه يثبّته في مكانه ليظهر الدفع تحته. وإن كانت إحدى البيانات ناقصة أو خاطئة، يذكر الحقل ما يجب تصحيحه في مكانه، ويذكر شريط «المتابعة» عدد ما يحتاج إلى انتباه.

اضغط 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
Short address
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

سطح المكتب · مرّر داخل الصفحة، ثم اضغط 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
Short address
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

الجوال · ينطوي الملخص في صف واحد فوق الملصق، ويبقى زر المتابعة ثابتًا في الأسفل، في متناول الإبهام.

اضغط Continue to payment في أيٍّ من الشاشتين، أو أعد التشغيل.

    أُعيد بناؤه من صفحة الدفع المنشورة ومن التي سبقتها. البحث عن العنوان والرسائل النصية والخريطة محاكاة، أما التوقيتات فهي الحقيقية.

    دُفع الثمن، دون أن يتغير المشهد.

    الدفع يأخذ المتسوّق إلى البنك ثم يعيده إلى صفحة تؤكد الطلب، ثم إلى الطلب نفسه. ترسم سيليستيال الضوء حول الشاشة على مسرح واحد يبقى بعد الصفحتين، فيحدث الانتقال بين الصفحات تحته. ويصل ملصق الشحن من صفحة الدفع، وينفصل شريطه الأسود ليصبح قسيمة التتبع. وإن رفض البنك، تتحول الصفحة نفسها إلى البرتقالي وتذكر السبب، وأنه لم يُخصم أي مبلغ، وما يمكن تجربته بعد ذلك، مع طريق مباشر للعودة إلى الدفع.

    اضغط Pay وشاهد الملصق ينفصل ليصبح قسيمة تتبع. ثم جرّب بطاقة مرفوضة.

    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.

    سطح المكتب · اضغط Pay لتشغيله مباشرة. انقر أو اضغط أي مفتاح أثناء الوصول للقفز إلى النهاية، كما في الموقع.

    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.

    الجوال · للتمزق ضبط خاص: 14 ثقبًا أصغر بدلًا من 24، وسحب يستغرق 1.3 ثانية بدلًا من 0.4، وتستقر القسيمة على بعد 16px بدلًا من 32px. ولأن بجانب القسيمة 8px فقط، يُقلَّص تأرجحها حتى لا تخرج زاويتها من الشاشة.

    اضغط Pay في أيٍّ من الشاشتين، أو أعد التشغيل.

      أُعيد بناؤه من صفحة الطلب المنشورة. حُذفت خطوة التحقق 3-D Secure من البنك، ومدة انتظارها مبرمجة على 2.4 ثانية. والكرة نسخة بديلة مرسومة على canvas للكرة المنشورة بتقنية WebGL، أما التوقيتات فهي الحقيقية. وتعرض البطاقة المرفوضة الرسالة المنشورة لبطاقة رصيدها غير كافٍ.

      كل خطوة صُمّمت من جديد للجوال.

      • الشريط العلوي ينفتح ليصبح القائمة

        على الجوال يكون الشريط بطاقة فوق الواجهة، وتنمو القائمة منه بدلًا من أن تنزلق من الجانب.

      • الشراء يبقى تحت الإبهام

        زر «أضف إلى السلة» مثبّت في الأسفل في صفحات المنتجات، وكذلك زر المتابعة في صفحة الدفع، حيث ينطوي ملخص الطلب في صف واحد.

      • الملصق ينفصل بتمهل أكبر

        لأن بجانب القسيمة 8px فقط، للتمزق على الجوال ضبط خاص، ويُقلَّص تأرجحها حتى لا تخرج زاويتها من الشاشة.

      • توهج أصغر

        يمتد الضوء حول الشاشة 116px إلى الداخل بدلًا من 200px، ويكون أخضر الدفع المؤكد أخفت، لأن الشريط يغطي جزءًا أكبر من الشاشة الصغيرة.

      الصفحة الرئيسية من أولها إلى آخرها.

      تمريرة واحدة في الصفحة الرئيسية على حاسوب محمول وعلى جوال: «Carry the Calm»، والمداخل الثلاثة، والناشر وعطوره، والأماكن التي صُنع لها، وصندوق Voyager، والأسئلة، ثم شعار العلامة فوق الصحراء في الختام.

      سُجّل من المتجر كما يعمل اليوم، والتمرير مسرَّع.

      ما يعمل عليه.

      واجهة المتجر

      نظام التجارة