How we redesigned 90 Seconds.com to be more sustainable

How we redesigned 90Seconds.com to be more sustainable – and why

Oncel Cebeci
2 years ago・5 min read

Let’s start with the fact that over the last decade, online start-ups and products have become one of the major players in global energy consumption. The impact of the Internet on global resources can be compared to that of the Industrial Revolution, and as it continues to grow, we anticipate the Internet alone to consume 20% of the world’s resources in the next five years.

It is clear that, as technology companies, we have a mission to design and develop more sustainable products.

Since our foundation, we have designed the entire 90 Seconds business model around being more sustainable. With solutions such as Shoot Anywhere, we are reducing travel costs and carbon footprint, while enabling our brands to create video content anywhere they want.

The logical next step was to apply the same approach to our website.

And so we started designing…

The Challenge

Our biggest challenge was to adapt our 10+ year old content into a new layout using new technology – without breaking things. We knew that a wrong move might have a negative impact on our SEO and overall user experience, so first we refined nearly 20,000 content pages and eliminated the outdated content. No small feat.

Then we had to decide which technology would be the best solution for the back-end and front-end. Our previous website used a mash-up of React and WordPress which led to bugs and a host of other issues. So we decided to move everything to WordPress as it’s a bulletproof platform and their native hosting is one of the few green hosting services out there.

Before we continue, I want to highlight one important consideration: the Design team’s role in technology. I believe that we designers should never restrict ourselves with a ‘we do designs and that’s it’ mindset. We should be directly involved in product development, from content creation to technical engineering and SEO, so we can influence outcomes and collaborate with our co-workers in a faster and more efficient way.

After those critical decisions, it was time to start creating designs based on our new visual approach, aka “90 Design”. Over the last two years we have created a design system that focuses entirely on the human experience on digital platforms. This is also the motto of our design team: ‘We design for humans’. Every component and layout we design has sociological and psychological reasons behind them. So 90seconds.com naturally had to reflect this ideology as well.

The 90 Seconds design team faced the following challenges:

Design and develop the new 90seconds.com to be more sustainable.
Reflect our latest visual guidelines while keeping the 90 Seconds look and feel intact.
Understand our market and the real people in it.

The Progress

The entire design and development of the new 90seconds.com took almost a year. Considering the conceptual designs and first drafts though, the complete timeline is closer to 2 years.

Given we are a video production platform, our Storefront is heavily image and video-oriented. This serves a decorative purpose and also acts as an important visual guide for our users to give them an idea of what they can expect from our video productions. It also presents a challenge for a design team that is committed to being more sustainable. So we decided to follow these two optimisation methods:

Manually edit, crop and optimise the visual content.
Use online technologies such as Cloudinary API to balance the quality and data payload.

Before we jump to how these systems worked and helped us make our Storefront more sustainable, I want to talk about the design methods that we use at 90 Seconds to ensure we are being consistent and offer a similar User Experience across our platform.

We use Figma as our primary design tool and build our designs around a design system which consist of over 10,000 global components, 500+ layouts and 7 systems that dictate to each other and thousands of independent components and their variations. Like pieces of a puzzle, they create multi-purpose layouts that we use to build our platform. As we prepare for some big changes on our platform in 2022, our design system is going to play an important role in ensuring a seamless user experience.

The Result

We are proud to say that we’ve made 90seconds.com 90% more sustainable, and more environmentally and user-friendly. We have also greatly improved the site performance to ensure we show native-like layouts for mobile phones, tablets and a variety of screen resolutions. Considering that we are in Beta 1.0 version, the impact that we have made already is pretty incredible.

Let’s see some before and after comparisons:

We use multiple softwares and online platforms to calculate our impact, such as GTmetrix, Pingdom and WebsiteCarbon. As test results are not always the same, we use the median numbers. Here they are:

	GTmetrix	Pingdom
Before	F – 35% Performance	D- Homepage size: 10,65MB
After	A – 95% Performance	A- Homepage size: 2,4MB

According to WebsiteCarbon, a carbon footprint emulator for websites, for every 10,000 visitors to the site, the previous Storefront emitted the amount of carbon that 143 trees absorb in a year. This is a huge amount considering our site receives many more visitors than that each month.

With the new storefront90.wpengine.com, we are thrilled that we have reduced our emission to the equivalent of only 9 trees, and are continuing to work on more optimisation methods to reduce our carbon footprint even further.

WebsiteCarbon

GTmetrix

Summary

Like all software and online companies, 90 Seconds has a responsibility to ensure we do everything in our power to conserve and protect the planet. Earth’s resources aren’t infinite, and we strongly believe that we must do our part to reduce our carbon footprint and have the greatest positive impact that we can. We’re looking forward to creating more human-friendly, sustainable and effective products for our users, and hope our efforts will also help guide other companies in a similar direction.