أوسكار: تصميم تطبيق توصيل مياه بالعربية، من حجم الكرتونة إلى السائق على الباب

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

أوسكار علامة مياه معبّأة من شركة السقاية في موريتانيا. يطلب زبائنها الكراتين نفسها مرة بعد مرة، غالباً لبيت أو مكتب، ويريدون أن يعرفوا متى يصل السائق. صمّمت كنانيا تطبيق الطلب لأوسكار بالتعاون مع BIGBANG IT Solutions: تصميم تطبيق توصيل مياه عربي من اليمين لليسار في 13 شاشة على Adobe XD، يأخذ الزبون من اختيار حجم الكرتونة حتى متابعة السائق وهو يقترب من بابه.

بالتعاون مع

كل شاشات تطبيق أوسكار، مباشرة من ملف XD.

شاهد الشاشات الـ١٣

طلب المياه شراء متكرّر

لا أحد يتصفّح بحثاً عن الماء، ولهذا يتجاوز تصميم تطبيق توصيل مياه أوسكار منطق الكتالوج في تطبيقات السوبرماركت، فتعرض الشاشة الرئيسية المنتجات الأربعة بطاقاتٍ كبيرة: كراتين من 24 قارورة بحجم 0.33 و0.50 لتر، وكراتين من 12 قارورة بحجم 0.75 و1.5 لتر، ولكل منها سعرها بالأوقية. يضيف زرّا الزائد والناقص على البطاقة كراتين دون فتح صفحة أخرى، وتُظهر شارة صغيرة عدد ما في السلة، ويعرض شريط في الأسفل مجموع السلة في سطر واحد. ولأن المنتجات الأربعة كلها ظاهرة معاً دون تمرير، يُنهي الزبون الدائم طلبه من الرئيسية نفسها ولا يحتاج إلى فتح أي صفحة أخرى إلا السلة. والزخرفة الوحيدة لافتة تحمل العلامة وعبارتها «مياه نقية لحياة صحية».

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

الدفع عند الاستلام أو بالبطاقة

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

تتبّع مباشر باسم السائق ورقمه

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

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

التسجيل برقم واتساب

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

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

الألوان والخط في تصميم تطبيق توصيل مياه أوسكار

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

كتالوج صغير وعادة أسبوعية

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

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

الانتظار جزء من تصميم تطبيق توصيل مياه

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

ولأن الطلب يمرّ بأربع مراحل واضحة، رُسم الخط الزمني بعلامات مكتملة للمراحل المنجزة، ونقطة بارزة للمرحلة الحالية، وعلامات فارغة لما لم يحدث بعد. نظرة واحدة تكفي الزبون ليعرف أين طلبه دون أن يقرأ سطراً.

الإشعارات بدل المكالمات

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

تصميم على مقاس السوق الموريتاني

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

العربية أولاً، وثلاث لغات في الإعدادات

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

الأسعار والرسوم أمام الزبون

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

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

مكوّنات واحدة تتّسع لمنتجات أخرى

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

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

رحلة الزبون خطوة بخطوة

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

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

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

أرقام تُقرأ بعد الإطلاق

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

ما استلمه فريق التطوير

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

نطاق العمل

• مسارات المستخدم: التصفّح والسلة والدفع والتتبّع والطلبات والتسجيل والحساب
• تصميم تطبيق توصيل مياه في 13 شاشة على Adobe XD بالعربية ومن اليمين لليسار
• بطاقات منتجات بأحجام الكراتين والكميات والأسعار بالأوقية
• الدفع عند الاستلام وبالبطاقة
• تتبّع مباشر للطلب بخط زمني وخريطة وسائق وملخّص
• التحقّق عبر واتساب وإذن الموقع
• إعدادات الحساب بثلاث لغات للواجهة
• بالتعاون مع BIGBANG IT Solutions

مشاريع وخدمات ذات صلة

• تجربة المستخدم والمنتجات الرقمية، بحث ومسارات وواجهات للتطبيقات والمنصات
• برمجة المواقع والتطبيقات، من التصميم إلى منتج يعمل
• سوق متعدد البائعين، تطبيق للعملاء ولوحة إدارة

تخطّط لتطبيق توصيل أو طلبات؟ أرسل وصفاً موجزاً ونردّ عليك بخطة للشاشات.

أسئلة عن تصميم تطبيق توصيل مياه