Cómo rediseñamos 90 Seconds.com para que fuera más sostenible

Cómo rediseñamos 90Seconds.com para que sea más sostenible, y por qué

Oncel Cebeci
hace 2 años・5 min leer

Empecemos por el hecho de que, en la última década, las empresas y productos en línea se han convertido en uno de los principales protagonistas del consumo mundial de energía. El impacto de Internet en los recursos mundiales puede compararse al de la Revolución Industrial y, como sigue creciendo, prevemos que sólo Internet consumirá el 20% de los recursos mundiales en los próximos cinco años.

Está claro que, como empresas tecnológicas, tenemos la misión de diseñar y desarrollar productos más sostenibles.

Desde nuestra fundación, hemos diseñado todo el modelo de negocio de 90 Seconds en torno a ser más sostenibles. Con soluciones como Shoot Anywhere, reducimos los gastos de viaje y la huella de carbono, al tiempo que permitimos a nuestras marcas crear contenidos de vídeo donde quieran.

El siguiente paso lógico era aplicar el mismo enfoque a nuestro sitio web.

Y así empezamos a diseñar...

El desafío

Nuestro mayor reto era adaptar nuestros contenidos de más de 10 años a un nuevo diseño con nuevas tecnologías, sin romper nada. Sabíamos que un paso en falso podría tener un impacto negativo en nuestro SEO y en la experiencia general del usuario, así que primero refinamos casi 20.000 páginas de contenido y eliminamos el contenido obsoleto. No fue poca cosa.

Después tuvimos que decidir qué tecnología sería la mejor solución para el back-end y el front-end. Nuestro sitio web anterior utilizaba una combinación de React y WordPress, lo que provocaba errores y muchos otros problemas. Así que decidimos mover todo a WordPress, ya que es una plataforma a prueba de balas y su alojamiento nativo es uno de los pocos servicios de alojamiento verde que hay.

Antes de continuar, quiero destacar una consideración importante: el papel del equipo de diseño en la tecnología. Creo que los diseñadores nunca debemos limitarnos a una mentalidad de "hacemos diseños y ya está". Deberíamos participar directamente en el desarrollo de productos, desde la creación de contenidos hasta la ingeniería técnica y el SEO, para poder influir en los resultados y colaborar con nuestros compañeros de trabajo de una forma más rápida y eficiente.

Tras esas decisiones críticas, llegó el momento de empezar a crear diseños basados en nuestro nuevo enfoque visual, conocido como "Diseño 90". En los dos últimos años hemos creado un sistema de diseño que se centra por completo en la experiencia humana en las plataformas digitales. Este es también el lema de nuestro equipo de diseño: "Diseñamos para los humanos". Todos los componentes y diseños que diseñamos tienen detrás razones sociológicas y psicológicas. Así que 90seconds.com también tenía que reflejar esta ideología.

El equipo de diseño de 90 Seconds se enfrentó a los siguientes retos:

Diseñar y desarrollar el nuevo 90segundos.com para que sea más sostenible.
Refleje nuestras últimas directrices visuales manteniendo intactos el aspecto y la sensación de 90 Seconds .
Comprender nuestro mercado y a las personas reales que lo componen.

El progreso

Todo el diseño y desarrollo del nuevo 90segundos.com llevó casi un año. Sin embargo, teniendo en cuenta los diseños conceptuales y los primeros borradores, el plazo completo se acerca más a los 2 años.

Dado que somos una plataforma de producción de vídeo, nuestro escaparate está muy orientado a la imagen y al vídeo. Esto tiene un propósito decorativo y también actúa como una importante guía visual para que nuestros usuarios se hagan una idea de lo que pueden esperar de nuestras producciones de vídeo. También supone un reto para un equipo de diseño que se ha comprometido a ser más sostenible. Así que decidimos seguir estos dos métodos de optimización:

Manualmente edit, recortar y optimizar el contenido visual.
Utilice tecnologías en línea como Cloudinary API para equilibrar la calidad y la carga de datos.

Antes de pasar a explicar cómo funcionaron estos sistemas y cómo nos ayudaron a hacer más sostenible nuestro escaparate, quiero hablar de los métodos de diseño que utilizamos en 90 Seconds para asegurarnos de que somos coherentes y ofrecemos una experiencia de usuario similar en toda nuestra plataforma.

Utilizamos Figma como nuestra principal herramienta de diseño y construimos nuestros diseños en torno a un sistema de diseño que consta de más de 10.000 componentes globales, más de 500 diseños y 7 sistemas que se dictan entre sí y miles de componentes independientes y sus variaciones. Como piezas de un puzzle, crean diseños polivalentes que utilizamos para construir nuestra plataforma. Mientras nos preparamos para algunos grandes cambios en nuestra plataforma en 2022, nuestro sistema de diseño va a desempeñar un papel importante para garantizar una experiencia de usuario sin fisuras.

El resultado

Estamos orgullosos de decir que hemos hecho 90seconds.com un 90% más sostenible y más respetuoso con el medio ambiente y los usuarios. También hemos mejorado mucho el rendimiento del sitio para asegurarnos de mostrar diseños nativos para teléfonos móviles, tabletas y una gran variedad de resoluciones de pantalla. Teniendo en cuenta que estamos en la versión Beta 1.0, el impacto que ya hemos conseguido es bastante increíble.

Veamos algunas comparaciones del antes y el después:

Utilizamos varios programas y plataformas en línea para calcular nuestro impacto, como GTmetrix, Pingdom y WebsiteCarbon. Como los resultados de las pruebas no son siempre los mismos, utilizamos las cifras medias. Aquí están:

	GTmetrix	Pingdom
Antes de	F - 35% Rendimiento	D- Tamaño de la página de inicio: 10,65 MB
En	A - 95% Rendimiento	A- Tamaño de la página de inicio: 2,4 MB

Según WebsiteCarbon, un emulador de la huella de carbono de los sitios web, por cada 10.000 visitantes del sitio, el anterior Storefront emitía la cantidad de carbono que absorben 143 árboles en un año. Se trata de una cantidad enorme si tenemos en cuenta que nuestro sitio recibe muchas más visitas que eso cada mes.

Con el nuevo storefront90.wpengine.com, estamos encantados de haber reducido nuestra emisión al equivalente de sólo 9 árboles, y seguimos trabajando en más métodos de optimización para reducir aún más nuestra huella de carbono.

Página webCarbon

**Izquierda:** Antes, **Derecha:** Después

GTmetrix

Resumen

Como todas las empresas de software y en línea, 90 Seconds tiene la responsabilidad de garantizar que hacemos todo lo que está en nuestra mano para conservar y proteger el planeta. Los recursos de la Tierra no son infinitos, y creemos firmemente que debemos poner de nuestra parte para reducir nuestra huella de carbono y tener el mayor impacto positivo posible. Estamos deseando crear productos más respetuosos con el ser humano, sostenibles y eficaces para nuestros usuarios, y esperamos que nuestros esfuerzos también ayuden a guiar a otras empresas en una dirección similar.