سنتيرا: متجر عطور في مصر، بالعربية أولاً.

المشكلة

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

ما بنيناه

متجر يبدأ من الشخص لا من الزجاجة: بالعربية أولاً، وبإنجليزية كاملة مثلها.

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

كيف بنيناه

كتبنا الخطة قبل أي سطر كود: الفكرة، وكل صفحة، وقواعد المكتشف، والنصوص باللغتين، والهوية وحركتها. ثم بنينا المتجر ولوحة التحكم وواجهة البرمجة من الصفر، في ثلاثة أجزاء. المتجر ولوحة التحكم مبنيان بـ Next.js، ولا يتصل بواجهة البرمجة إلا خادماهما، وهي مبنية بـ NestJS على PostgreSQL. والزجاجة مرسومة في Blender بنسب الزجاجة الحقيقية، وتجري حكايتها بـ CSS، فلا ترسل البطاقة أي سكربت.

النتيجة

صارت سنتيرا تبيع من متجرها الخاص بالعربية والإنجليزية، بعد أن كانت تبيع عبر الرسائل فقط.

دورنا

خططنا له وبنيناه: الهوية والمتجر ولوحة التحكم وواجهة البرمجة.