Planet-centric design

Today's business models aim toward user-centric and business-centric approaches when designing and developing a project. If you execute it right, the spoils come to the victors. And that is all fine in a short-term plan. But planning for a longer game is something entirely different. Look how fast our climate changes. Predictions say that our ice caps will melt completely in around 20 years. That means organizing our products in an established way isn’t gonna cut it. It will soon be too late. We need to turn ourselves toward our planet and try to prevent or at least delay the inevitable. It’s not only that our planet is getting hotter by the day, but its inhabitants — that includes us — are also in the red. Our food is becoming sparse, we are losing many animal and plant species because of the shift in the temperatures.

Scientists project that if emissions continue to rise unchecked, the Arctic could be ice-free in the summer as soon as the year 2040 as ocean and air temperatures continue to rise rapidly.

www.worldwildlife.org

But there is a way out. It’s not simple and it’s not the single answer and only way to achieve the goal, but it’s a solid step forward. We need to adapt to a design methodology called Planet-centric Design. That means that we have to optimize our products not to waste natural resources, have less environmental impact, and also make those resources deteriorate less.

We need to bring our planet back to focus.

How are we gonna do that? Here are four pillars of planet-centric design that could refocus our efforts and push us toward a more sustainable web. At Point Jupiter (where I worked at the time of writing this article), we already utilize these and we find it eye-opening.

4 pillars of Planet-centric Design

1. Humans → Planet

When designing we usually create personas who will likely use our products. This helps us in making the right choices when considering design and development approaches and technologies. To make it sustainable, we should also make one additional persona, The Planet. That persona should stand in for all the silent parties — flora and fauna affected by the product. Of course, they won’t use the app, but for instance, the amount of CO₂ it produces will affect their well-being. And their well-being will affect ours. So, yes, we should turn our focus from humans to the planet because this shift makes sense.

What is good for humans is not necessarily the best for our planet, but what is good for our planet, must be good for us. Let me give you an example: in summer we are hot and are looking for freshness. Because air conditioners use a large amount of energy, electricity production is increased, which emits more carbon dioxide into the atmosphere. This greenhouse gas can trap heat near the planet’s surface and contribute to global warming. Another factor is refrigerant which could have a greater warming effect than carbon dioxide.

One important fact is that water has very high thermal mass — it can store much of the heat and keep it for a long time. (For instance, metals gain and lose heat much faster.) That is why water is used in greenhouses to keep the warmth during the colder periods — barrels of water mass. And imagine how much water there is on the Earth. When it gets heated it radiates that warmth. So, keeping our atmosphere colder will result in lower temperatures of our oceans and seas which will preserve ice caps and so on. Everything is connected.

2. Quantity → Quality

Every company’s goal is to sell its product as many times as possible, and thus create revenue. But there is also another way. Build more premium products that could be more expensive. They will sell fewer numbers, but the overall gain will be similar if not higher. I’m not saying that cheaper products are lesser in quality. I’m saying that time means money, and if you want to make your product better, you need to invest more time. By investing more time, you need to charge it accordingly. With fewer products that consume energy and radiate heat, we will slow down warming. Not only by every single product but also by the production process.

3. Short-term → Long-term

Whatever you do, if you aim toward planet-centric design, it will turn out to be a long-term stint. It’s because it can’t be any different. Our planet is not here just today or next week. It’s here to stay until the Sun reaches its Red Giant phase, or some other random global catastrophic event, but we still have some time before that. It’s our duty to make our products sustainable or iterate them toward sustainability. Thus Planet-centric design is by default long-term. What does this mean for your product? It means that if you planned your product to have longevity, you should have also planned its impact on the environment during its production and tenure.

Also, keep in mind that lasting products have more impact on your client’s perception. Products that have existed for a long time seem to resist the test of time. Wouldn’t it be great if along the way you have also helped to improve conditions on our planet?

4. Market fit → Planet fit

