Green user interface + experience design
First, let me introduce you to Re-
A new sustainable, all-natural snack brand that we recently launched out of Singapore. A brand that is not just passionate about sustainability but also walks the talk right from its manufacturing to packaging. So, when it comes to its website- can we make that sustainable too? Challenging, but I’ll try.
In an attempt to make this website more ‘sustainable’, I borrowed the 3Rs in the design approach. Reducing - Reusing - Recycling. Using this as a lens to design a more energy-optimized website.
Starting with adopting a lean UX approach to reduce the overall pages. Next up, reducing the data load from the visual systems. Intentionally using more illustrations in our design language to make it SVG-friendly. Even our product stacks were designed in order to keep them PNG-friendly.
Moving onto the component designs. Not just reducing but reusing them. Designing them to be modular such that we can have different iterations of the same component on different points in the journey without running the risk of repeating ourselves or creating an exhaustive list of novel elements.
Shapes, illustrations - we reused them too! And when it came to the overall design - we recycled the master design to build in a dark mode by simply inverting the text colour. And this feature deserved special attention, so we encouraged users to switch to our sustainable mode to save more energy on their devices while browsing.
What’s next? Well, sustainability is a work in progress, so we are working on further optimizing the site. If you have some interesting notes or insights to share, happy to jam and discuss the possibilities for greener UI/UX models.
Oh! and in other news, we are also working on gamifying by ‘Re-ward’ purchases that help create a more positive impact. Let me tell you more over coffee!
UX / UI design : Harshmeet Kohli
Copywriter: Ozkan Kusay