Twisthink works with Aircuity to Build User Interface Design with Powerful Airside Efficiency Software, Creating Aircuity 2.0 Tool Suite
Aircuity is the smart airside efficiency company providing building owners with sustained energy savings through its intelligent measurement solutions.
Create a new platform will significantly reduce energy costs and improve safety and productivity, while achieving quantifiable results for smart buildings with Aircuity.
Rebuild and redesign its current MyAircuity web dashboard structure and create an intuitive new user interface that can provide actionable insights, transparency and accountability to building owners and facility managers.
3rd Party Contractors
Human Center Design process and journey map establishment
What we've learned
The new dashboard will includes five sections:
4. Parameter summary
5. Service & Maintenance.
1. Data Capture - Faster & easier
2. Project Status - Identify key stages, roles, and responsibilities
3. Reporting - Critical information to stakeholders
After many interviews and workshops with stakeholders and aircurity team, We found 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
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.
As mentioned earlier, we 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, we've explore many different options and improvements for the new dashboard :
We listened to our users' need by adding more sections into the new dashboard.
Following human reading behavior, we 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.
We 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.
We've created a few different graphic prototypes to find the best design solution
Pro + Text summary on the left side of the page which leads the most important graphic stand out as much as possible.
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).
Con - The rectangle support graphics don't match with the main circle shape very well.
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.
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.
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.
Creating a simple and elegant dashboard is the goal of this project. In early prototypes, we placed many temporary numbers and texts in the dashboard as talk points while reviewing with stakeholders. After many rounds of collaboration, we eliminated many unnecessary data and functions, simplified and created better user interfaces and experiences. At final iteration, we adjusted some text alignment issues and plugged real data into the chart. At the end, we made an online mockup to let users walk through all process.
After many rounds of iterations
Based on Aircuity's brand color, we developed a series of related color palette to match it, a few bright and warm ones used as signs of warning to attract user's attention.
Final dashboard design
I made both animation and clickable interactive mockup for user to have deeper understanding of how this dashboard works.
“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.
“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.”
Thank you for your time!