Like in the previous chapter, you have to take care of your environment if you want your product to make sense. Let’s say you prioritized your market before the planet. What do you think is more short-lived between these two? Markets change with the season, but the planet works on a much longer timeframe. It’s better to aim toward long-term first, and then make adoptions for a short-term plan while preserving the sustainable features. That way we are making sure our product will resist the test of time or will evolve naturally with it.

Also, if you look at the broader picture, planet fit is much broader scale. If it works in the West, it’s bound to work in the East too. So focus on the larger scale and then finetune details to fit specific markets or regions. This way you’ll cover more ground and the return will be bigger.

Besides, there is no market on a dead planet, except if you sell slightly used planets in mint condition. 🙂

Our ambitions should be high!

A way to produce a planet-centric project

There are a few things you should keep in mind. How you envision your product is a starting point for making it greener, but all phases of the production — Planning, Design, and Development — can be optimized to achieve a more planet-centric design. Let’s go through them.

Planning

During planning, we should take care of the aspects that would affect our environment.

When creating personas, why not create a planet persona? It should have the same importance as the human user's persona — the user that provides the value. Planet persona should also have its needs and prerequisites. And most importantly it should complement human persona — what fits our planet, also should fit us humans in the long run.

What resources will be used to create your project? Will that require additional production? Does that create unnecessary waste? Does it produce CO₂ in the atmosphere and if yes in what amount? Does it heat up the environment? Most of these can be solved during the planning and design phases. This shouldn’t be extra work. This should be as usual as designing responsive pages — a few years ago we had a special feature named “responsive” in our estimates, but today it’s considered without mentioning it. The same approach should be applied here today on the subject of producing green planet-centric products.

There is always more than one way to solve a problem. Some are simple, while others are a little more complex. Regarding this, we should look for the best option for all our user personas — customers, managers, editors, public figures, and of course our planet. A little more effort will surely yield a better product.

Design

Modern design tools can help you out greatly. For instance, Figma does this marvelously because it is primarily a vector tool. If optimized properly, vectors will perform better than pixel graphics, and their sizes can be kept lower. Of course, this isn’t a rule. If your vector object is too intricate, maybe the pixel graphic would be smaller in size when properly optimized into formats like PNG, JPG, GIF, or WebP.

So, you’re designing a website for a client. Its missions could be to improve, to educate, but also to wow and to attract business. You have a bunch of requests and boundaries. Add planet-centric to it also. Yes, it will limit you in some ways, but it will open your eyes to other possibilities. In today's world when companies strive to be green, if you adopt these principles into your project, you can easily use them as a selling point.

Development

Optimizing your data is crucial. In his blog post, developer Danny van Kooten claims that shaving off a single kilobyte in a file that is being loaded on 2 million websites by 10.000 users each month reduces CO₂ emissions by an estimated 2950 kg per month. To put it in perspective that’s like driving a Toyota Yaris for 18.670 kilometers, 5 flights from Amsterdam to New York, or eating 118 kg of beef.

To jump on the optimization bandwagon, you or your development team should use image-optimizing apps to optimize every image prior to uploading it to our website, or to our client’s websites. Sometimes, the file size is reduced by even 80–90%. You should also save your images to the exact size they’ll be used in a project. For instance, don’t export images at 2000 px width if it’s going to be scaled down in the browser and used with only 300 px width — those extra pixels will still have to be downloaded, but you achieve nothing with the extra weight. I know, you want to show all the fine little details of your product. That’s fine. Who doesn’t want that? But, smart optimization wouldn’t make those details invisible.

Does your project have a lot of smaller images like icons or logos? Multiple requests toward the server will increase the traffic and with it the negative results of the “green test”. Consider putting these assets in a sprite image — consolidate all the small images into one big image with defined coordinates that are presented cropped throughout your project. Not that it only reduces the number of requests, but it also makes updating the design easier, because everything is in one file. This bigger image could also be larger in file size, but in comparison, this file size could be a lesser issue than too many requests toward the server.

Further on, what about font files? Maybe your brand requires custom typography, but you should optimize it. For instance, do you need all the weights and styles that are in the package? Maybe that one sentence in extra bold italics isn’t that necessary and removing it could shave off a few dozen kilobytes of your download size. The whole weight for just one sentence doesn’t seem right — there are many ways you can highlight your important sentence and give it more prominence.

