تصميم تجربة وواجهة المستخدم · سيليستيال · 2026
متجر فاخر يسهُل الشراء منه.
تصنع سيليستيال ناشرات عطر تعمل بالهواء البارد والعطور التي تُستخدم فيها، وتبيعها في أنحاء السعودية. أعدتُ تصميم متجرها وبناءه حول ثلاثة أهداف: أن يظهر بمظهر العلامة الفاخرة التي هي عليها، وأن ينقل المتسوّق من النظرة الأولى إلى إتمام الدفع بأقل عدد من الخطوات، وأن تبدو اللحظات المحيطة بالدفع جزءًا من المنتج نفسه.
زيارة celestial.sa (يُفتح في تبويب جديد)
- الدور
- مؤسس ومصمم ومطوّر
- المنتج
- ناشرات العطر والعطور
- المنصة
- Next.js على Cloudflare، وMedusa
- اللغات
- العربية والإنجليزية
ثلاثة أهداف، بهذا الترتيب.
أن يبدو فاخرًا
صُمّم الناشر ليكون على مرأى العين، على مكتب أو في سيارة. واحتاج المتجر إلى القدر نفسه من الاتزان: قطعة واحدة في كل شاشة، وصور حقيقية، وخط هادئ، ولا شيء يبدو كقالب جاهز.
أن يكون الشراء بسيطًا
قرارات أقل بين رؤية المنتج ودفع ثمنه. السعر في الشاشة الأولى، والإضافة إلى السلة بلمسة واحدة من أي مكان، وصفحة الدفع لا تطلب إلا ما يحتاجه التوصيل.
إمتاع في المواضع المهمة
الحركة فقط حيث تحمل معنى: القوائم، والعنوان الذي يتحول إلى ملصق شحن، والطلب الذي يصل على هيئة تذكرة طرد. وفي ما عدا ذلك يبقى المتجر ساكنًا.
صفحة واحدة، بلا مدخل إليها.
حتى عام 2025 كانت سيليستيال تعمل على Shopify. كانت الصفحة الرئيسية تمريرًا واحدًا: صورة من الحياة اليومية، وعبارة عن العلامة، وبطاقتان للعطور والناشرات، ثم التذييل. وكان الشريط العلوي يضم الشعار والسلة واختيار اللغة، دون قائمة.
فكان كل منتج مختبئًا خلف بطاقة فئة، ولم يكن في الشاشة الأولى ما يذكر منتجًا أو سعرًا. بدت الصفحة هادئة، لكنها تركت المتسوّق يبحث بنفسه.
celestial.sa في أغسطس 2025، من أرشيف الإنترنت.
الشاشة الأولى تذكر المنتج وسعره.
يقف الناشر على قاعدة وبجانبه وسم باسمه وسعره، والوسم يأخذك مباشرة إلى صفحته. وما تبقى سطر واحد وجملة واحدة ورابط واحد. الصفحة الفاخرة تكسب هدوءها بما تتركه، فيتولى الوسم مهمة البيع.
وأصبح للشريط العلوي قائمة تحمل العرض: تُظهر الباقات نسبة التوفير في الشريط نفسه، قبل أن يفتحها أحد.
«أضف إلى السلة» من أي مكان في الصفحة.
الصور هي ما يحمل صفحة الناشر. تبدأ بشريط من الصور ينساب ببطء من اليمين إلى اليسار، ويمكنك أيضًا سحبه أو دفعه، ويبقى ثابتًا بينما تنزلق الصفحة فوقه.
يرافقك زر «أضف إلى السلة» طوال الطريق: أولًا في شريط تحت الصور مع الاسم والسعر، ثم في شريط عائم أسفل الشاشة بعد أن يتجاوز التمرير زر الصفحة نفسه. فأينما توقفت، يكون الشراء على بعد لمسة. وعلى الجوال يقع الشريط تحت الإبهام، ويتنحّى حين يظهر زر الصفحة نفسه على الشاشة، ثم عند التذييل.
مسجّل على celestial.sa، والتمرير مسرَّع.
العطر يحتاج إلى ناشر ليُستخدم فيه، لذلك تعرض صفحة كل عطر الناشر Vessel 01 في البطاقة نفسها: اختره، وتكفي ضغطة واحدة على «أضف إلى السلة» للاثنين. وتعرض تابي وتمارا القسط الشهري تحت الزر مباشرة، حيث يُتخذ القرار.
عنوان يصبح ملصق شحن.
خطوة العنوان في سيليستيال مرسومة على هيئة الملصق الذي سيوضع على الطرد: من وأين في الجزء الأبيض، ومتى وماذا في الشريط الأسود. يملؤه العنوان الوطني المختصر، وحفظه يثبّته في مكانه ليظهر الدفع تحته. وإن كانت إحدى البيانات ناقصة أو خاطئة، يذكر الحقل ما يجب تصحيحه في مكانه، ويذكر شريط «المتابعة» عدد ما يحتاج إلى انتباه.
اضغط Continue to payment، ثم انتقل إلى «قبل» للمقارنة.
سطح المكتب · مرّر داخل الصفحة، ثم اضغط Continue to payment
الجوال · ينطوي الملخص في صف واحد فوق الملصق، ويبقى زر المتابعة ثابتًا في الأسفل، في متناول الإبهام.
اضغط Continue to payment في أيٍّ من الشاشتين، أو أعد التشغيل.
دُفع الثمن، دون أن يتغير المشهد.
الدفع يأخذ المتسوّق إلى البنك ثم يعيده إلى صفحة تؤكد الطلب، ثم إلى الطلب نفسه. ترسم سيليستيال الضوء حول الشاشة على مسرح واحد يبقى بعد الصفحتين، فيحدث الانتقال بين الصفحات تحته. ويصل ملصق الشحن من صفحة الدفع، وينفصل شريطه الأسود ليصبح قسيمة التتبع. وإن رفض البنك، تتحول الصفحة نفسها إلى البرتقالي وتذكر السبب، وأنه لم يُخصم أي مبلغ، وما يمكن تجربته بعد ذلك، مع طريق مباشر للعودة إلى الدفع.
اضغط Pay وشاهد الملصق ينفصل ليصبح قسيمة تتبع. ثم جرّب بطاقة مرفوضة.
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.
Confirming your payment…
Creating your order
Please keep this page open.
Your bank declined the payment: there isn’t enough balance on the card. You haven’t been charged. Try another card, or split the total with Tabby or Tamara.
Paid. We’re getting your parcel ready.
Paid · SAR 303.90 · 29 Oct 2026
Confirmation sent to sample@example.comOrder Cel123429 October 2026
Sample Customer
1234 Sample Street
Al Olaya, Riyadh 12345
Saudi Arabia
Mobile: +966 55 000 0000
Email: sample@example.com
This is the address on your parcel.
Route
RUH
Riyadh
Status
Preparing your parcel
Estimated deliveryMon 2 Nov – Mon 9 Nov
OrderCel1234
-
Paid (done)
29 Oct 2026
-
Preparing (current step)
We’re packing your order with care.
-
Handed to the courier (upcoming)
Your parcel is with the courier.
-
Out for delivery (upcoming)
The courier is on the way to you.
-
Delivered (upcoming)
Delivered to the address above.
- Service
- Standard delivery
- Parcel
- 2 items
We’ll text you the tracking link when it ships.
Items

