دراسة حالة في تصميم تجربة مستخدم: منصة تأجير سيارات وتطبيق الدفع ODA وسوق موّن

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

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

منصة تأجير السيارات

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

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

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

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

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

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

تطبيق الدفع ODA

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

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

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

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

سوق موّن

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

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

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

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

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

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

GamerX، منتج آخر بنمط السوق

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

منهج واحد في تصميم تجربة مستخدم لثلاثة منتجات

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

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

جداول للموظف وبطاقات للعميل

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

لكل مستخدم شاشته

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

من تدفقات المستخدم إلى التسليم للمطوّرين

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

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

نظام تصميم واحد لثلاثة منتجات

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

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

العربية والإنكليزية في تصميم تجربة مستخدم واحد

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

وفي الواجهة العربية ينتقل الشعار وتبويبات الفئات إلى الجهة اليمنى كما في متجر موّن، وتبقى الأسعار بالأرقام نفسها في اللغتين، فلا يقرأ العميل السعر بطريقتين مختلفتين.

بعد الإطلاق

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

نطاق العمل

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

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

من أعمالنا وخدماتنا

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

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