Latest TT 5 POSTER-12.png

Twisthink works with Aircuity to Build User Interface Design with Powerful Airside Efficiency Software, Creating Aircuity 2.0 Tool Suite

aircurity final-08.jpg
 

The client

Aircuity is the smart airside efficiency company providing building owners with sustained energy savings through its intelligent measurement solutions.

Project goal

Create a new platform, which includes both desktop and website applications, will significantly reduce energy costs and improve safety and productivity, while achieving quantifiable results for smart buildings with Aircuity. 

aircurity final-08.jpg
 

Team work:

Identify Stakeholders

aircurity final-25.png

Accounts
Services

aircurity final-26.png

Sales
Project Manager
Engineering
Field Service

aircurity final-27.png

Facility Owner
Building Manager
3rd Party Contractors
Other

Host HCD (Human Center Design) workshop and establish journey map

IMG_0583.JPG
 Journey map initiate

Journey map initiate

 Stakeholder Work shop

Stakeholder Work shop

 final refinement

final refinement

Conclusion

The new dashboard will includes five sections:

1. Summary

2. Savings

3. Trend

4. Parameter summary

5. Service & Maintenance.

 

Goals:

1. Data Capture - Faster & easier

2. Project Status - Identify key stages, roles, and responsibilities

3. Reporting - Critical information to stakeholders

aircurity final-10.jpg
 

My role

My responsibility is to rebuild and redesign its current MyAircuity web dashboard structure/wireframe and create an intuitive new user interface that can provide actionable insights, transparency and accountability to building owners and facility managers.

Pain points

After many rounds of interviews and workshops with stakeholders and aircurity team, I have noticed a few pain points from the original dashboard.

  • Users don't know which section they should be look at first due to the same scale spaces.

  • User cannot easily understand the meaning of each graphic without any text description/explanation.

  • Trend section displays 12 months data on the left side of the dashboard, however, the limited space congest its graphic

aircurity final-20.jpg
  • In savings section, the money and energy savings information which user cares the most have being pushed into the corner.

  • Too many empty spaces are wasted. An unnecessary large scale meter face dominated the entire space.

  • In general, the dashboard text size is too small, It reduces its legibility dramtically.

Solution

As mentioned earlier, I noticed the stakeholders pay closer attention to the information related to money and energy. In addition, they think a good dashboard suppose to deliver information quickly, accurately and clearly. In order to achieve the goals, I've explore many different options and improvements for the new dashboard : 

Layout exploration

Comp_1.gif
 
  • I listened to our users' need by adding more sections into the new dashboard.

  • Following human reading behavior, I designed all sections navigate through a linear direction, from left to right.

  • Creating a layout hierarchy by unevenly distributing the spaces can visually show user which section is more important, and it would captures their attention faster as well.

  • I chose users' most interesting section (savings) as the priority read and enlarged its scale. Made the other half graphic (trend section) be the secondary read.

  • A chronologic-based diagram (trend) should utilize the full width of a page to display more information and increase its legibility.

  • A brief text in the beginning will not only summarize big reports for user to look at. but also explain and support the data that users might have questions about.

2-21.jpg

Graphic exploration

I've created a few different graphic prototypes to find the best design solution

aircurity final-13.jpg

Pro + Text summary on the left side of the page which leads the most important graphic stand out as much as possible.

aircurity final-16.jpg

Con - 1/2/3 steps weren't necessary in this graphic. it also brought misconception of the largest graphic become the least important (3rd place).

aircurity final-14.jpg

Con - The rectangle support graphics don't match with the main circle shape very well. 

aircurity final-16.jpg

Pro + The arrow at the side of circle is better than at the top, because a point-down arrow locates at the top of the graphic might deliver a wrong message to user.

aircurity final-18.jpg

Con - The two support graphics are too far apart, relationship between those two data become weak. Too much white space remains at top right corner.

 

aircurity final-14.jpg

Pro + All circle shapes ties back to original dashboard circles, it follows users' left to right reading behaviors which made the essential graphic easier to see.

 

Progress evolution

Creating a simple and elegant dashboard is the goal of this project. In early prototypes, I placed many temporary numbers and texts in the dashboard as talk points while reviewing with stakeholders. After many rounds of collaboration, I eliminated many unnecessary data  and functions, simplified and created better user interfaces and experiences. At final iteration, I adjusted some text alignment issues and  plugged real data  into the chart. At the end, I made an online mockup to let users walk through all process. 

Early concepts

aircurity final-23.jpg

After many rounds of iterations

aircurity final 2-24.jpg

Final design

aircurity final-25.jpg
 

Color Palette

Based on Aircuity's brand color,  numbers of related color palettes were developed , a few bright and warm ones used as signs of warning to attract user's attention. 

aircurity final-28.jpg
aircurity final-29.jpg
 
aircurity final-31.jpg

Final dashboard design

aircurity final-02.jpg
 

Interaction animation

I made both animation and clickable interactive mockup for user to have deeper understanding of how this dashboard works.

aircurity_final_4.gif

Press Release

“Twisthink’s vision and strategy were an invaluable part of our success,” said JoAnn Garbin, chief innovation officer for Aircuity. “The team’s combined experience in integrating software and interaction design made them brilliant contributors to Aircuity 2.0. We are migrating our entire portfolio of over 700 installations in 17 countries to the Aircuity 2.0 platform.” 

——JoAnn Garbin, chief innovation officer for Aircuity.

http://twisthink.com/twisthink-works-with-aircuity-to-build-user-interface-design-with-powerful-airside-efficiency-software-creating-aircuity-2-0-tool-suite/

“The MyAircuity web app was designed with users’ input and moves beyond simple data trends to deliver deeper analytics of cost and energy savings, indoor environmental quality responses, and occupant behaviors. The redesigned user interface presents the highest priority information for each stakeholder, on demand or delivered to their inbox or mobile device.”

http://www.aircuity.com/technology/aircuity-2-0/

Thank you for your time!

Latest TT 5 POSTER-12.png