AIRCUITY 2.0

WEB DASHBOARD

PROJECT OVERVIEW

The Client

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

Company Timeline

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.

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.

IDENTIFY STAKEHOLDERS

Aircuity

Accounts
Services

Rep Firm

Sales
Project Manager
Engineering
Field Service

Ownership

Facility Owner
Building Manager
3rd Party Contractors
Other

HCD WORKSHOP AND JOURNEY MAP ESTABLISHMENT

Journey Map Initiate

Stakeholder Workshop

Refinement

RESEARCH CONCLUSION

The New Dashboard 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

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.

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

2. Users cannot easily understand the meaning of each graphic without any text description/explanation.

3. Trend section displays 12 months data on the left side of the dashboard, however, the limited space congest its graphic. Legibility level becomes low.

4. In the savings section, the money and energy savings information which user cares the most have been pushed into the corner.

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

6. In general, the dashboard text size is too small, It reduces its legibility dramatically.

LAYOUT EXPLORATIONS

As mentioned earlier, 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 those goals, Many different options and improvements for the new dashboard have been explored:

A WHOLE NEW SOLUTION

According to the user feedback and requests,  a few changes have been made to the new structure:

Summary Section

Following human natural reading behavior, all sections navigate through a linear direction, from left to right. A brief summary will not only conclude and explains all information from this page but also drives users' attention to the most interesting infographics.

Savings & Trend Section

Creating a layout hierarchy by unevenly distributing the spaces. Insert the most valuable data at enlarged space can visually capture user attention quickly.

Trend Section

A chronological-based diagram should utilize an advantage of the full page width to display more data information and increase its legibility level.

A WHOLE NEW SOLUTION

According to the user feedback and requests, a few changes have been made to the new structure:

Summary Section
Following human natural reading behavior, all sections navigate through a linear direction, from left to right. A brief summary will not only conclude and explains all information from this page but also drives users' attention to the most interesting infographics.

Savings & Trend Section
Creating a layout hierarchy by unevenly distributing the spaces. Insert the most valuable data at enlarged space can visually capture user attention quickly.

Trend Section
A chronological-based diagram should utilize an advantage of the full page width to display more data information and increase its legibility level.

GRAPHIC EXPLORATION

Generated a few different graphic layouts and details, identified both pros and cons to create the best user experience in terms of page spacing; graphic stylings; information sequencing, and data trending indication.

Original Chart includes two data points. One is the current savings amount. The other is the expected amount. It will cause some confusion.

Reduced complexity by focusing on current savings only and additional point-up/down arrow  indicate the performance trend, User can gather information easily and quickly.

Stick with user's left to right reading behavior, the more important data and the message is not only on the left side of the savings section but also at the center of the whole page.

Thinking outside of the box by inserting and enlarging a circle shape in the middle of the section to break through its tradition layout. however, the circle doesn't go well along with the other rectangles.

Replacing all stiff rectangle shapes to circles made this dashboard more fresh and energetic look. Circle shapes made the user easier to focus on what they want to see and create more breathing space.

ENHANCED EXPERIENCE DETAIL

COLOR SELECTION

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

#15727B
#00ABB0
#57B6B2
#8FCCC8
#A1D683
#BEE2A8
#F88D2B
#FFC629
#4BC0E1
#F2F2F1
#C1C1C5
#5D6771

FINAL DASHBOARD DESIGN

The web-based dashboard contains two different sections, the first one is for users to stay on a higher level to obtain information more efficient. The second section allows the user to discover more project details. Aircuity brand color is the most standout color which purposefully associated with the most important message on the page. The goal of this design is to make the dashboard fresh-looking, easy understand, and simple to use. Each element serves a purpose to deliver the correct message to its audiences.

Press release

JoAnn Garbin

Former Chief Innovation Officer @ Aircuity

“Twisthink’s vision and strategy were an invaluable part of our success. 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.”

Aircuity Newsroom

“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.”

PowerGEN Advancement

“Aircuity, creator of measurably better environments, announces the release of new features and enhancements to Aircuity 2.0’s MyAircuity web app. The MyAircuity web app houses Aircuity’s intelligent analytics along with offering graphing and exporting for further exploration of trends seen on the dashboard.”

JoAnn Garbin

Was Chief Innovation Officer @ Aircuity

“Twisthink’s vision and strategy were an invaluable part of our success. 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.”

Aircuity Newsroom

“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.”

PowerGEN Advancement

“Aircuity, creator of measurably better environments, announces the release of new features and enhancements to Aircuity 2.0’s MyAircuity web app. The MyAircuity web app houses Aircuity’s intelligent analytics along with offering graphing and exporting for further exploration of trends seen on the dashboard.”

Thank you for watching!

Thank you for watching!

MORE PROJECTS

VISUAL RESEARCH TOOL

graphic illustration

EATON DEMO APP