HYDROCITY APP
The challenge was to design a user friendly energy saving app. Adobe XD was used to design the app and After Effects was used to create the explainer video. I used Adobe Spark to showcase my entire design process from start to finish for the Hydrocity App.
PAIN POINTS
- Forgetting to pay bills
- Can't view their usage history from previous months
- There isn't a way for users to set goals for themselves
- Have trouble tracking how much water and electricity they use on a regular basis
- Want a fun and interactive way to save money and view their usage
- There currently aren't a lot of incentives that push users to save (reward programs)
- Too much information on the bills (want something more condensed)
- Want an easier payment method
BRAINSTORMING
- An app that rewards users based on their energy usage
- A reminder app that reminds you when your bills are due
- Create an interactive game that teaches users on how to save as well as how much energy each utility uses
- Cost calculator app that lets you input usage per hour and tells you the cost
- Tips app that provides useful tips on how users can save money and use less energy - can have a trivia game at the end
- An app that syncs to all your home appliances and tells you how much energy each one is using
FINAL DECISION
After brainstorming for a while it was decided to move forth with an app that can track both electricity and water usage for their household. My colleague and I wanted to make it easier for the user to see how much they were using and provide them with charts so they can visualize their usage.
HYDROCITY SUMMARY
Hydrocity is an innovative app that allows users to visualize their usage by connecting their meters through the use of wifi directly into the app. The user is able to view its yearly, monthly and daily usage through the easy to read graphs and charts. They will always be kept up to date on their usage. Users will have the opportunity to view their account information and make their payments in a timely manner so they never miss a payment. This app also has a built in feature to control all the lighting in the house with a simple slide of a button giving users the ease of doing so anywhere in their home. Hydrocity also includes a built in rewards system that allows users to collect points based on the users energy usage. These points can later be redeemed for discounts on their upcoming bill. There are also useful tips included to save more energy. This app was created for those who are looking to reduce their energy usage and save money in the process in a user friendly way.
STYLE TILE
I wanted to the design to be cohesive and use bright and energetic colours that also reflect the topic of the app which is energy saving. The goal with the design was to make the app design more user friendly and interactive that is why those charts were chosen to make it easier for the users to view their usage. In terms of typeface, Helvetica was chosen due to its simplicity. It is important that the app also stays inline with other energy apps so I chose colours that were normally reflected in those app designs as well to provide a level of visual consistency.
HYDROCITY WIREFRAMES
Based on our research we wanted to design an a 2 in 1 app that combined both electricity and water usage for users. We wanted to create a simple app that also gave users the option to view their bills and make payments to them. Onboarding was an important part for us since a lot of users were saying most apps did not give them that option to view their account information. A rewards page was also included to push users to save and provide tips to the users. In order to make it easier for the user to save energy we also included a circuit page that connects to the homes circuit and allows users to switch their lights on and off from anywhere in their home. There is also a more page that includes additional things such as language options, support, additional services and a logout option.
PAPER PROTOTYPE
We reinforced what we had drawn and turned it into a physical paper prototype that could be tested. We added additional pages to the home page to provide more detail to the user. The original home page only had the yearly usage, but we felt that the user should have an option to view both their water and electricity usage in further detail. Therefore, two more pages were added to outline their daily usage as well as adding a budget slider to give the users a chance to set their own budget goal. The payment and view bill option was also added to those pages.
DIGITAL MEDIUM FIDELITY WIREFRAMES
This is where we took the paper prototype and made them digital with minor changes to the design. We began to think about how we could make the app user friendly and laid down the foundation for the app using our paper prototype.
HIGH-FIDELITY MOCKUPS
The style tile and mood board were then used to create the UI for the app. Minor changes were made to the home page to reduce repetitiveness. The two bars were combined into one to show the user where they were with their current billing amount and their budget goal they had set out for themselves. A confirm payment pop up was also added so users can confirm their information one more time before hitting submit.
