Green UX/UI Design

Green UX UI design. It's a topic that is often referred to as just compressing images, doing only lightweight design. And although that's all valuable and correct that it's part of green UX, UI design, there is just so much more. And that's what I want to talk with you in today's episode about.

So welcome to the Green The Web podcast. It's a podcast about ecologically and socially sustainable design. And I'm your host, Sandy Dähnert, a freelance UX, UI designer and researcher based in Cologne in Germany and the mind behind green the web.

So as you know by now in this podcast, I do talk mostly about user experience and user interface design. So when we talk today about green design, I'm not going to go into renewable energy hosting and CSS and JavaScript compression, the right programming languages and technical things of any sort. We will go into UX and UI design very specifically.

So green UX, UI design is about bringing ecologically sustainable research methods into your processes, bringing in environmental actants, integrating nature into design and decision processes. That in itself is a huge topic that is often forgotten in actually integrating nature into our thinking processes and systems, thinking and design decision processes. The second one would be yes, lightweight design is a huge topic that we need to take care of. It's about energy and carbon reduce design, which is in itself part of lightweight design, but definitely adds on a couple of topics. It's about building greener e-commerce. All of these topics that are dedicated to somewhat of e-commerce in the digital realm. There is so much we can do. It's about changing behaviors in a positive way. It's about raising awareness, and it's about reducing negatives, increasing positives, and even enabling regeneration because we have to actually increase positive impact, increase positive effects onto the things that we already destroyed in the last decades, and actually enable nature and the ecological realm around us to regenerate and to get to a better place than what it is right now. Ramble. Done. So there is so many different topics that we can talk about, and I want to go into detail for a couple of those topics. So first of all, lightweight design because that's what we most often talk about. And in lightweight design I usually refer to the what I call the ten energy eating monsters, where it is about the monster of video, the monster of images and illustrations, the monster of animations and interactive elements, the monster of fonts, the monster of third party tools, the monster of click paths, the Monster of colors, the Monster of audio, the Monster of Storage, which is a huge one, by the way, is very often forgotten and the monster of Endless Variations. So there's ten energy eating monsters that I usually have in my mind and talk about when it comes to lightweight design. So we have an overview of what we need to think about. In lightweight design. We talk about page speed, page weight, have all those different calculators that are out there, whether that's Digital Beacon or Website Calm or Eco Grader or GreenSpector or all these other tools that are out there that help us to get a gist of how lightweight our websites, online shops, applications are. And I even do have a huge best practice library on that on the green Web.com website. So if you want to see how lightweight designs can look like, it doesn't need to be minimalist. It doesn't need to be boring or unattractive or any of those things. It can be super playful, colorful, amazing, and it can be minimalist if you want. It can be boring if you want as well. And I've done a lot of podcast episodes about lightweight design before, so just check out those podcast episodes that I talk about specific energy eating monsters, or what should we do to design in a lightweight way? The second detail part I want to talk about is energy and carbon reduced design. And first of all, yes, it's part of lightweight design, but it includes features that have a look on energy consumption and carbon emissions through that. For example, Organic Basics uses solar power for their low impact website. They do have two different websites. Still don't really get it, but it's a case. It's a use case. They wanted to show they have a low impact website and that runs on solar power. And if there is not enough renewable energy to power this website, the website just goes offline. It's not a thing that. Many websites will do, but it definitely does have an effect. So you actually know okay. Currently, there is not enough energy to power this website, so it just won't be online. And I have to wait once it gets up again. The low tech magazine actually does the same. They also do run on solar power, even more minimalistic than the Organic Basics website. And if it's not on, it's not on. It's as simple as that. Two other examples in this realm. One is the online bank Banca Etica. It's an Italian bank, and they reduce the energy consumption of the website while the user is not using the computer. So they display, once you get back on, they display this screen of hey, you've not been using the computer or this tab, so we just reduce the energy consumption in the background of our website, which is brilliant. Just one more thing that browsers nowadays will have more often in themselves of reducing background websites. But it's brilliant to have that as a company already in itself, whether that's on a website, online shop or on an application. And the third example is the branch magazine that automatically changes its design based on the quantity of fossil fuels on the grid that you have as a user to stay inside a carbon budget at all times. So they set themselves a carbon budget. And based on that, you get the branch magazine shown in different levels of quality. So less renewables results in lighter rendering of images and videos, as well as reduced script and a couple of other things that they do based on your fossil fuels on the grid that you're currently interacting with or from home. That is amazing. Things like that. Do you have a long way in bringing, first of all, more awareness, but also second of all, being very energy and carbon aware with what you're using, what you're showing at what time, and how amazing. I find it really amazing. There is a couple of other examples out there that use similar things, but those are a couple of examples I wanted to share with you. So we had lightweight design. We had energy and carbon aware and reduced design. The third topic is greener e-commerce that we talked about in this podcast a lot already. So I usually refer to the different topics of greener product choices, reduced returns, greener checkouts and delivery, sustainability, communication, and going the extra mile in the green e-commerce spectrum. It's about building in defaults, for example, for green shipping and actually incentivizing it and actually bringing that even to a more positive reference instead of just, oh, this is green shipping. It takes longer and is more expensive, things like that. We try to make it as positive as possible. It's about reducing returns as there is so much shipping from and to and back in e-commerce and reducing returns is a hell lot of a business KPI for sure. As you probably know, if you work in that sector, it's about bringing in greener alternatives, in product choices and communicating why it's a more ecological choice than using any other product or buying any other product, and how much you're contributing to a greater ecological future, things like that you can implement into your designs. The fourth topic in green UX, UI design that I often see and refer to is positive behavior change. So behavioral design, it's huge and we have to consider it creating habits in users that have a positive environment social impact. It can be small habits. It can be big habits. So for example using the bike instead of the car for a city tour, if I'm on the tourism website of Berlin, for example, and then they recommend and suggest to just using the bike instead of driving by car and even suggesting where to park your car outside of the city, things like that, little things like that. It's about buying less, buying more intentional, especially during times like Black Friday, Black Week, and all of those. At some point it will be Black month, black year, especially in those sales times and having all kinds of discounts of still promoting really thinking about what you're buying and that it should be an intentional way of buying. It's also about consuming more nature friendly products instead of cheap plastics, and really changing the behavior for a long term, not just do this once. Of course, it always starts with the once. But to actually change behavior and this is a more ecological way of buying, of using things, of consuming things, changing daily habits, of how people work, of how people act, travel, buy, consume, eat, use their devices. Little daily habits that need to be changed. I recently heard about a study that also shows that if people do a lot of little daily habit changes, they often forget about the big picture vision and don't see those big regulations that need to be done by politics and other things and feel like, well, I'm already doing a lot of the little things. So actually, we probably don't even need the big ones. I have to go even deeper into that, and I'm pretty sure that there's two sides of the coin in this case. So there is definitely a lot of people who get a first sense of ecological behavior with the small and little habits that they have, whether that's in food, in buying clothes, in transportation, things like that is most often the first step into a more ecological living. And then having your applications, your digital applications, websites and online shops tell you how things are more positive in what you do on a daily basis really, really helps. Whether that is in your electricity consumption, in how you use water in your household, and like those little things that you do every single day. It changes behavior in the long run. So we need to be aware of that. And then also talking about raising awareness and advocating for greener solutions. So shining light on the topic of ecological sustainability in all different aspects, clarifying that there is no perfect, but yes, there is greenwashing. We always need to point that out. But yeah, there's always a fine line between greenwashing and we are on our path and not perfect yet and really sharing that path, being transparent as a company, as a brand. Little nudges here and there, having campaigns around sustainability and about ecological sustainability in that sense. For example, email topics, advertisements, little content section, blog posts, just a random company note on LinkedIn about ecological sustainability goes a long way. So really raising awareness about the topic and advocating for ecological sustainability is part of green UX UI design. Having a sustainability section on your website as well or in your application, and bringing all of that awareness in there does help tremendously to shine a light on this topic. And then two more things I wanted to talk about in today's episode. One is bringing in environmental actions into your design and decision processes, really integrating nature into your processes. So first of all, think about environmental actions that get introduced into your company, project or brand. So what is environmental stakeholders environmental actions that you with your company, your project, your brand have a negative impact on or you want to have a positive impact on. So definitely it will be all of nature if we want to have like a rough environmental stakeholder. But you can go much, much deeper into certain areas. It could be countries, it could be regions, it could be rivers, it could be forests, it could be cities. So for example, Berlin as a city, as an environmental activist and stakeholder, that you have an impact on as a company because you produce your things there, or it's where your offices are or where your whole business is located in, whether that's with transportation and other things that you're doing as a company or selling things like that. Really thinking about the environmental stakeholders that you have a negative impact on, or you want to have a. Positive impact on and then creating full on profiles such as non-human personas from that. So picking out a couple of the ones that you have the most impact on, or you want to have a positive impact on, and creating full width profiles, such as with the human personas that we are used to in user research. Create that for, for example, Berlin as a city, as a non-human persona and put it next to your target people that you usually have. So you probably have three, four, five different target people, target groups that you always want to have an eye on. Whether this new feature, new service, new application is valuable for any of those personas or target groups. And just put on your environmental stakeholders right next to it to always ask yourself, is this actually beneficial for all of them? Or might be one of those personas, for example? Also, the non-human persona have a huge negative impact from it. It helps tremendously. I'm a big fan of it. And then also discovering the negative and positive impact your business or project has on those environmental stakeholders. I know this is the tough part of it all of really getting clear on what is the negative things that our project is contributing to or on this persona, on this act and on this stakeholder. How is my project influencing, for example, Berlin as a city? Are we crushing traffic even more? Do we contribute to frustrated people in the streets of Berlin with what we do as a business, as a project, all of those different things that need to be considered, and we have to have an eye on and how to bring more positive impact with your business on those environmental stakeholders. And then last but not least, sentence that I said before as well, reduce the negatives, increase the positives, but really enable regeneration. So yes, we need to start with reducing the negatives. It could be step by step slow movement. At least there is movement. It could be really fast. Depending on your company, the project, the brand you're working with or in. Every step counts. But it should never stop there. We shouldn't just stop at reducing the negative impacts to a bare minimum, but going further of cleaning up the mess that we did and increasing positive impacts really building features, communicating sustainability, raising awareness, all of those things to increase the positive impact we have and not even stop there, but ensure that we enable regeneration for nature, whether that's specific ecosystems, whether that's nature in total, whether that's again, just Berlin as a city, a forest, an ocean, a river, certain animals, a mountain region, a lake, whatever is your environmental stakeholders have a look into. How could we as a company, as a brand, as a project, ensure that there will be regeneration for this environmental acted for nature? If we all do that, then there could be an incredible future ahead of us and we need to talk about that. All of us, really, all of us. So to sum it up, green UX, UI design. Yes, lightweight design is part of it, and lightweight design also comes with compressing and scaling and doing all of those things to your images and videos and fonts and all of that. But there is much more like ten energy eating monsters that I talked about. Green UX UI design is also about energy and carbon aware design. It's about greener e-commerce. It's about changing behaviors in a positive way. It's about raising awareness and advocating for ecological sustainability. It's about bringing ecologically sustainable research methods into your processes and bringing in environmental actions into your design and decisions, and enabling regeneration. For nature, whether that's in a small scale just close by a park to your offices, or whether that's nature as a full ecosystem. All of those aspects, all of those topics are important. Each one of them can be viewed as a single topic, but also has a lot of references to the others. Have some cross points, enable each other. Help each other. Support each other. So let's talk about all of those different aspects. Yes, we can further on always talk about lightweight design. I still do that a lot, but there is so much more to it that we can have a look into when we talk about green UX, UI design.

If you want to know even more about green UX UI design, you can check out my green UX UI design course. There is a self-study version as well as a live cohort option available, so you can choose whichever feels most suitable to you and what you like the most to go through it. If you want to dive deeper into that specific topic and all of those things that we just discussed about, you can head over to green.com and find all of the information about the course. I'd be happy to welcome you in there. If it feels right for you to actually dive deeper in it with me as your host in the course, then as well. I'm happy to share all of this information that I collected on my path to this point.

So thank you so much for listening to today's episode. Subscribe to the podcast again. It's a podcast where I talk about loads of ecologically and socially sustainable design topics. This is season two of the podcast, so dive into the many awesome episodes that are already published. Rate the podcast if you enjoy the show. I've seen a couple of ratings coming in and it's so awesome for me to see, and it gives more people the chance to discover this podcast so other designers actually see that it's even existing. It would really mean a ton to me. And then visit me on green, the Web.com, or on Instagram or LinkedIn at Green the Web. I'm happy to hear about your thoughts on today's episode, to connect with you, to read from you, and then see you in the next episode.