- socialbutterflyish
Sustainability websites with great UI/UX
The title is a bit confusing, right? There are discussions about making more sustainable websites with the help of UX, with a lower carbon footprint, but my focus here is to analyse websites with great UI/UX built for companies who address sustainability, mostly in fashion.
There’s a lot of interest in Vegan Sustainable Fabrics, aka fashion made from fruits, veggies, plants, and luckily there are more and more companies innovating to offer solutions. I put together a list of them and I promised I’ll analyse their websites for you.
Some of them managed to innovated in the UI/UX section too, by putting together not only beautiful, but also functional websites.
I also shared my thoughts on how much a website should cost, with a few guidelines and a base from where you should start. Those points were made to help you understand what needs to be done, and how to hire a freelancer or an agency to build your website.
When it comes to the actual content of the website and how it should look like, there are a few more important parts, which I’ll try to explain here, with examples from the sustainability world.
FACT: A website is a marketing tool after all, so, your target, the user should be always on your mind, at the centre of how you approach your topic/service/product. It becomes your business card and potentially a sales tool.
Focus on the:
Focus on the topic
with your user in mind
It is about innovation - sustainability - strengths - details
Innovation itself is not always easy to explain to an ordinary customer/user, especially when there are a lot of technicalities involved, like real science.
Sustainability is also a complex topic, that has to be addressed step by step and adapted to what your product/service is solving.
It is extremely important to be able to translate the information, to detach as a company from the "lingo" and from what is important from the specialist view. Don't fall in the "specialist trap" and don't use the excuse that in "our field" it has to be like this, others do it like this, can't be shiny, can't rewrite rules.
That's where you make the first mistake - if you innovate, you already rewrite the rules and the website should feel innovative too, should engage, and it should educate.
Bolt Threads is developing the next generation of materials - not only mushroom leather, but also cosmetics and silk fibres.
They’re a complex company - they have to present themselves by the benefits they bring, the technology, which gets the first section of the menu too.
The Homepage is structured by presenting their stars, the materials, based on novelty. The latest launch, MYLO, gets a button and after the fold it gets more space.
They also made Mylo a separate website, which I’ll address in the storytelling section.
There are various other options to focus on the topic, besides a clean structure, and the adoption of an easy copy coordinated with appealing photos.
Using graphical elements or illustrations.
The easiest way to explain a process or a more complex theme is to get a piece of paper or a board and start drawing.
The same works on websites: from orange juice to silk made from it by Orangefiber, or seeds that can be grown in labs.
You need to pick the relevant keywords, use as little as possible text which is there to explain everything in the easiest way and some graphic elements that shows a flow or add visually to the explanation.
Those exercises in which you need to reframe issues and explain them to kids or to your grandma might come in handy when you want to educate your users.
Our brain loves to be used to decode and build up information, feed it!
Focus on the user
Ananas-Anam developed leather made from the leafs of pineapple. Pinatex started being developed in the 90s, it is the oldest innovative company in the list of sustainable vegan options, and it is therefore well established. From their website you can feel they have and know their focus. One of them is their final customer who buys the leather which comes in a big variety and is sold in their e-shop.
The choice for the fold, the upper area which you first see when the website is loaded, helps the user navigate and go straight to what he's interested in. Of course, the burger menu is also there to see all options/pages.
It is a very clean and minimal approach which might come in handy for companies which have more complex services, with the same scale of importance. It is visually appealing with strong imagery, helped by text on hover and guides the user.
For those interested in buying it, the ecommerce section is one click away.
The first timers or those researching the subject will want to find out more about the company in About us, and those who are not convinced and want proof, have the hashtag #madefrompinatex
I've also used this approach for a website serving a coworking space that offered remote working services, and events, but I ditched the option to scroll down and that might have pushed too much the user to decide what to choose. Being able to scroll is an automatic mechanism which users are used to.
Focus on the story
Storytelling
This is what differentiates the good from the best.
It's a way to take information to the next level by wow-ing the user, by making him feel something.
If you're able to make your user feel negative and positive feelings, to take him on a carousel ride of emotions, you managed to understand the power of storytelling. I started with the negative because when you're solving problems, you might need to start with making the user angry because of the problem.
Of course, it is not only great copy or shocking images. It is the perfect mixture between imagery and text, between graphics, colour scheme, fonts, static and dynamic images, the use of parallax... Your pick, it's all about creativity with a clear scope.
Once again I touch the balance idea, because extremes are definitely not a great ingredient when creating websites, either. No one likes to open a website and not know what to click or be overwhelmed with too much text, or too many animations. You get the idea, creativity has to have a good project manager.
I'd love to meet the person or team who was in charge of developing the website for Vitro Labs. It is a website that I feel I can give as a good example for having covered all the focus points I mention, and it is a good case study, no matter the industry.
Why? It gets your attention from the fold, and it explains to you what the website is all about: They found a way of making a vegan leather by using medicine. The first phrase covers the essence from the process to the final product and the look of that cow makes you melt, although it's not a cat or another furry insta star.
They sure made the cow the star of the website, and they even call it the Mother of the Leather, which evokes positive emotions, belonging. They underline that the cow is not harmed, it is happy.
Winning receipt elements:
Simple, yet impactful language.
Soft tones, color block plus graphic details, impactful, stylish photos.
Serifs for titles, sans serifs for paragraphs and soft animations.
Consistency on every page.
Another excellent example of storytelling can be found on a single page instead of a whole website - the case of Qwestion, the brand producing bags from #bananatex.
I chose this page, because it is heavy in imagery, including a documentary, plus good copy, which can be enough to dwell you in.
They are the ones who also produce the material, and to totally go bananas you must visit the separate website of banantex.info too, where you'll find THE BANANATEX® LIFECYCLE presented through another desirable tool - animated graphic video.
Their website is a very safe version that ticks off all the 3 focuses, going the extra mile only through the animated video.
You get to learn about the unleather and follow its journey while scrolling through beautiful fantastical images with transitions made with parallax. It is a good example of storytelling because while introducing concepts like unlearn, unearth it combines the description of mushrooms are growing with the commercial, the introdcution of the products made with this unleather.
The future is mystical but based on science.
Learning from mistakes
From the examples I named as innovative companies there's one that unfortunately will be used as an example to underline mistakes.
But it's a constructive approach that explains the reason why a lot of companies fall into these traps. The main issue comes from missing the focus on the user, or let's put it in the category of lost in translation between the eternal marketing verus sales battle.
There are companies that are fully based on sales with a big human impact. That means that the website is not a marketing tool for them, it doesn't support sales with more than contact details. Yes, the focus is on the user, but the user here is a customer and it's approached with a clear sales mission. The customer was never a user who discovered the company online or learned more about it digitally and will most certainly never become one either. The "specialist lingo" and the repeting of call to action can come across as agressive...
Vegea company is an Italian company and here comes also a strong cultural aspect of the business, especially in fashion. The presentation and deals are made at fairs, or in face to face meetings. Which translates into good business, because they don't rely on getting new customers from the digital world, and they're probably not looking to impress investors or planning to expand globally.
Orange Fiber is also an Italian company, but it is a start-up, which means that they understand and seek development that they might not be able to plan yet, so the way they present themselves online, is their visit card, their portfolio.
I'll end this discovery journey by inviting you to share your opinions on these examples of websites of brands who innovate in the sustainability field with me and of course, show me your favourites and tell me what made you choose them or obsess over them.
For those of you who have no idea what qualifies me to have all these opinions, hopefully the way I analysed them made you at least guess that I come from a marketing background and yes, I've built myself some websites too for various clients. I'm passionate about UX because I care about the user and believe that websites are a great tool for information, education and a nice dose of entertainment.
My secret wish is to have only websites that are eye-candies with mental chewing gum properties.
Comentários