Starter Kit
Vessel + 2 essencesSAR 189.00

Lyra
20 mlSAR 84.90
TotalSAR 303.90
Payment
MethodMada
Payment statusPaid
سطح المكتب · اضغط Pay لتشغيله مباشرة. انقر أو اضغط أي مفتاح أثناء الوصول للقفز إلى النهاية، كما في الموقع.
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.
Confirming your payment…
Creating your order
Please keep this page open.
Your bank declined the payment: there isn’t enough balance on the card. You haven’t been charged. Try another card, or split the total with Tabby or Tamara.
Paid. We’re getting your parcel ready.
Paid · SAR 303.90 · 29 Oct 2026
Confirmation sent to sample@example.comOrder Cel123429 October 2026
Sample Customer
1234 Sample Street
Al Olaya, Riyadh 12345
Saudi Arabia
Mobile: +966 55 000 0000
Email: sample@example.com
This is the address on your parcel.
Route
RUH
Riyadh
Status
Preparing your parcel
Estimated deliveryMon 2 Nov – Mon 9 Nov
OrderCel1234
-
Paid (done)
29 Oct 2026
-
Preparing (current step)
We’re packing your order with care.
-
Handed to the courier (upcoming)
Your parcel is with the courier.
-
Out for delivery (upcoming)
The courier is on the way to you.
-
Delivered (upcoming)
Delivered to the address above.
- Service
- Standard delivery
- Parcel
- 2 items
We’ll text you the tracking link when it ships.
Items

Starter Kit
Vessel + 2 essencesSAR 189.00

Lyra
20 mlSAR 84.90
TotalSAR 303.90
Payment
MethodMada
Payment statusPaid
الجوال · للتمزق ضبط خاص: 14 ثقبًا أصغر بدلًا من 24، وسحب يستغرق 1.3 ثانية بدلًا من 0.4، وتستقر القسيمة على بعد 16px بدلًا من 32px. ولأن بجانب القسيمة 8px فقط، يُقلَّص تأرجحها حتى لا تخرج زاويتها من الشاشة.
اضغط Pay في أيٍّ من الشاشتين، أو أعد التشغيل.
كل خطوة صُمّمت من جديد للجوال.
الشريط العلوي ينفتح ليصبح القائمة
على الجوال يكون الشريط بطاقة فوق الواجهة، وتنمو القائمة منه بدلًا من أن تنزلق من الجانب.
الشراء يبقى تحت الإبهام
زر «أضف إلى السلة» مثبّت في الأسفل في صفحات المنتجات، وكذلك زر المتابعة في صفحة الدفع، حيث ينطوي ملخص الطلب في صف واحد.
الملصق ينفصل بتمهل أكبر
لأن بجانب القسيمة 8px فقط، للتمزق على الجوال ضبط خاص، ويُقلَّص تأرجحها حتى لا تخرج زاويتها من الشاشة.
توهج أصغر
يمتد الضوء حول الشاشة 116px إلى الداخل بدلًا من 200px، ويكون أخضر الدفع المؤكد أخفت، لأن الشريط يغطي جزءًا أكبر من الشاشة الصغيرة.
الصفحة الرئيسية من أولها إلى آخرها.
تمريرة واحدة في الصفحة الرئيسية على حاسوب محمول وعلى جوال: «Carry the Calm»، والمداخل الثلاثة، والناشر وعطوره، والأماكن التي صُنع لها، وصندوق Voyager، والأسئلة، ثم شعار العلامة فوق الصحراء في الختام.
سُجّل من المتجر كما يعمل اليوم، والتمرير مسرَّع.
ما يعمل عليه.
واجهة المتجر
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
- Lenis
نظام التجارة
- Medusa