القوى الدافعة للتصميم - دراسة حالة لإعادة تصميم موقع الويب

ما هو الوقت الأنسب لإعادة تصميم موقع الويب؟

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

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

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

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

تجديد موقع على شبكة الإنترنت لشركة سيارات

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

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

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

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

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

لماذا إعادة تصميم موقع شركة السيارات هذه؟

تتوسع شركة Rimac Automobili ، ووفقًا للمنشورات الرسمية ، هناك سيارة مفهوم جديدة تسمى "Concept_One" قيد الإنتاج بالفعل. في وقت إعادة تصميم هذا الموقع غير المفوض ، لم يعرض موقعهم الإلكتروني سوى سيارة واحدة ، "C_Two". لم يكن هناك تنوع بصري — تم إنشاء موقع الويب من نموذجين لذا بدت كل صفحة متشابهة جدًا. ركز التصميم على صور كبيرة وجذابة للسيارة دون أي شيء آخر لتوضيح جودة السيارة C_Two - المعلومات الأساسية اللازمة لتوجيه زوار الموقع نحو قرار شراء السيارة.

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

يجب أن يبرز تصميم موقع الويب الرائع في بحر من المواقع المماثلة

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

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

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

نطاق المستهلك المتوسط ​​(فولكس فاجن ، تويوتا ، بيجو ، وما إلى ذلك) له هيكل محتوى موقع مشابه جدًا للأمثلة الأكثر تطورًا المذكورة أعلاه. يتمثل الاختلاف الأكبر بين ماركات السيارات الاستهلاكية عالية الجودة ومتوسطة المدى في السعر - لذلك يتوقع المرء أن يكون لشركة Rimac بسياراتها الراقية موقع ويب متميز من أجل عكس هذا الاختلاف وإبراز علامتها التجارية باهظة الثمن.

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

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

استهداف مشتري السيارات المتميزين بتصميم موقع رائع

يجب على أي موقع أن يأخذ بعين الاعتبار مستخدميه. من هو الجمهور المستهدف لهذا النوع من السيارات؟ ما الذي يبحثون عنه؟

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

تحليل معمارية المعلومات

على موقع الويب الخاص بنا كمثال ، يمكننا أن نرى أن عنصر التنقل الأول كان "Concept_One" (في ذلك الوقت ، كان المنتج الوحيد للشركة). تم تحديث الموقع الحقيقي منذ ذلك الحين. عنصر الملاحة الثاني هو تطور الشركة وكيف تم إنتاج السيارة ، أما العنصر الثالث فهو منتجات الشركة وخدماتها. عنصر الملاحة الرابع هو منتج آخر للشركة (دراجات كهربائية Greyp). العنصران الأخيران هما "صحفي" يحتويان على بيانات صحفية و "المدونة" ، ولا يعد أي منهما مفيدًا بشكل خاص حيث تم نشر معظم أخبارهما على الشبكات الاجتماعية.

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

عملية إعادة تصميم الموقع

الصورة الرئيسية للصفحة الرئيسية قبل وبعد

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

تصميم الصفحة الرئيسية

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

استراتيجية المحتوى والتصميم

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

العملية بسيطة:

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

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

إعادة تصميم التنقل في الموقع

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

لتوفير وصول فوري إلى صفحة المنتجات الثانوية من الصفحة الرئيسية ، تقرر أنه من أجل الكفاءة بدلاً من إنشاء صفحة قوائم منتجات أخرى (على صفحة ويب أخرى) ، يمكن دمج المنتجات وفئاتها الفرعية في الصفحة الرئيسية كمنطقة قائمة منسدلة وجعلها جزءًا من التنقل. يُظهر التصميم أدناه العديد من المنتجات المعروضة كرموز على الصفحة الرئيسية عندما ينقر الزائرون على المنتجات في قائمة التنقل. بالنسبة لعروض المنتجات ثلاثية الأبعاد التي تشير إلى المستويات الثانية ضمن المنتجات ، أوصي بـ Three.js و WebGL و Canvas و Greensock لأنها أدوات معروفة وموحدة.

الصفحات الثانوية ضمن إعادة تصميم الموقع

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

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

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

خاتمة

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

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

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

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

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

• • •

مزيد من القراءة على مدونة Toptal Design:

• أساسيات إعادة تصميم الموقع - دراسة حالة
• العائد الحقيقي على الاستثمار لتجربة المستخدم: دراسات حالة حول إعادة تصميم B2B
• إخراج ايكيا من صندوقها وإعادة تصميمها لـ 1.6 مليار مستخدم
• دعنا نعيد تصميم Facebook: 10 أفكار ملهمة لتبدأ
• كيف يجب تصميم CrunchBase