Inspiration

The wildfires raging through California and Australia. The torrent of hurricanes, so many that scientists have exhausted the list of official hurricane names. According to the Climate Clock, we have only a little over 7 years before irreversible damage is done to our climate.

We felt the need to do something to protect our planet and encourage others to think about sustainability in their everyday activities. During a deep late-night discussion between the 3 of us, we noticed that a daily activity in which people don’t typically think about sustainability is showering. As showering is actually the second-highest usage of water within households, we realized showering is an activity that we can focus on as this can be an easy and effective way for someone to lower their carbon footprint.

And thus, Shower Power was born.

What it does

Encourages Shorter Showers

We recognized we need to make the process of conserving water during showers fun and interactive, and that it needs to fit into people’s shower routines smoothly.

Timer

We wanted the feature to encourage shorter showers and add a splash of fun into the user’s shower routine.

Ultimately, after we collect some basic information about the user and have determined what goals they have in using this app, we will start providing them with sequentially shorter timers in order to decrease their shower time, and ultimately lower their carbon footprint.

We recognized that although water conservation was important, we needed to preserve the relaxing aspect of showers.

To tackle this, we came up with a few features. Firstly, we give the users the option of taking Short, Medium, and Long showers. Each option will be a range, rather than a specific number. We also have built-in buffer times that give users ample time to get in and out of the shower, so the stress of the timer does not completely ruin the experience of showering.

Stats

This feature we wanted to implement was a combination of 2 problem spaces we wanted to address earlier. A problem we recognized is that people typically do not know how much water they use. We built a stats page in order to help users visualize their water usage and also, their progress over time! Graphs will visualize their water usage over time and tell the user exactly how much water they have used. Users can now quantify how long their showers are, and also see their environmental impact. By displaying how many gallons they use, we hope that users will finally have an idea of their footprint on Earth.

Aquarium and Badges, Personal Incentive

In order to incentivize users to continuously use this app, we have an in-app reward system: the main one being the aquarium. Each use of the timer begins the process of hatching a mystery egg. Showers that are canceled or pass the time limit result in the death of the egg. Showers that do not pass the time limit will result in the hatching of this egg and addition to the user’s aquarium.

Each level gives the user gains also adds more fish they can look forward to hatching! You can see some of the fish you can collect above in the gallery.

Alongside the stats functionality, we created a badge system. When the user hits certain milestones, such as shortening their shower to 15 minutes, they can receive these badges. This badge system is another way for us to incentivize the user to continue using the app.

How we built it

We started this hackathon with just an idea and have been working to bring this out of the water.

We started off by examining problem spaces. Then jumped into brainstorming and creating many “How Might We” post-its. And from there we started designing a platform in which we could address our chosen problem space of showers.

We first started with a general design brief, which can be seen above. This included fonts that would eventually be utilized in development, general components that could be componentized (in Flutter), as well as our main logos and colors.

Next, we began on low-fidelity mockups, drawing basic ideas, from stats, to profile, to the timer. This evolved into more mid-fidelity mockups in Figma and began basic prototyping.

Finally, we finalized designs, features, and finished the design process with some A/B testing with friends. This led to our final Figma prototype that includes all the features we wanted it to have.

With the design done, we began taking a look at the implementation. Due to time constraints and the learning curve of learning a new language (Dart, as opposed to Swift or React Native/Javascript that Gordon and Justin were familiar with), we decided to begin basic research into Flutter, as well as beginning on developing out the backend. In the above gallery, one can see the Backend Schema/Flow Diagram for Users (utilizing OAuth), Profiles, and Data that will be stored.

Challenges we ran into

This is the first time that a majority of us have used Figma to this extent. Many challenges that arose during this hackathon come from the learning curve that Figma has. Prototyping it and having this look like what we envisioned during our sketches ended up being more difficult than we thought it would be.

Another chunk of challenges comes from the fact that we came into this with such a broad idea that we quickly realized that many of our original features, such as a friends feature or an environmental newsfeed, had to be cut out to form a more cohesive final product. We had come to many difficult decisions in deciding what features to prioritize for this MVP.

What we learned

Though we sped through the process, we were able to get a glimpse of the product development cycle. This process is something that is new to most of the team and going through this has been a very rewarding experience.

Being able to go on Figma Mirror and see our final product is also something that we are very proud of. We were able to learn many Figma skills and apply them this past weekend, including prototyping, utilizing Figma Mirror, A/B testing, and more.

What's next for Shower Power

Next, we look forward to changing this prototype into a working app via Flutter, Google Firebase, Microsoft Graph API, and/or GraphQL API. We are leaning towards utilizing these two technologies in order to finish off this passion project.

We are also going to be implementing features that did not make it into our MVP. This includes the environmental news feed and friends feature. The environmental news feed is a way for users to keep up to date with the current issues at stake in our environment, which will motivate them to keep improving on their shower routines and apply this thinking to other parts of their daily lives.

The friends feature is a way for users to compare their shower routine improvements with their friends on our app, which will motivate them to work together collectively to reduce their overall shower time. Perhaps they can even battle and compete for the shortest shower times.

Ultimately, there is a lot in store for Shower Power, and we hope that we will be able to continue and build a working app to ultimately deploy.

Built With

Share this project:

Updates