AIRCUITY 2.0
WEB DASHBOARD
PROJECT OVERVIEW
The Client
Aircuity is a company who provides sustained energy savings through intelligent measurement solutions for building owners.
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 collecting quantifiable results for smart buildings.
My Role
My responsibility is to rebuild and redesign its current web dashboard structure/wireframe and create an intuitive new user interface that can provide actionable insights, transparency and accountability to building managers and facility owners.
HCD WORKSHOP AND JOURNEY MAP initiate
IDENTIFY STAKEHOLDERS
Aircuity
Accounts
Services
Rep Firm
Sales
Project Manager
Engineering
Field Service
Ownership
Facility Owner
Building Manager
3rd Party Contractors
Other
Users Goal
1. Quickly collect the info of both money and energy savings.
2. Constantly monitor indoor air quality trend and record airflow activities in realtime.
3. Easily share and export any data with graphic results.
4. Efficiently maintain all air ventilation devices.
Dashboard Structure:
1. Summary
2. Savings
3. Trend
4. Parameter summary
5. Service & Maintenance.
unqualified interface
The original dashboard didn't match the main target audiences' expectations.
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.
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
- A vertical line in front of all selection bars indicates the current status.
- The timeline graphic background has been divided into two colors to make the difference between AM and PM.
- Added the exact number of remaining days to service section helps the user has better sense timing.
COLOR SELECTION
Aircuity provided the its own color palette, we decided to apply bright and warm colors as signs of warning and emergency to attract user's attention.
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.”
“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.”
“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!