منجم ديلز: تصميم تطبيق مزادات للصفقات الجماعية لصالح Like Card

تصميم تطبيق مزادات منجم ديلز: انضمّ إلى الصفقة بالنقاط، وتابع امتلاء عدّاد المنضمّين، وزايد قبل انتهاء الوقت، وادفع بلمستين.

منجم ديلز تطبيق تسوّق لصالح Like Card مبني على الصفقات الجماعية. يُفتح المنتج للمشترين فينضمّون إليه بالنقاط، وحين يكتمل عدد المنضمّين تبدأ المزايدة المباشرة ويتحرّك السعر مع كل مزايدة حتى ينتهي العدّ التنازلي. صمّمت كنانيا التطبيق بالتعاون مع BIGBANG IT Solutions: تصميم تطبيق مزادات من 21 شاشة على Adobe XD، من شرائح الترحيب حتى الطلبات والإرجاع والتقييم.

بالتعاون مع

كل شاشات تطبيق منجم ديلز، مباشرة من ملف XD.

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

طريقة شراء جديدة تحتاج شرحاً قصيراً

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

عدّاد المنضمّين في كل صفحة صفقة

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

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

الدفع بلمستين

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

الطلبات والإرجاع والتقييم

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

القائمة والمواقع والإشعارات

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

الألوان والبطاقات في تصميم تطبيق مزادات منجم

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

تصميم تطبيق مزادات يبدأ بقواعد الصفقة

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

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

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

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

طريقتا شراء وتخطيط واحد

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

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

ما بعد الفوز بالصفقة

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

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

رحلة مستخدم من الترحيب حتى الشحن

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

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

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

الأفعال في متناول الإبهام

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

إشعارات تعيد المستخدم في وقتها

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

جاهز للعربية والإنكليزية

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

أرقام نراقبها بعد الإطلاق

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

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

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

نطاق العمل

• مسارات المستخدم: التعريف والتصفّح والانضمام والمزايدة والدفع والطلبات والإرجاع والحساب
• تصميم تطبيق مزادات من 21 شاشة على Adobe XD
• عدّاد المنضمّين والعدّادات التنازلية وبطاقات المزايدة المباشرة
• صفحات منتجات بسعر ثابت بالتخطيط نفسه
• ورقة دفع برصيد Like Card وApple Pay
• تفاصيل الطلب والتقييم والبلاغ والإرجاع بالصور
• القائمة والمواقع المحفوظة والإشعارات المجمّعة
• بالتعاون مع BIGBANG IT Solutions

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

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

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

أسئلة عن تصميم تطبيق مزادات