Bold, underline, color, and size, to name a few.

Another option today that wasn’t available a few years back is the use of variable fonts. In one font file, you have all the variations you’ll ever need, depending on the variation axes of course. There is a way to limit axes’ values to your specific need with the use of custom apps like Slice.

In what language is your website? Do you expect to use some special characters? Export your font files with optimized character sets. For instance, Google fonts allow you to do just that.

When designing and developing Point Jupiter’s website we used typefamilies which sadly don’t come as variable fonts — Nassim Latin for headlines and other important textual chunks, and IBM Plex Sans for body text — but here is how we tried to solve this. By removing all unnecessary weights and defining a limited character set, we optimized it to our needs. It has exactly what we need, and it doesn’t bloat download quantities.

You can often hear us designers saying boundaries and hard tasks make our job rewarding and better. The more constraints and obstacles you throw at us, the harder the job, but the better-tailored solution we’ll produce. So, here is another task for you fellow designers and developers: make your products planet-centric as well as great human-centered experience, and successful business-oriented ventures. I dare you to turn these cool buzzwords into your next product.

Green hosting plan

Yes, hosting can be green. It can run on renewable energy sources. Some hosting companies offer to plant trees in exchange for your business — they try to balance out the production of CO₂ and its consumption by plants. So yes, a little research can give you all this information about your next hosting company. I believe it’s worth it. Also, you can make a great campaign regarding this for your product — running green.

some headline

Recently I read an article on faux care from some product owners. With the pretense of helping their users with good UX design, they actually sell bad products and services or simply exploit their user base. In the case of this article, regarding their business plan, I highly doubt they think of the planet or their users. They operate on profit-centric principles and completely disregard all personas, from human to planet.

Here’s an example. Have you bought airplane tickets lately? There is information served with every flight search result — kg of CO₂ released into the atmosphere. People generally want to do good, so we tend to look at these numbers and, if our budget allows it, try to pick the flight with lower emissions — if the budget doesn’t allow it, then we go for the cheapest regardless of the CO2 emissions. Will that make any difference? I doubt it. The plane will fly with or without you on board. And it’s just one flight out of many. But the product/service owner in our eyes looks like they give a damn. Which is of course fallacy — they just want to sell you their service. They aren’t flying on green or sustainable fuel. If you buy a lower-cost seat it won’t have infotainment and other perks — you guessed it right, these are responsible for higher CO₂ emissions because of online battery drainage, higher weight, etc. So spin this around and you get a seat that helps in eliminating C0₂, but it’s at your expense. Not an airline’s tendency to make its flights greener.

So, you could argue that previously I said if the company is trying to make a campaign, if they use or promote a greener approach, why wouldn’t the airlines do the same? Well, it’s not the same. They are not the ones making the leap. It’s just a good spin.

With all this said and done, how can we know if all our work is paying out? We should measure it.

Measuring the results

How would you measure the results? We at Point Jupiter did it with the help of various services available online. Here are a few. Please note that these are not paid ads — I'm proud of our accomplishment in this field and want to show it off.

1. At thegreenwebfoundation.org you can check if your hosting is green.

Point Jupiter’s website is hosted by green-certified Cloudflare and Hetzner hosters.

2. At ecograder.com you can measure how your page performs. The downside is that you have to test all pages separately, but still, it gives you a good idea of how you are meeting the planet-centric goals.

Point Jupiter’s homepage got an Ecograder score of 93 out of 100 and is producing 0.16 grams of carbon dioxide per page load. That’s pretty good but, Ecograder was trying to help us to excel by suggesting certain actions.

While researching this article I came upon various articles and companies who lecture about this subject. Most of their websites were not as nearly as efficient as Point Jupiter’s which surprised me profoundly. I’m pretty proud of my team's efforts to achieve this. It seems funny to me that when you preach something this important and you are unable or unwilling to apply it to yourself. Maybe we should have offered them our services. 🙂

This article was originally written for Point Jupiter's blog, but was never published.