Wie wir 90Seconds.com umgestaltet haben, um nachhaltiger zu sein - und warum

Inhaltsübersicht
  1. Einführung
  2. Die Herausforderung
  3. Der Fortschritt
  4. Das Ergebnis
  5. Zusammenfassung
Link kopiert!
Oncel Cebeci
vor 2 Jahren・5 Minuten gelesen

Beginnen wir mit der Tatsache, dass Online-Start-ups und -Produkte in den letzten zehn Jahren zu einem der Hauptakteure des weltweiten Energieverbrauchs geworden sind. Die Auswirkungen des Internets auf die globalen Ressourcen können mit denen der industriellen Revolution verglichen werden, und da es weiter wächst, gehen wir davon aus, dass das Internet allein in den nächsten fünf Jahren 20 % der weltweiten Ressourcen verbrauchen wird.

Es ist klar, dass wir als Technologieunternehmen die Aufgabe haben, nachhaltigere Produkte zu entwerfen und zu entwickeln.

Seit unserer Gründung haben wir das gesamte Geschäftsmodell von 90 Seconds auf mehr Nachhaltigkeit ausgerichtet. Mit Lösungen wie Shoot Anywhere reduzieren wir die Reisekosten und den CO2-Fußabdruck, während wir es unseren Marken ermöglichen, Videoinhalte zu erstellen, wo immer sie wollen.

Der logische nächste Schritt war, den gleichen Ansatz auf unsere Website anzuwenden.

Und so begannen wir zu entwerfen...

Die Herausforderung

Unsere größte Herausforderung bestand darin, unsere über 10 Jahre alten Inhalte mit Hilfe neuer Technologien in ein neues Layout zu übertragen, ohne dabei etwas kaputt zu machen. Wir wussten, dass sich ein falscher Schritt negativ auf unsere Suchmaschinenoptimierung und die allgemeine Nutzererfahrung auswirken könnte. Also haben wir zunächst fast 20.000 Inhaltsseiten überarbeitet und die veralteten Inhalte entfernt. Keine leichte Aufgabe.

Dann mussten wir entscheiden, welche Technologie die beste Lösung für das Back-End und das Front-End sein würde. Unsere vorherige Website war eine Mischung aus React und WordPress, was zu Fehlern und einer Reihe anderer Probleme führte. Deshalb haben wir uns entschieden, alles auf WordPress zu verlagern, da es eine kugelsichere Plattform ist und ihr natives Hosting eines der wenigen umweltfreundlichen Hosting-Angebote auf dem Markt ist.

Bevor wir fortfahren, möchte ich einen wichtigen Aspekt hervorheben: die Rolle des Designteams in der Technologie. Ich bin der Meinung, dass wir Designer uns nie auf die Einstellung beschränken sollten: "Wir entwerfen und das war's". Wir sollten direkt in die Produktentwicklung einbezogen werden, von der Inhaltserstellung bis hin zu Technik und SEO, damit wir die Ergebnisse beeinflussen und mit unseren Kollegen schneller und effizienter zusammenarbeiten können.

Nach diesen kritischen Entscheidungen war es an der Zeit, mit der Erstellung von Designs zu beginnen, die auf unserem neuen visuellen Ansatz, auch bekannt als "90 Design", basieren. In den letzten zwei Jahren haben wir ein Designsystem entwickelt, das sich ganz auf die menschliche Erfahrung auf digitalen Plattformen konzentriert. Dies ist auch das Motto unseres Designteams: Wir entwerfen für Menschen". Jede Komponente und jedes Layout, das wir entwerfen, hat soziologische und psychologische Gründe. So musste 90seconds.com natürlich auch diese Ideologie widerspiegeln.

Das Designteam von 90 Seconds stand vor folgenden Herausforderungen:

  • Design und Entwicklung der neuen 90Sekunden.de um nachhaltiger zu sein.
  • Sie spiegeln unsere neuesten visuellen Richtlinien wider, wobei das Erscheinungsbild von 90 Seconds beibehalten wird.
  • Verstehen Sie unseren Markt und die Menschen, die dort leben.

Der Fortschritt

Das gesamte Design und die Entwicklung der neuen 90Sekunden.de dauerte fast ein Jahr. Berücksichtigt man jedoch die konzeptionellen Entwürfe und die ersten Entwürfe, so liegt die gesamte Zeitspanne eher bei 2 Jahren.

