90Seconds.com'u daha sürdürülebilir olması için nasıl yeniden tasarladık - ve neden

İçerik tablosu
  1. Giriş
  2. Meydan Okuma
  3. İlerleme
  4. Sonuç
  5. Özet
Bağlantı kopyalandı!
Öncel Cebeci
2 yıl önce ・5 dakika oku

Son on yılda, çevrimiçi girişimlerin ve ürünlerin küresel enerji tüketiminde en önemli oyunculardan biri haline geldiği gerçeğiyle başlayalım. İnternetin küresel kaynaklar üzerindeki etkisi Sanayi Devrimi ile karşılaştırılabilir ve büyümeye devam ettikçe, önümüzdeki beş yıl içinde internetin tek başına dünya kaynaklarının %20'sini tüketeceğini tahmin ediyoruz.

Teknoloji şirketleri olarak daha sürdürülebilir ürünler tasarlamak ve geliştirmek gibi bir misyonumuz olduğu açıktır.

Kuruluşumuzdan bu yana, 90 Seconds iş modelinin tamamını daha sürdürülebilir olmak üzerine tasarladık. Shoot Anywhere gibi çözümlerle seyahat maliyetlerini ve karbon ayak izini azaltırken, markalarımızın istedikleri her yerde video içeriği oluşturmalarını sağlıyoruz.

Mantıklı olan bir sonraki adım, aynı yaklaşımı web sitemize uygulamaktı.

Ve böylece tasarlamaya başladık...

Meydan Okuma

En büyük zorluğumuz, 10 yıldan eski içeriğimizi yeni teknolojiyi kullanarak ve hiçbir şeyi bozmadan yeni bir düzene uyarlamaktı. Yanlış bir hamlenin SEO ve genel kullanıcı deneyimimiz üzerinde olumsuz bir etkisi olabileceğini biliyorduk, bu nedenle önce yaklaşık 20.000 içerik sayfasını rafine ettik ve eski içeriği ortadan kaldırdık. Küçük bir başarı değil.

Ardından arka uç ve ön uç için hangi teknolojinin en iyi çözüm olacağına karar vermemiz gerekiyordu. Önceki web sitemiz React ve WordPress'in bir karışımını kullanıyordu ve bu da hatalara ve bir dizi başka soruna yol açıyordu. Bu nedenle, kurşun geçirmez bir platform olduğu ve yerel barındırma hizmetleri piyasadaki birkaç yeşil barındırma hizmetinden biri olduğu için her şeyi WordPress'e taşımaya karar verdik.

Devam etmeden önce önemli bir hususu vurgulamak istiyorum: Tasarım ekibinin teknolojideki rolü. Biz tasarımcıların kendimizi asla 'tasarım yaparız ve olur biter' zihniyetiyle kısıtlamamamız gerektiğine inanıyorum. İçerik oluşturmadan teknik mühendisliğe ve SEO'ya kadar ürün geliştirmeye doğrudan dahil olmalıyız, böylece sonuçları etkileyebilir ve iş arkadaşlarımızla daha hızlı ve verimli bir şekilde işbirliği yapabiliriz.

Bu kritik kararların ardından, yeni görsel yaklaşımımız olan "90 Design" temelinde tasarımlar oluşturmaya başlamanın zamanı gelmişti. Son iki yılda tamamen dijital platformlardaki insan deneyimine odaklanan bir tasarım sistemi oluşturduk. Bu aynı zamanda tasarım ekibimizin de sloganı: 'İnsanlar için tasarlıyoruz'. Tasarladığımız her bileşenin ve düzenin arkasında sosyolojik ve psikolojik nedenler var. Dolayısıyla storefront90.wpengine.com 'un da doğal olarak bu ideolojiyi yansıtması gerekiyordu.

90 Seconds tasarım ekibi aşağıdaki zorluklarla karşılaşmıştır:

  • Yeni vitrin90.wpengine.com 'u daha sürdürülebilir olacak şekilde tasarlayın ve geliştirin.
  • 90 Seconds görünümünü ve hissini bozmadan en son görsel yönergelerimizi yansıtın.
  • Pazarımızı ve içindeki gerçek insanları anlayın.

İlerleme

Yeni vitrin90.wpengine.com 'un tüm tasarımı ve geliştirilmesi neredeyse bir yıl sürdü. Kavramsal tasarımlar ve ilk taslaklar göz önüne alındığında, tüm zaman çizelgesi 2 yıla yakın.

