Comment nous avons repensé le site 90 Seconds.com pour le rendre plus durable. 90 Seconds

Comment nous avons repensé 90Seconds.com pour qu'il soit plus durable - et pourquoi ?

Oncel Cebeci
il y a 2 ans・5 min lire

Commençons par le fait qu'au cours de la dernière décennie, les start-ups et les produits en ligne sont devenus l'un des principaux acteurs de la consommation énergétique mondiale. L'impact de l'internet sur les ressources mondiales peut être comparé à celui de la révolution industrielle, et comme il continue à se développer, nous prévoyons que l'internet consommera à lui seul 20 % des ressources mondiales dans les cinq prochaines années.

Il est clair qu'en tant qu'entreprises technologiques, nous avons pour mission de concevoir et de développer des produits plus durables.

Depuis notre création, nous avons conçu l'ensemble du modèle d'entreprise de 90 Seconds pour qu'il soit plus durable. Grâce à des solutions telles que Shoot Anywhere, nous réduisons les frais de déplacement et l'empreinte carbone, tout en permettant à nos marques de créer du contenu vidéo où elles le souhaitent.

La suite logique était d'appliquer la même approche à notre site web.

Et donc nous avons commencé à concevoir...

Le défi

Notre plus grand défi a été d'adapter notre contenu vieux de plus de 10 ans à une nouvelle mise en page utilisant les nouvelles technologies - sans casser les choses. Nous savions qu'un mauvais geste pouvait avoir un impact négatif sur notre référencement et sur l'expérience globale des utilisateurs. Nous avons donc commencé par affiner près de 20 000 pages de contenu et par éliminer le contenu obsolète. Ce n'était pas une mince affaire.

Ensuite, nous avons dû décider quelle technologie serait la meilleure solution pour le back-end et le front-end. Notre précédent site web utilisait un mash-up de React et de WordPress, ce qui entraînait des bugs et une foule d'autres problèmes. Nous avons donc décidé de tout transférer sur WordPress, car il s'agit d'une plateforme à toute épreuve et son hébergement natif est l'un des rares services d'hébergement écologique disponibles.

Avant de poursuivre, je tiens à souligner une considération importante : le rôle de l'équipe de conception dans la technologie. Je pense que nous, les designers, ne devrions jamais nous limiter à un état d'esprit du type "on fait du design et c'est tout". Nous devrions être directement impliqués dans le développement du produit, de la création du contenu à l'ingénierie technique et au référencement, afin de pouvoir influencer les résultats et collaborer avec nos collègues de manière plus rapide et plus efficace.

Après ces décisions cruciales, il était temps de commencer à créer des designs basés sur notre nouvelle approche visuelle, alias "90 Design". Au cours des deux dernières années, nous avons créé un système de conception entièrement axé sur l'expérience humaine sur les plateformes numériques. C'est également la devise de notre équipe de conception : Nous concevons pour les humains". Chaque composant et chaque disposition que nous concevons ont des raisons sociologiques et psychologiques derrière eux. 90seconds.com se devait donc de refléter cette idéologie.

L'équipe de conception de 90 Seconds a dû relever les défis suivants :

Concevoir et développer le nouveau site web de 90seconds.com pour être plus durable.
Reflétez nos dernières directives visuelles tout en conservant l'aspect et la convivialité de 90 Seconds .
Comprendre notre marché et les personnes qui y vivent.

Le progrès

L'ensemble de la conception et du développement du nouveau site 90seconds.com ont pris près d'un an. Cependant, si l'on considère les dessins conceptuels et les premières ébauches, le délai total est plus proche de deux ans.

Étant donné que nous sommes une plateforme de production vidéo, notre vitrine est fortement axée sur l'image et la vidéo. Cela a une fonction décorative et sert également de guide visuel important pour nos utilisateurs afin de leur donner une idée de ce qu'ils peuvent attendre de nos productions vidéo. Cela représente également un défi pour une équipe de conception qui s'est engagée à être plus durable. Nous avons donc décidé de suivre ces deux méthodes d'optimisation :

edit, recadrer et optimiser manuellement le contenu visuel.
Utilisez des technologies en ligne telles que l'API Cloudinary pour équilibrer la qualité et la charge utile des données.

Avant de passer à la façon dont ces systèmes ont fonctionné et nous ont aidés à rendre notre vitrine plus durable, je voudrais parler des méthodes de conception que nous utilisons sur 90 Seconds pour nous assurer que nous sommes cohérents et que nous offrons une expérience utilisateur similaire sur notre plateforme.

Nous utilisons Figma comme principal outil de conception et construisons nos designs autour d'un système de conception qui consiste en plus de 10 000 composants globaux, plus de 500 mises en page et 7 systèmes qui se dictent les uns aux autres et des milliers de composants indépendants et leurs variations. Comme les pièces d'un puzzle, ils créent des mises en page polyvalentes que nous utilisons pour construire notre plateforme. Alors que nous nous préparons à de grands changements sur notre plateforme en 2022, notre système de conception va jouer un rôle important pour garantir une expérience utilisateur sans faille.

Le résultat

Nous sommes fiers de dire que nous avons fait de 90seconds.com 90% plus durable et plus respectueux de l'environnement et des utilisateurs. Nous avons également grandement amélioré les performances du site afin de garantir des mises en page natives pour les téléphones portables, les tablettes et diverses résolutions d'écran. Si l'on considère que nous n'en sommes qu'à la version Beta 1.0, l'impact que nous avons déjà eu est assez incroyable.

Voyons quelques comparaisons avant et après :

Nous utilisons plusieurs logiciels et plateformes en ligne pour calculer notre impact, comme GTmetrix, Pingdom et WebsiteCarbon. Comme les résultats des tests ne sont pas toujours les mêmes, nous utilisons les chiffres médians. Les voici :

	GTmetrix	Pingdom
Avant	F - 35% de performance	D- Taille de la page d'accueil : 10,65MB
Après	A - 95% de performance	A- Taille de la page d'accueil : 2,4MB

Selon WebsiteCarbon, un émulateur d'empreinte carbone pour les sites web, pour chaque 10 000 visiteurs du site, l'ancien Storefront émettait la quantité de carbone que 143 arbres absorbent en un an. C'est une quantité énorme si l'on considère que notre site reçoit beaucoup plus de visiteurs que cela chaque mois.

Avec le nouveau storefront90.wpengine.com, nous sommes ravis d'avoir réduit nos émissions à l'équivalent de seulement 9 arbres, et nous continuons à travailler sur d'autres méthodes d'optimisation pour réduire encore plus notre empreinte carbone.

Site webCarbone

**A gauche :** Avant, **A droite :** Après

GTmetrix

Résumé

Comme toutes les entreprises de logiciels et de services en ligne, 90 Seconds a la responsabilité de s'assurer que nous faisons tout ce qui est en notre pouvoir pour conserver et protéger la planète. Les ressources de la Terre ne sont pas infinies et nous croyons fermement que nous devons faire notre part pour réduire notre empreinte carbone et avoir le plus grand impact positif possible. Nous sommes impatients de créer des produits plus respectueux de l'homme, plus durables et plus efficaces pour nos utilisateurs, et nous espérons que nos efforts contribueront à guider d'autres entreprises dans une direction similaire.