Inspiration

We were initially inspired by an app called Goods Unite Us, which is not an app focused on sustainability but rather on informing the public about what policies and political parties companies are supporting financially. We then were inspired by the design and character of The Pudding's How Bad is Your Streaming Music? A.I., which analyzes a users music account to make snarky, amusing comments about the user’s taste in music.

There were other, smaller factors that played into our inspiration for the whole concept of the project, such as Finch, an app designed to keep users caught up and engaged in self-care. Daily tasks to stay on track and remain competitive seemed like something important on the individual level to maintaining a more sustainable, environmentally-conscious lifestyle.

What it does

Our website is far more than just a typical carbon footprint quiz. Ideally, after taking a quiz that takes into account your living environment (urban, rural), age range, and climate, questions will be asked that are more within your realm of control. No longer do middle schoolers have to be asked how often they eat meat when their parents are the ones that put food on the table. No longer do those living in rural environments have to feel guilty for not walking everywhere when simple errands can be miles apart. A more personalized profile allows for more focus on active change that can be done at the moment for an individual rather than demanding something impossible.

Once your initial circumstances are established and you take the sustainability quiz, you will be given a quantified number. From there, your username will be added to a leaderboard with other users to see where you stand. Of course, a low initial score is not the end of the world! It just is more of an opportunity to grow out of your comfort zone and nourish the world around you. It is easy to raise your score as well, as there are tasks that are assigned different point values every day. Completing everyday mundane tasks, more time-consuming tasks, or a mixture of both can all raise your score so you can watch your own improvement, help the environment, and rise above those around you.

On the back end, our website has many complex processes running simultaneously. We used Firebase to operate and collect and maintain registration data from users. We also used a Google Cloud function in order to reset the daily improvement tasks for the users, since we wanted to allow them to build and maintain habits by sending reminders to repeat certain achievable tasks that would reduce their environmental impact on a daily basis. Furthermore, we utilized Twilio to implement user greetings and send users daily reminders to do their tasks, since we do not currently have a mobile app. Finally, we registered the domain environmentality.tech with Domain.com.

How we built it

We built this project by spending a couple of hours together brainstorming ideas on what we wanted to try and implement. After that, we began the process of splitting up the tasks into separate groups. Sprihaa focused mostly on design, Johan focused mostly on front-end development, Tanmay focused mostly on back-end development, and Kate focused mostly on the creative process and application appearance. Despite having separate realms, we all worked together and asked for input on the way certain aspects would come into play and interact with one another, and it was a very collaborative space.

We never truly strayed from one another, and if one person took a break for their wellbeing, someone else was able to use what was already done to continue the project’s work, rather than figuratively wandering aimlessly trying to find busy work. It also allowed us to learn things amongst each other that were not necessarily in our individual wheelhouses. For example, Kate had spare time at one point and was shown the (very basics) of back-end development. We all brainstormed how the back-end and front-end would integrate with one another, and how visual aspects would work best for the user experience. The overall visualization was done in applications such as Figma for each page’s guideline, and the likes of Procreate and GoodNotes to visualize and brainstorm different processes for logos and quiz scoring.

Challenges we ran into

For the backend, we initially struggled to figure out how to choose the framework. However, once we decided to use Firebase, we realized that a lot of processes would become streamlined as a result, such as our eventual deployment of the website to the domain we created with Domain.com, environmentality.tech.

We chose to write the connections between the front and back ends in plain JavaScript as a compromise, since it was what our Front and Back end coders both knew. However, this came with its own challenges, particularly with state management and asynchronous functions.

Overall, we had quite a difficult time figuring out how to start at the beginning. We were all quite overwhelmed with the different number of tracks and potential ideas we had. We struggled to synthesize our ideas into a single project, and even when we had a solid idea, it was difficult for us to pick and choose what aspects of the project would be possible to implement and what we would have to leave off until future implementations, since there was a lot we wanted to do and not a lot of time.

Accomplishments that we're proud of

One of our major accomplishments for this project was not using any starter code. All of our code was written from scratch, so we had a lot of trial-and-error along the way, but we ended up with a functional project and a strong vision of what we would like to do next within the 24 hours of the hackathon. As a result of this, we also had full freedom over how we wanted the end result to look and respond. We were able to easily translate most of what was in our Figma model into a responsive website while customizing the visuals, colors, and structure of each page.

Another big achievement for us was going through the design process of creating a UI from scratch, from the layout, theme, and fonts used on each page to designing an original logo and product name. This was the first time any of us had laid out everything ourselves, from scratch, without starter templates to build the design off of. We started by building a demo of our desired final product in Figma. Simultaneously, we decided which features were most important to include in the coded prototype and began to translate the images in Figma into actual code. With this workflow, we steadily went back and forth through every aspect of our website and filled in any blanks as inspiration struck.

What we learned

One thing we all learned for the first time during this event was how to work with Figma. None of the designers had ever used it before, but since the main designer’s access to the Adobe suite of products had unfortunately expired, we had to compromise. Although there was some learning curve, we were able to adapt quickly and learn how to translate our ideas to imagery.

This was also our first time working with Firebase, Twilio, and Domain.com. We used Firebase to keep track of the database of user registrations as well as the daily task refresh at midnight. We used Twilio in a threefold manner. First, we used it to send the results of the Sustainability Quiz to the user via MMS. Second, we used Twilio to send users daily reminders to log into the website and work on their daily tasks. This implementation was in conjunction with Google Cloud and Firebase in order to keep track of what tasks were completed on a daily basis and ensure that they reset in a timely manner. Finally, we attempted to use Twilio for OTP mobile verification. While we weren't able to get it working yet, we believe it would be viable for the next iteration. In addition, we used a CI/CD pipeline with GitHub and Netlify to streamline working with team-members and deploy code instantly on servers.

We were a cross-functional team that was constantly working on different parts of the project. Throughout this project, we learned how to effectively communicate between the Design team and the Coding team while trying to make progress on both ends, which resulted in a valuable experience for all team members.

What's next for environmentality

One of the first steps we would like to take to improve environmentality is to create an "Add Friends" feature. Using this, we could also facilitate the creation of private leaderboards between smaller groups, on top of the global leaderboard.

We would also like to add all of the features in the Figma model into the website's code. For instance, the information boxes that appear when the user hovers over the icons on the improve page would require implementation. We would also like to add greater variety in the number and type of tasks available for completion.

Based on the types of tasks that users lean towards completing, such as water conservation tasks or meat reduction tasks, we would like to develop a system that has badges corresponding to their achievements to the leaderboard and their profile.

We would also like to further develop our application of Twilio by adding a feature where a user's friends get a text notification with how much the user has improved since the last time they took the quiz every time they retake it after creating their account. Also, users will receive text notifications every time one of their friends moves up in the leaderboard rankings. All of this is meant to help motivate users and remind them to visit the website daily in the absence of a mobile app, which we would also like to create in the future.

Overall, we have plenty of plans for environmentality's future development, and are excited to work on it in the future as well!

Share this project:

Updates