Bagaimana kami merancang semula 90Seconds.com untuk menjadi lebih mampan - dan mengapa

Jadual kandungan
  1. Pengenalan
  2. Cabaran
  3. Kemajuan
  4. Hasilnya
  5. Ringkasan
Pautan Disalin!
Oncel Cebeci
3 tahun yang lalu・5 min membaca

Mari kita mulakan dengan fakta bahawa sepanjang dekad yang lalu, syarikat permulaan dan produk dalam talian telah menjadi salah satu pemain utama dalam penggunaan tenaga global. Kesan Internet terhadap sumber global boleh dibandingkan dengan Revolusi Perindustrian, dan apabila ia terus berkembang, kita menjangkakan Internet sahaja untuk menggunakan 20% sumber dunia dalam tempoh lima tahun akan datang.

Adalah jelas bahawa, sebagai syarikat teknologi, kami mempunyai misi untuk mereka bentuk dan membangunkan produk yang lebih mampan.

Sejak asas kami, kami telah merancang keseluruhannya 90 Seconds model perniagaan di sekitar menjadi lebih mampan. Dengan penyelesaian seperti Shoot Di mana-mana sahaja, kami mengurangkan kos perjalanan dan jejak karbon, sambil membolehkan jenama kami mencipta kandungan video di mana sahaja yang mereka mahukan.

Langkah seterusnya yang logik adalah menggunakan pendekatan yang sama ke laman web kami.

Dan jadi kami mulai merancang ...

Cabaran

Cabaran terbesar kami adalah untuk menyesuaikan kandungan berusia 10+ tahun kami ke dalam susun atur baru menggunakan teknologi baru - tanpa memecahkan perkara. Kami tahu bahawa langkah yang salah mungkin mempunyai kesan negatif terhadap SEO dan pengalaman pengguna keseluruhan kami, jadi mula-mula kami memperhalusi hampir 20,000 halaman kandungan dan menghapuskan kandungan ketinggalan zaman. Tiada prestasi kecil.

Kemudian kami terpaksa memutuskan teknologi mana yang akan menjadi penyelesaian terbaik untuk bahagian belakang dan bahagian depan. Laman web kami sebelum ini menggunakan mash-up React dan WordPress yang membawa kepada pepijat dan pelbagai isu lain. Oleh itu, kami memutuskan untuk memindahkan semuanya ke WordPress kerana ia adalah platform kalis peluru dan hosting asli mereka adalah salah satu daripada beberapa perkhidmatan hosting hijau di luar sana.

Sebelum kita meneruskan, saya ingin menyerlahkan satu pertimbangan penting: peranan pasukan Reka Bentuk dalam teknologi. Saya percaya bahawa kita pereka tidak boleh menyekat diri kita dengan pemikiran 'kita melakukan reka bentuk dan itu sahaja'. Kita harus terlibat secara langsung dalam pembangunan produk, dari penciptaan kandungan hingga kejuruteraan teknikal dan SEO, sehingga kita dapat mempengaruhi hasil dan bekerjasama dengan rakan sekerja kita dengan cara yang lebih cepat dan lebih cekap.

Selepas keputusan kritikal itu, sudah tiba masanya untuk mula mencipta reka bentuk berdasarkan pendekatan visual baru kami, aka "90 Design". Sejak dua tahun kebelakangan ini, kami telah mencipta sistem reka bentuk yang memberi tumpuan sepenuhnya kepada pengalaman manusia di platform digital. Ini juga merupakan moto pasukan reka bentuk kami: 'Kami mereka bentuk untuk manusia'. Setiap komponen dan susun atur yang kami reka bentuk mempunyai sebab sosiologi dan psikologi di belakangnya. Jadi 90seconds.com secara semula jadi harus mencerminkan ideologi ini juga.

The 90 Seconds pasukan reka bentuk menghadapi cabaran berikut:

  • Merancang dan membangunkan 90seconds.com baru untuk menjadi lebih mampan.
  • Renungkan garis panduan visual terkini kami sambil mengekalkan 90 Seconds lihat dan rasa utuh.
  • Fahami pasaran kami dan orang sebenar di dalamnya.

Kemajuan

