إعادة تصميم موقع الويب الخاص بي منخفض التكلفة والذي أدى إلى زيادة معدلات التحويل بنسبة 42٪ في 7 أسابيع

نشرت: 2021-08-19

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

هنا الحاجة. كان معدل التحويل جيدًا دائمًا (> 3٪). ومتجري على الإنترنت ينمو بأرقام مزدوجة كل عام فلماذا تهز القارب؟

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

مرحبا جميعا. أفكر في إعادة تصميم الموقع ، لكن معدل التحويل الحالي لا يزال جيدًا. هل أحتاج إلى تحديثه الآن؟ وهل تعتقد أنه سيء ​​بما يكفي لدرجة أنني بحاجة إلى إصلاحه اليوم؟ هل يمكنني تأجيلها سنة أخرى؟

كانت الإجابات التي تلقيتها مؤلمة للغاية لسماعها.

  • يبدو أن موقع الويب هذا قد تم تصميمه في التسعينيات. إذا قمت بإعادة التصميم ، أراهن أنه يمكنك الحصول على زيادة بنسبة 50٪ في معدل التحويل. - مايك جاكيس
  • أنت تدير دورة؟ لن آخذ فصلك إذا رأيت هذا. - كيفن ستيكو
  • هذه هي أنواع المواقع التي أحب شرائها وإصلاحها ثم إعادة بيعها بربح. - دانا جونزيميس

سماع هذه التعليقات يؤذي كبريائي حقًا وحاولت جهدي ألا أكون دفاعيًا.

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

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

لقد خصصت ميزانية تبلغ حوالي 6 أسابيع لإنجاز إعادة التصميم معي ، وأساهم بحوالي 40 ساعة من وقتي. تم إعادة تصميم كل صفحة على الموقع بالكامل.

بشكل عام ، انتهى المشروع بأخذ 7 أسابيع بسبب ظروف غير متوقعة مع توافق المتصفح (أنا أكرهك IE!) وكلفني 1840 دولارًا .

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

احصل على دورة تدريبية مصغرة مجانية حول كيفية بدء متجر تجارة إلكترونية ناجح

إذا كنت مهتمًا ببدء عمل تجاري إلكتروني ، فقد جمعت مجموعة شاملة من الموارد التي ستساعدك على إطلاق متجرك عبر الإنترنت من نقطة الصفر. تأكد من الاستيلاء عليها قبل أن تغادر!

جدول المحتويات

نتائج إعادة تصميم موقع الويب الخاص بي

رسم بياني

نتائج التحويل التالية مخصصة للجوّال وسطح المكتب والجهاز اللوحي لزيارات تكلفة النقرة من Google فقط .

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

  • زادت معدلات تحويل سطح المكتب بنسبة 46٪ محدث!
  • زادت معدلات تحويل المحمول بنسبة 21٪ محدث!
  • زادت معدلات تحويل الجهاز اللوحي بنسبة 25٪ محدث!

ملاحظة: تمت مقارنة بيانات معدل التحويل الخاصة بي بالفترة نفسها تمامًا مثل العام السابق لإزالة المتغيرات مثل الموسمية والتقلبات في الطلب.

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

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

( تحديث: بعد بضعة أشهر من البيانات الإضافية ، بلغت الزيادة في معدل التحويل لسطح المكتب 46٪)

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

( تحديث: بعد بضعة أشهر من البيانات الإضافية ، زادت نسبة التحويل للأجهزة اللوحية بنسبة 25٪.)

وبالنسبة للجوال ، فقد قمت بالفعل بتنفيذ موقع جوّال لائق جدًا في عام 2013 ، لذا لم أكن أتوقع أي قفزات كبيرة ولكن لا تزال نسبة 12٪ جيدة جدًا.

( تحديث: بعد بضعة أشهر من البيانات الإضافية ، بلغت الزيادة في معدل التحويل للجوال 21٪.)

على أي حال ، على الرغم من الزيادة في معدل التحويل ، لم تكن كل البيانات وردية. لسبب ما ، زادت المقاييس الخاصة بي في الموقع مثل معدل الارتداد بنسبة 10٪ تقريبًا في جميع المجالات.

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

ما هي عربة التسوق التي أستخدمها؟

عربة التسوق

السؤال الأكثر شيوعًا الذي يسألني دائمًا مع كل إعادة تصميم هو ...

ستيف ما هذه عربة التسوق؟ هل هو Shopify؟ أم أنها تجارة كبيرة؟

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

هنا الحاجة…

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

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

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

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

على سبيل المثال لإعادة تصميم هذا الموقع ، قمت بتطبيق هذه الميزة الاجتماعية الصغيرة الأنيقة لمتجري. بشكل أساسي كل 5-15 ثانية ، تنبثق نافذة صغيرة في الزاوية اليسرى السفلية تعرض عملية شراء سابقة تم إجراؤها على الموقع.

يخطر

