بوبازونا: موقع لمحلات شاي البوبا والجيلاتو في أريزونا.

المشكلة

بوبازونا محل لشاي البوبا والجيلاتو بدأته عائلة شابة في مدينة غوديير بولاية أريزونا. وافتتح فروعاً أخرى منذ ذلك الحين، ويعرض امتيازه التجاري على من يريد فرعاً خاصاً به. وقبل الزيارة الأولى يريد العميل أن يعرف ما في القائمة، وكيف يختار مشروبه على ذوقه، وأي فرع أقرب إليه، وهل هو مفتوح الآن. ومن يفكر في الامتياز يريد أن يرى العلامة أولاً.

ما بنيناه

موقع يجيب عن هذه الأسئلة قبل الزيارة الأولى، على الهاتف كما على الحاسوب.

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

كيف بنيناه

الموقع مبني بـ Angular وTypeScript، ويُعرض من الخادم عبر Angular Universal على Express، وكل صفحاته مُعدّة مسبقاً، فتصل إلى المتصفح بصيغة HTML جاهزة. ويرتّبه Angular Material وBootstrap للحاسوب والهاتف، مع قائمة جانبية على الهاتف، والصور بصيغة WebP. ويُرسَل نموذج الملاحظات عبر إيميل جي إس، وتقرأ لافتة «مفتوح» أو «مغلق» في صفحة كل فرع الوقت في أريزونا من متصفح الزائر. وبعد الإطلاق، نُشرت الفروع الجديدة والمواعيد المعدّلة في إصدارات جديدة من الموقع نفسه.

النتيجة

يجد عملاء بوبازونا القائمة، وأقرب فرع إليهم، وهل هو مفتوح الآن، في موقع واحد على الهاتف أو الحاسوب. وظل الفريق يحدّثه عامين مع افتتاح الفروع وتغيّر المواعيد.

دورنا

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