Bir video prodüksiyon platformu olduğumuz için, Vitrinimiz ağırlıklı olarak görüntü ve video odaklı. Bu, dekoratif bir amaca hizmet ediyor ve aynı zamanda kullanıcılarımıza video prodüksiyonlarımızdan neler bekleyebilecekleri konusunda bir fikir vermek için önemli bir görsel rehber görevi görüyor. Ayrıca, daha sürdürülebilir olmaya kararlı bir tasarım ekibi için de bir zorluk teşkil ediyor. Biz de bu iki optimizasyon yöntemini izlemeye karar verdik:

  • Görsel içeriği manuel olarak düzenleyin, kırpın ve optimize edin.
  • Kalite ve veri yükünü dengelemek için Cloudinary API gibi çevrimiçi teknolojileri kullanın.

Bu sistemlerin nasıl çalıştığına ve Storefront'umuzu daha sürdürülebilir hale getirmemize nasıl yardımcı olduğuna geçmeden önce, tutarlı olduğumuzdan ve platformumuz genelinde benzer bir Kullanıcı Deneyimi sunduğumuzdan emin olmak için 90 Seconds adresinde kullandığımız tasarım yöntemlerinden bahsetmek istiyorum.

Figma 'yı birincil tasarım aracımız olarak kullanıyor ve tasarımlarımızı 10.000'den fazla küresel bileşen, 500'den fazla düzen ve birbirlerine dikte eden 7 sistem ve binlerce bağımsız bileşen ve bunların varyasyonlarından oluşan bir tasarım sistemi etrafında inşa ediyoruz. Bir yapbozun parçaları gibi, platformumuzu inşa etmek için kullandığımız çok amaçlı düzenler oluşturuyorlar. 2022'de platformumuzda bazı büyük değişikliklere hazırlanırken, tasarım sistemimiz sorunsuz bir kullanıcı deneyimi sağlamada önemli bir rol oynayacak.


Sonuç

storefront90.wpengine.com 'u %90 daha sürdürülebilir, daha çevreci ve kullanıcı dostu hale getirdiğimizi söylemekten gurur duyuyoruz. Ayrıca, cep telefonları, tabletler ve çeşitli ekran çözünürlükleri için yerel benzeri düzenler göstermemizi sağlamak için site performansını büyük ölçüde geliştirdik. Beta 1.0 sürümünde olduğumuz düşünüldüğünde, şimdiden yarattığımız etki oldukça inanılmaz.

Önce ve sonra karşılaştırmalarını görelim:

Etkimizi hesaplamak için GTmetrix, Pingdom ve WebsiteCarbon gibi birden fazla yazılım ve çevrimiçi platform kullanıyoruz. Test sonuçları her zaman aynı olmadığından, medyan sayıları kullanıyoruz. İşte onlar:

GTmetrixPingdom
ÖnceF - %35 PerformansD- Ana sayfa boyutu: 10,65MB
SonraA - %95 PerformansA- Ana sayfa boyutu: 2,4MB

Web siteleri için bir karbon ayak izi emülatörü olan WebsiteCarbon'a göre, Siteye gelen her 10.000 ziyaretçi için bir önceki Storefront, 143 ağacın bir yılda emdiği karbon miktarını salmıştır. Sitemizin her ay bundan çok daha fazla ziyaretçi aldığı düşünüldüğünde bu çok büyük bir miktar.

Yeni storefront90.wpengine.com ile emisyonumuzu yalnızca 9 ağaca eşdeğer bir seviyeye indirdiğimiz için çok heyecanlıyız ve karbon ayak izimizi daha da azaltmak için daha fazla optimizasyon yöntemi üzerinde çalışmaya devam ediyoruz.

WebsiteCarbon


GTmetrix


Özet

Tüm yazılım ve çevrimiçi şirketler gibi, 90 Seconds da gezegeni korumak ve muhafaza etmek için elimizden gelen her şeyi yapma sorumluluğuna sahiptir. Dünya'nın kaynakları sonsuz değildir ve karbon ayak izimizi azaltmak ve elimizden gelen en büyük olumlu etkiyi yaratmak için üzerimize düşeni yapmamız gerektiğine inanıyoruz. Kullanıcılarımız için daha insan dostu, sürdürülebilir ve etkili ürünler yaratmayı dört gözle bekliyor ve çabalarımızın şunları sağlayacağını umuyoruz diğer şirketleri de benzer bir yönde yönlendirmeye yardımcı olur.