في Shopify ، يمكنك شراء مكون إضافي للقيام بنفس الشيء بالضبط ودفع 15 دولارًا في الشهر. ولكن استغرق الأمر مني ما يقرب من 5 ساعات (كان يجب أن يستغرق الأمر ساعتين حقًا ولكن ترميزي كان صدئًا) لضخ نفس الشيء بدون رسوم متكررة .

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

ولكن إذا كنت جاهلًا بتصميم الويب ولا تريد التعامل مع أي شيء تقني ، فانتقل إلى Shopify أو BigCommerce.

تغيير نظام الألوان

لوحة الألوان

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

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

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

على أي حال باختصار ، استخدمت موقعًا يسمى color.adobe.com لاختيار ألوان تكميلية لتصميمي الجديد. ولتجديد الشكل والمظهر ، اخترت البط البري والوردي الساخن والأصفر.

لماذا 3 ألوان؟ ذلك لأنني أردت لونًا محددًا مرتبطًا بـ "اتخاذ إجراء". أردت لونًا محددًا "لجذب الانتباه". وأخيرًا ، أردت لونًا إجماليًا ساطعًا لجعل الموقع يشعر "بالشباب والورك".

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

تم تصميم كل صفحة على موقعي بحيث يكون لها هدف واحد.

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

أركان التحويل الثلاثة

أعمدة

أحد الأخطاء الكبيرة التي أرى أن الناس يرتكبونها عند تصميم مواقع الويب الخاصة بهم هو أنهم يحاولون نسخ Amazon.com . Amazon هي أكبر منصة للتجارة الإلكترونية على هذا الكوكب ، فلماذا لا أقوم بتصميم موقعي على غرار موقعهم؟

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

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

بشكل عام ، هناك ثلاثة أشياء رئيسية مهمة لأي شخص يهبط على موقعك لأول مرة.

أولاً ، عليك إعلام الناس بأنك تقدم شحنًا مجانيًا. نوع من عروض الشحن المجاني الآن على قدم المساواة مع الدورة التدريبية بفضل Amazon ومتاجر التجارة الإلكترونية الكبيرة الأخرى.

ثانيًا ، نظرًا لأنك كيان غير معروف ، فأنت تريد طمأنة العملاء إلى أنه يمكنهم إعادة بضائعهم إذا لم يكونوا راضين.

وأخيرًا ، الشيء الثالث الذي يجب أن تنشئه مع عميل جديد هو الثقة التي ربما تكون أهم عامل لهم جميعًا.

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

لإعادة تصميمي ، أفرض الثقة بعدة طرق مختلفة.

في رأس كل صفحة ، أؤكد على الشحن المجاني ، ولا يوجد أي متاعب للعودة ورقم هاتفي. إن وجود رقم هاتف في العرض العادي أمر مهم جدًا!

رأس

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

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

كما أن وجود "ساعات عمل رسمية في المتجر" يجعل متجرك يبدو أكثر احترافًا لأنك تصادف مثل شركة قائمة بساعات مكتبية "حقيقية".

إثبات اجتماعي وثقة

صحافة

في أسفل كل صفحة ، لدي قسم مخصص للدليل الاجتماعي الذي يضفي على مصداقية موقعي.

بعد كل شيء ، تم تمييزنا في مجموعة كاملة من المجلات المختلفة وكنا في برنامج Today ، فما الفائدة إذا لم نتفاخر به؟

يوجد قسم الدليل الاجتماعي / الإشارات الصحفية في كل صفحة من صفحات الموقع ، لذا حتى إذا لم تره في المرة الأولى ، فستلاحظ ذلك في النهاية.

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

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

اشترت شيري زبون معين أكثر من مائة وخمسين مرة من موقعنا لأنها تحب حقًا مناديلنا.

الشهادات - التوصيات

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

الرضا مضمون

تغيير الملاحة

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

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

ولكن هنا كانت معضلتي ...

إذا كنت سأقوم بتضمين عمود أيسر مخصص للتنقل ، فسيتعين تقليص كل شيء آخر على الموقع.

على سبيل المثال ، يجب تقليل جميع صور منتجي بشكل كبير مما قد يؤثر سلبًا على التحويلات .

ستكون صور فئتي أصغر مما يؤدي إلى خفض نسبة النقر إلى الظهور .

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

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

ومن خلال تحريك التنقل إلى الأعلى ، تمكنت من تفجير صور فئتي ومنتجاتي بنسبة 300٪ مما جعلها تنبثق حقًا.

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

شريط التنقل

على سبيل المثال ، لدي الآن فئة "تسوق حسب المناسبة" قائمة منسدلة لأسفل بينما في تصميمي القديم ، كان هذا القسم مختلطًا مع بقية القائمة اليسرى لذا لم يبرز.

