Element Utilities Hub

• 

  Logo

• 

  Natural Gas

• 

  Electricity

• 

  Water

Inspiration

Element Utilities Hub is a solution inspired by current resource use trends. Urban populations are depleting critical resources such as water, electricity, and natural gas, and there is a gap in comprehensive incentives to be conservative with their utility usage. We noticed how current measures of resource use, such as a monthly utilities bill, can be difficult to approach as it is not reported often and is only a measure of past use without giving users an easy way to plan a reduction in utilities usage in the future. Therefore, we created Element as a way to alleviate this issue.

What it does

Element measures users’ utility usage and expenses in our main dashboard. In this dashboard, users can view usage statistics like percent usage in certain appliances, current billing costs, and conservation goal progress, which is compared with the users’ usage. If usage is on track to go over the set goal, it will be indicated to the user via symbols and text on the dashboard and a negative expression on the sprites. Users can experiment with different usage levels with dials in the simulation tab, which calculates how much they save in each scenario. Finally, our community tab serves as a unique way to motivate users to conserve more energy, using a points system to compare and rank user’s conservation accomplishments across other users in their city.

How we built it

Our web designer first used Affinity to create a moodboard aligned with our design ideals. From there, he developed the logo using fonts and visuals from our art designer. From there, he used Figma to design the webpage layout and visuals. Here, our art designer used Procreate to design and draw the GUI and visual elements like the Sprites and the dials found in the simulation tab. After we finished creating the webpage design, we used GitHub to be able to share the code with multiple people. Our programmers then used HTML and CSS to create the basic front end of the website, and to implement the functionality of the website, JavaScript was used to calculate the simulations.

Challenges we ran into

We ran into difficulty with our communities tab, specifically point allocation. For a ranked leaderboard we wanted the points to be ranked completely fairly so that users can’t cheat the system to gain points. We needed to prevent users who were absent from their households for extended periods of time and smaller households from gaining an unfair advantage. Ultimately, we settled on a point system that is proportional to both household size and set conservation goals, not counting utility usage below a certain minimum threshold.

Another challenge we faced was building a product in line with our vision of a future city. We went through several iterations and brainstorming processes before we finally settled on our vision of an intelligent city. From there we collaborated in conceiving Element where we were able to expand on our initial intelligent city vision to create our final product.

Accomplishments that we're proud of

One accomplishment that we’re proud of is our sprite design. In the planning process, we wanted to include memorable and unique characters to put a fun spin on what may seem like a stressful topic to consider. Our sprite artist decided to animate expressions for the characters as a quirky way to motivate users to meet their set goals.

We are also proud of our minimalist website. Our designer made sure to use minimalist colors and curved framing in black and white to make sure that users aren’t distracted from unnecessary visual clutter. We take pride in the layout and execution of our webpage design and formatting.

What we learned

In collaboration, we developed valuable brainstorming, communication, time management, and problem solving skills throughout our design and implementation processes. Additionally, our designers developed their prowesses with the softwares Figma, Affinity, and Procreate and our programmers were able to get more comfortable with front end development and HTML.

What's next for Element Utilities Hub

For the next part of Element Utilities Hub, we will implement an AI that can look into what the customer is overusing in their house, and suggest ways to improve their use by decreasing the use of a certain product, or suggesting new products that are more efficient and can replace old products. Along with implementing an AI, we want to make state governments implement our system and gain login details, so that users can use what they use to log in to the city's portal to be able to log in to Element Utilities Hub.

Built With

• affinity
• css
• figma
• html
• javascript