As an aspiring UI/UX developer, I wondered how designers and visual creators could play their part in driving an effort against today's environmental crisis and spread awareness about the impact of the technological industries on the climate. As a designer and developer, I love being able to harness the power of cool new tech, but I didn't realise the part it plays in the global environment, and the ways in which our small actions can lead to larger consequences.

So, I decided to create the Ecochrome Project as a Speculative Future tool, that can help us visualise ways in which designers and front-end developers can be more aware of the decisions they make and the ecological impact it can have. This project focuses on colour! Because that's where most creatives will start when they begin a project. My tool aims to help you see how a seemingly small decision; like what colour palette you should use for your fun new app, can equate to something more... In this case that's energy consumption on an OLED screen.

While not all screens are OLED, most modern day phones and laptops are shifting towards this kind of screen-based technology to help optimise power usage. I hope this tool can help you learn something new today, and can be a small part in creating a larger conversation about environmental activism in design and development!

The idea for this project was heavily influenced by other projects like the Cyberfeminism Index, Illuminating Radioactivity and Website Carbon API. I also generally took inspiration from my own eye-opening experience in this class and wanted to create a final project that was a thank-you letter to the things I learnt through my semester.

I began my project by understanding the study published by Google about how specific RGB colours consume higher or lower amounts of battery and energy on OLED-based devices. I also started to consider how I could use this knowledge to create an interactive experience that exposed this to other designers and developers like me.

My key findings were:

I chose to design a web-based paint tool inspired by the flash games of the early 2000s. This familiar tool served as the medium to help my users understand what the impact of using different colours was, so that they could learn about the concept through play.

I began by wire-framing what I wanted the site to look like. I decided to have 3 key sections:

• The Paint tool that would serve as the homepage
• An About page to explain the research behind the tool
• A Resources page to share more knowledge (because we don't gatekeep!!!)

From Design to Implementation

After reviewing the initial wireframes with Professor Ralston and my peers, I created a GitHub repo and got coding! I decided to use Netlify to host my website, and used React.js and JavaScript to create the website. I picked this tech stack, because these were technologies I wanted to explore in a setting outside of traditional Computer Science classes.

Micro-interactions

As I began to iterate on my prototypes, I started to think about how I could invite users to learn through exploration and play on my website. At the core of this project, I wanted to create an experience that encouraged learning, so that users could have their own Aha! moments, just like the ones I had experienced through the course of this class, as I learnt about so many eye-opening topics.

I observed how users were interacting with my website, and realised that there were several micro-interactions I could add to both add to the aesthetic experience, as well as the learning journey.

Design Decisions

Several design decisions drove the creation of this simple website!‍

• The font I chose to use is Lucida Console. This font was designed to be extremely legible on a low-resolution display, and one of the font designers was a woman. This font is also a system font and is an ode to the text style of CRT monitors.
  
• I only used six colours on this website to maintain a simple dark mode theme. While dark mode is great for being energy efficient, it's important to never use white text on a pure black background (to be gentle on the eyes). For this reason, I chose to use a deep green-grey background instead, with a bamboo green highlight colour and a fuschia pink for accents.
• The code used on this website is entirely my own, but I did use several open-source references which are linked on the Resources page of the site.
• The energy bar's math is calculated using approximations derived from the Google research chart. All white is considered 100%, and all black is considered 0% (although keep in mind that black will never be fully 0%, and would be closer to 10%. This was changed for ease of uniform calculations in the tool). In comparision, the R, G, B values are weighted at 0.25, 0.3 and 0.6 respectively. This is because according to the chart, red consumes about 25%, green about 30% and blue about 60% (if white is 100%).
• This site was prototyped on Figma