Keseluruhan reka bentuk dan pembangunan 90seconds.com baru mengambil masa hampir setahun. Memandangkan reka bentuk konseptual dan draf pertama, garis masa yang lengkap adalah lebih dekat kepada 2 tahun.

Memandangkan kami adalah platform pengeluaran video, Storefront kami sangat berorientasikan imej dan video. Ini berfungsi untuk tujuan hiasan dan juga bertindak sebagai panduan visual penting bagi pengguna kami untuk memberi mereka idea tentang apa yang boleh mereka harapkan daripada produksi video kami. Ia juga memberikan cabaran untuk pasukan reka bentuk yang komited untuk menjadi lebih mampan. Oleh itu, kami memutuskan untuk mengikuti kedua-dua kaedah pengoptimuman ini:

  • Secara manual edit, memangkas dan mengoptimumkan kandungan visual.
  • Gunakan teknologi dalam talian seperti Cloudinary API untuk mengimbangi kualiti dan muatan data.

Sebelum kita melompat ke bagaimana sistem ini berfungsi dan membantu kita menjadikan Storefront kita lebih mampan, saya ingin membincangkan kaedah reka bentuk yang kita gunakan di 90 Seconds untuk memastikan kami konsisten dan menawarkan Pengalaman Pengguna yang serupa di seluruh platform kami.

Kami menggunakan Figma sebagai alat reka bentuk utama kami dan membina reka bentuk kami di sekitar sistem reka bentuk yang terdiri daripada lebih daripada 10,000 komponen global, 500+ susun atur dan 7 sistem yang menentukan antara satu sama lain dan beribu-ribu komponen bebas dan variasi mereka. Seperti kepingan teka-teki, mereka membuat susun atur pelbagai guna yang kami gunakan untuk membina platform kami. Semasa kami bersedia untuk beberapa perubahan besar di platform kami pada tahun 2022, sistem reka bentuk kami akan memainkan peranan penting dalam memastikan pengalaman pengguna yang lancar.


Hasilnya

Kami berbangga untuk mengatakan bahawa kami telah menjadikan 90seconds.com 90% lebih mampan, dan lebih mesra alam dan pengguna. Kami juga telah meningkatkan prestasi laman web untuk memastikan kami menunjukkan susun atur seperti asli untuk telefon bimbit, tablet dan pelbagai resolusi skrin. Memandangkan kita berada dalam versi Beta 1.0, kesan yang telah kita buat sudah cukup luar biasa.

Mari kita lihat beberapa perbandingan sebelum dan selepas:

Kami menggunakan pelbagai perisian dan platform dalam talian untuk mengira kesan kami, seperti GTmetrix, Pingdom dan WebsiteCarbon. Oleh kerana keputusan ujian tidak selalu sama, kami menggunakan nombor median. Di sini mereka:

GTmetrixPingdom
SebelumF – 35% PrestasiD- Saiz laman web: 10,65MB
SelepasA - 95% PrestasiA- Saiz laman web: 2,4MB

Menurut WebsiteCarbon, emulator jejak karbon untuk laman web, untuk setiap 10,000 pelawat ke laman web ini, Storefront sebelumnya mengeluarkan jumlah karbon yang diserap oleh 143 pokok dalam setahun. Ini adalah jumlah yang besar memandangkan laman web kami menerima lebih ramai pelawat daripada itu setiap bulan.

Dengan storefront90.wpengine.com baru ini, kami teruja kerana kami telah mengurangkan pelepasan kami kepada hanya 9 pokok, dan terus mengusahakan kaedah pengoptimuman yang lebih tinggi untuk mengurangkan jejak karbon kami lebih jauh lagi.

Laman WebCarbon


GTmetrix


Ringkasan

Seperti semua perisian dan syarikat dalam talian, 90 Seconds mempunyai tanggungjawab untuk memastikan kita melakukan segala-galanya dalam kuasa kita untuk memelihara dan melindungi planet ini. Sumber bumi tidak terbatas, dan kami sangat percaya bahawa kita mesti melakukan bahagian kita untuk mengurangkan jejak karbon kita dan mempunyai kesan positif terbesar yang kita boleh. Kami tidak sabar-sabar untuk mencipta produk yang lebih mesra manusia, mampan dan berkesan untuk pengguna kami, dan berharap usaha kami juga akan membantu membimbing syarikat lain ke arah yang sama.