لقد أضفت أيضًا قسمًا خاصًا مخصصًا للسلع الشخصية ، وأفضل البائعين ، والوافدين الجدد ، وصفحة الأسئلة الشائعة ، وصفحة الاتصال ، وصفحة حول ، وعرض عربة التسوق وتسجيل المغادرة.

في الأساس ، جميع عناصر التنقل الأكثر أهمية موجودة الآن في الشريط الرئيسي ليراها الجميع.

التأكيد على عرض القيمة الفريدة الخاص بي

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

لماذا يجب أن يشتري شخص ما من متجرك؟ لماذا يجب أن أتسوق هنا على عكس منافس؟ يجب أن تكون الإجابة واضحة على الفور.

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

على سبيل المثال في الصفحة الأولى ، عرض القيمة الخاص بنا هو صفعة صحيحة داخل صورة البداية.

موقع ذو قيمة

في صفحات الفئات الخاصة بنا ، قمت بتنفيذ مربع نص خاص للتعبير عن سبب تميز متجرنا.

عرض قيمة الفئة

الهدف النهائي هو إقناع العميل خلال الثواني الخمس الأولى لماذا يجب أن يشتري منك وليس من منافس.

تجميل صفحات المنتج

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

هذه صفحة منتج من التصميم القديم.

صفحة propduct القديمة

ها هي نفس الصفحة تبدو على موقعي الجديد.

صفحة منتج جديد

هل تلاحظ أي اختلافات؟ أولاً ، لأنني قمت بإزالة الشريط الجانبي الأيسر ، تمكنت من زيادة حجم صورة المنتج بنسبة 266٪ .

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

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

الشحن مجانا

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

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

شيء واحد مثير للاهتمام هو أنه كان لدي في الأصل زرين ضخمين باللونين الأزرق والأحمر لمشاركتهما على Facebook و Pinterest أسفل الصورة كما هو موضح أدناه.

أزرار اجتماعية كبيرة

لكنني قررت في النهاية إزالتها لأنها تميزت أكثر من الزر الوردي "إضافة إلى عربة التسوق". في النهاية ، أقدر إجراء "إضافة إلى عربة التسوق" أكثر بكثير من مشاركة الوسائط الاجتماعية.

أخيرًا ، قمت أيضًا بزيادة حجم قسم البيع المتقاطع لإغراء العميل بشراء سلع مماثلة.

بيع عبر

تحسين الخروج

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

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

تسجيل الدخول القديم

كان حل هذه المشكلة هو إخفاء تسجيل الدخول افتراضيًا وعرض زرين ورديين فقط لإتمام عملية الدفع .

لقد جعلت أيضًا شعارات الثقة أكثر وضوحًا لطمأنة العميل بأن عملية الدفع آمنة وأن رضاهم مضمون.

الخروج الجديد

كان التغيير الرئيسي الآخر هو أنني جعلت عملية الدفع مستجيبة تمامًا .

ملاحظة: إذا كنت في Shopify ، فمن المحتمل أنك رأيت بالفعل كيف تبدو عملية الخروج سريعة الاستجابة.

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

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

لسطح المكتب ...

الخروج من سطح المكتب

للجهاز اللوحي والجوال

الخروج من الجهاز اللوحي

بضع كلمات عن الجوال

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

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

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

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

على سبيل المثال ، اضطررت إلى اختبار IE 8 و 9 و 10 و 11 لأجهزة Windows. اضطررت إلى اختبار Safari 6 و 7 و 8 لأجهزة Mac.

في النهاية ، قمت بمراجعة حساب Google Analytics الخاص بي لإجراء اختبار قابلية الاستخدام لكل متصفح تم استخدامه على موقعي في العام الماضي باستخدام أداة تسمى Browser Stack.

وغني عن القول ، أن هذه العملية امتدت وكانت أقل جزء مفضل لدي في إعادة التصميم :(

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

على الجهاز اللوحي والجوال ، قمت بتغيير القائمة إلى الانهيار إلى قائمة منسدلة واحدة.

قائمة المحمول

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

شريط البحث

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

تغييرات Pinterest

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

نتيجة لذلك ، أعدت تمامًا معظم الصور الحرفية وصنعت إصدارات خاصة طويلة ونحيفة من أجل Pinterest فقط . لقد صنعت أيضًا صورًا جديدة تمامًا لصور منتجاتنا أيضًا.

على سبيل المثال ، بدلاً من استخدام صورة مستطيلة لـ Pinterest عند النقر فوق الزر "دبوس" ، يمكنك الآن الحصول على نسخة طويلة ونحيفة عالية الدقة.

صورة بينتيريست

استنتاج

الكل في الكل ، 7 أسابيع و 1840 دولارًا هي استثمار جيد جدًا لتحقيق المكاسب التي أحققها الآن. مشكلتي الرئيسية الآن هي أن لدي العديد من المشاريع الجارية في وقت واحد ولا يوجد وقت كافٍ للعمل على كل منها.

ولكن هذا هو الشيء ...

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

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

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