Da wir eine Videoproduktionsplattform sind, ist unsere Storefront stark bild- und videoorientiert. Dies dient zum einen der Dekoration und zum anderen als wichtiger visueller Leitfaden für unsere Nutzer, um ihnen eine Vorstellung davon zu vermitteln, was sie von unseren Videoproduktionen erwarten können. Außerdem stellt es eine Herausforderung für ein Designteam dar, das sich für mehr Nachhaltigkeit einsetzt. Deshalb haben wir uns für diese beiden Optimierungsmethoden entschieden:

  • Manuelles edit, Zuschneiden und Optimieren des visuellen Inhalts.
  • Nutzen Sie Online-Technologien wie Cloudinary API, um ein Gleichgewicht zwischen Qualität und Datenmenge herzustellen.

Bevor wir auf die Funktionsweise dieser Systeme eingehen, die uns geholfen haben, unser Schaufenster nachhaltiger zu gestalten, möchte ich über die Designmethoden sprechen, die wir bei 90 Seconds anwenden, um sicherzustellen, dass wir konsistent sind und auf unserer gesamten Plattform eine ähnliche Benutzererfahrung bieten.

Wir verwenden Figma als unser primäres Designwerkzeug und bauen unsere Designs um ein Designsystem herum auf, das aus über 10.000 globalen Komponenten, mehr als 500 Layouts und 7 Systemen, die einander diktieren, sowie Tausenden von unabhängigen Komponenten und deren Variationen besteht. Wie Teile eines Puzzles erstellen sie Mehrzweck-Layouts, die wir für den Aufbau unserer Plattform verwenden. Da wir uns auf einige große Veränderungen auf unserer Plattform im Jahr 2022 vorbereiten, wird unser Designsystem eine wichtige Rolle bei der Gewährleistung einer nahtlosen Benutzererfahrung spielen.


Das Ergebnis

Wir sind stolz, sagen zu können, dass wir die 90seconds.com um 90 % nachhaltiger, umwelt- und nutzerfreundlicher gemacht haben. Wir haben auch die Leistung der Website stark verbessert, um sicherzustellen, dass wir native-ähnliche Layouts für Mobiltelefone, Tablets und eine Vielzahl von Bildschirmauflösungen anzeigen. Wenn man bedenkt, dass wir uns in der Beta-Version 1.0 befinden, ist die Wirkung, die wir bereits erzielt haben, ziemlich unglaublich.

Lassen Sie uns einige Vorher-Nachher-Vergleiche anstellen:

Wir verwenden mehrere Softwareprogramme und Online-Plattformen, um unsere Auswirkungen zu berechnen, wie GTmetrix, Pingdom und WebsiteCarbon. Da die Testergebnisse nicht immer gleich ausfallen, verwenden wir den Medianwert. Hier sind sie:

GTmetrixPingdom
VorF - 35% LeistungD- Größe der Homepage: 10,65MB
NachA - 95% LeistungA- Größe der Homepage: 2,4MB

Laut WebsiteCarbon, einem Emulator für den Kohlenstoff-Fußabdruck von Websites, hat das frühere Schaufenster pro 10.000 Besucher der Website die Menge an Kohlenstoff ausgestoßen, die 143 Bäume in einem Jahr aufnehmen. Das ist eine enorme Menge, wenn man bedenkt, dass unsere Website jeden Monat weitaus mehr Besucher hat als das.

Mit der neuen storefront90.wpengine.com sind wir begeistert, dass wir unsere Emissionen auf das Äquivalent von nur 9 Bäumen reduziert haben, und wir arbeiten weiterhin an weiteren Optimierungsmethoden, um unseren Kohlenstoff-Fußabdruck noch weiter zu verringern.

WebsiteCarbon


GTmetrix


Zusammenfassung

Wie alle Software- und Online-Unternehmen trägt auch 90 Seconds die Verantwortung dafür, dass wir alles in unserer Macht Stehende tun, um den Planeten zu erhalten und zu schützen. Die Ressourcen der Erde sind nicht unendlich, und wir sind der festen Überzeugung, dass wir unseren Teil dazu beitragen müssen, unseren Kohlenstoff-Fußabdruck zu verringern und den größtmöglichen positiven Einfluss zu haben. Wir freuen uns darauf, menschenfreundlichere, nachhaltigere und effektivere Produkte für unsere Nutzer zu entwickeln, und hoffen, dass unsere Bemühungen auch anderen Unternehmen helfen werden, in eine ähnliche Richtung zu gehen.