كيف أعدنا التصميم 90 Seconds.com أن تكون أكثر استدامة

كيف أعدنا تصميم 90Seconds.com لنكون أكثر استدامة - ولماذا

ونسل سيبيتشي
منذ 2 سنوات・5 دقيقة قراءة

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

من الواضح أننا ، كشركات تكنولوجيا ، لدينا مهمة لتصميم وتطوير منتجات أكثر استدامة.

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

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

وهكذا بدأنا في تصميم ...

التحدي

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

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

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

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

ال 90 Seconds واجه فريق التصميم التحديات التالية:

تصميم وتطوير 90seconds.com الجديدة لتكون أكثر استدامة.
تعكس أحدث إرشاداتنا المرئية مع الحفاظ على 90 Seconds تبدو وتشعر سليمة.
فهم سوقنا والأشخاص الحقيقيين فيه.

التقدم المحرز

استغرق تصميم وتطوير 90seconds.com الجديد بالكامل ما يقرب من عام. بالنظر إلى التصاميم المفاهيمية والمسودات الأولى ، فإن الجدول الزمني الكامل أقرب إلى سنوات 2.

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

يدويا edit، واقتصاص المحتوى المرئي وتحسينه.
استخدم التقنيات عبر الإنترنت مثل Cloudinary API لتحقيق التوازن بين الجودة وحمولة البيانات.

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

نحن نستخدم Figma كأداة تصميم أساسية لدينا ونبني تصميماتنا حول نظام تصميم يتكون من أكثر من 10,000 مكون عالمي و 500+ تخطيطات و 7 أنظمة تملي على بعضها البعض وآلاف المكونات المستقلة وأشكالها. مثل قطع اللغز ، فإنها تنشئ تخطيطات متعددة الأغراض نستخدمها لبناء منصتنا. بينما نستعد لبعض التغييرات الكبيرة على منصتنا في عام 2022 ، سيلعب نظام التصميم الخاص بنا دورا مهما في ضمان تجربة مستخدم سلسة.

النتيجة

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

دعونا نرى بعض قبل وبعد المقارنات:

نحن نستخدم العديد من البرامج والمنصات عبر الإنترنت لحساب تأثيرنا ، مثل GTmetrix و Pingdom و WebsiteCarbon. نظرا لأن نتائج الاختبار ليست هي نفسها دائما ، فإننا نستخدم الأرقام المتوسطة. ها هم أولاء:

	جميتريكس	بينغدوم
قبل	F - أداء بنسبة 35٪	د- حجم الصفحة الرئيسية: 10،65MB
بعد	أ - أداء 95٪	أ- حجم الصفحة الرئيسية: 2,4MB

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

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

الموقع الإلكترونيكربون

جميتريكس

ملخص

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