GreenEarth is still one of the most exciting projects I worked on, simply because of how involved I was from the initial UI/UX to the design and then to the development. The client needed to design a prototyp of a smart greenhouse web app that their company needed to pitch to veture capitalists.
There were a lot of micro components to the proposed designs, but essentially, the web app needed to display live information from a remote greenhouse. The interface needed to be intuitive to any average person. I spent quite some time brainstorming how the app could represent anywehre from 500 to 5,000 sensors that each had its important statistics to display.
After trying multiple ways of displaying loads of information, I had the "AH HA!" moment. What is an intuitive and common way for users to visualize a large space with lots of nodes? A movie theatre ticket selection map! When purchasing tickets for any concert or movie theatre, users have to pick their seats amongst a variety of options, and their options are often displayed as little dots on a rudimentary map. Ex. "A12," "F07"...
But how could I then display all the information from each individual sensor onto a map of tiny little dots? Truth was, it didn't need to. Often, you can say more by displaying less. The only essential info that a user of a smart greenhouse needed when they first see the site is whether or not their plants are doing okay. It was a "Yes" or "No" question. Therefore, I categorized all the stats from the sensors into simply: "Is this sensor working fine?". If yes, then nothing will be different. If not, then the dot will appear red to indicate warning signs. Of course, we later added more to it, such as categorizing different types of sensor and adding whether or not a plant is ready for harvest. But the foundation of the design principle was: the less that needed to be displayed, the better.
The web app needed to function like a remote control. If a user clicks a button on the screen, a corresponding phsycial action will be executed in the greenhouse. The web app needed a UI that will provide that sort of live feedback.
I am very thankful of the client for allowing me to work with another developer to code the web app even though I had no experience in Angular going into the project. As you can probably tell, I sturggled a lot, but ultimately, I learned so much.
Because I have the designer visual mentality, I mainly worked on the front-end. But, I got to talk with the backend dev quite a bit about how to connect and set up services. I didn't realize how much effort it could take to just display an array of data points on an interactive graph that had a changeable time scale.
Unfortunately, due to this project being in its initial stages of prototyping and seed funding, the website and app is not yet released for the public, so you will not be able to see the live product of my work. But at least you got to see my design and development journey through it!