The goal was to create an application that would allow individual offices to regulate their energy usage. It was built using J2’s Fin Builder Technology alongside with Inferstack, so it was able to connect to our T-Star devices installed in each of their buildings. The T-Stars would process and record information which would then be called upon by an Axon function written by our Engineers. The information would then be represented on the energy page of the application.

We really wanted the app to promote a sense of community. A place where users from different offices in different states could feel connected as they strive to achieve a single goal.

Wireframe Process:
Homepage

Naturally when I begin the wireframe process for an application, I begin with the homepage. After speaking to the users, one of the recurring things they wanted was the ability to quickly view the statistics of their office. Our first thought was to use a drop down menu for selecting but it didn’t feel personal enough.

I felt that we could connect with the user on a more personal level with images of each of the offices located on a carousel slider at the top of the page. Visually this proved to really connect with the user by creating a sense of community. To use the carousel, the user would click the picture of their building which would then open up a their analytics page directly in that same tab.

The other important thing you will notice on the home page is just above the navigation menu. NRG is a very forward thinking company that tries their hardest to make climate-conscious politcal decisions. To showcase their collective achievements, we added a live update of CO2 emmisions avoided. Later on in the prototyping stage, we added a function that converted that number to it’s equivalent number of Tree’s Planted.

We also wanted the home page to really be a summary of everything else on the website. If the user was still interested after a small summary they could click the link and it would bring them to one of the pages in the top menu. This made it easy for the user to get where they wanted with a single click and limited scrolling.

Wireframe Process:
Innovate

The first thing you will notice is that we have decided to carry the location carousel across every page as a static design element. This was done for two reasons. The main reason was to make navigation simple. We learned through user testing that after reading up on a blog, checking out the leaderboard, or watching a video, the user would be motivated to check out their office’s performance. Instead of having to go to the home page, the user could now jump right into their office from any page. Second of all it serves as a constant reminder of their goal to be more energy efficient community.

In 1997 Matthew Lombard and Theresa Ditton wrote that Presence could lead users to experience perceptions, thought processes, and emotional responses similar or identical to those experienced in human to human interactions. This is an app used to promote energy efficiency and green energy. Therefore, we want using the app to feel as natural as living itself. We are also striving to create human to human interactions through the use of our app. What better way than building a presence? By using high quality photos and an educational video we create an illusion of non-mediation.

Wireframe Process:
Leaderboard

This page is a crucial part of our apps success, because it helped achieve both of our goals. It made the app fun to use while encouraging the user to take steps in achieving energy efficiency. I pitched the idea in our weekly meeting of implementing an office leaderboard. The leaderboard would use live energy statistics to show which offices were saving the most energy relative to their size. Each month a winner would be crowned, and a blurb would be written about them in the bottom corner. The picture of their office would remain there until the following month. The gamification of our app allowed us to create a more engaging online environment, by rewarding energy efficient offices with bragging rights, and positive feedback.

Wireframe Process:
Comparisons

Another very crucial part of the apps success was the comparison page. This page allowed the user to compare energy savings and other variables of two different offices at once. Originally this page gave the user many different options for comparisons and graphs. After discussing it in a weekly meeting we decided it wasn’t necessary to give the user so many settings. Our Inferstack platform at the time was already doing this efficiently, but had a high learning curve and was used primarily by in-house programmers. We went on to simplify this dashboard during the wireframe stage. By noticing the issues in the wireframe stage we saved ourselves and NRG a lot of time and money during the development stage.

The final product ended up with 2 charts. The first was an office comparison chart with drop down menus and a number of different variables to compare. The second was a live reading with historical data of how your office was performing over a selected time period.