KICKOFF

PLANNING AND ANALYSIS

ANALYSIS OF BRANDS, USERS AND STAKEHOLDERS 

The project kicked off with Brand Analysis then defining the user personas through user stories that had been gathered. Some user stories are as follows:

• Ian wants to find out why his office room temperature is too hot?
• Mick wants to set the operating mode to "Occupied" on certain weekend days.
• Jono wants to find out when the equipment stopped working and why?

From user stories, I then created the Storyboards and the elements of Dashboard, and started to map user journeys.

​

User Personas

Due to the specific industry that we are in - Building Management and Control System, it is very obvious who are the target users. To which led me to categorise them into three major groups. Three user personas were created to identify their needs and challenges (pain points) and identify the possible solutions to address them.

• Mick - Building Manager
• Ian - Mechanical Engineer
• Jono - Building Management and Control System Technician

User Story

To help me to create simplified requirement descriptions , user stories were developed. In this agile software development process, these will capture simplified, high-level descriptions of user requirements written from that end user's perspective.

Dashboard Elements

In designing these elements, it is important to keep in mind that users will expect to see current data analytics information of the building/ equipment, as well as critical and urgent alarms, warnings or alerts that they need to deal with immediately at a glance.

A great rule of thumb for dashboard elements design is to always start with a high-level overview and provide easy paths for the users to increase the level of granularity. And since I like to keep the design simple while giving the user complete control, the dashboard consists of a set of basic menu and a set of functional menu.

• Basic menu sets:

Home, Alarm, Trends, Schedule, Information, Operation & Manual, and Log Out

• Functional menu sets :

High-Rise Floor, Low-Rise Floor, Lower Ground Floor, Air Handling Units (AHUs), Lights, Packaged Air Conditioning Units (PACs), Lift Motor Room (LMR), Fan Coil Units (FCUs), Fans, Central Plant and Air Conditioning Schedule

Content Analysis, User Journey, Information Architecture

The rule “an effective user interface should be not more than three steps to get into what user wants to achieve"  will still apply to this project, while designing the Site Structure on paper.
Site Structure  will help me to visualise the Web Flow and Site Map  that will serve as the reference guide to paper-prototyping and wireframing. 

Client's requested this system to be accessible through iPad, on the other hand - Building Manager would normally access it through desktop, therefore, it's required to take into consideration both iPad and desktop platform when designing its UX UI.

Visual Research

Research on the colour, typography, graphic styling, web and device design was a challenge as this is my first BMS Project and on top of that, only a handful companies in Australia are in this industry. 

However, with Engineering Manager's assistance, I managed to overcome the challenges. Some of the best samples from online resources were also collected. They all played important roles to define the style guide.

Style Guide

The style guide chosen is inline and harmonic with all visual research that had been done at the previous stage, this rule is applied to all  colours, fonts, sprites, glyphs, icons, symbols and buttons in this project.

Primary colour would be the company logo's blue, while the secondary colour is black. However, black colour was replaced by grey at the development stage later.
Grey is deemed to be the suitable match to the system theme. Another reason for blue colour chosen as primary colour is the company's core business - Heat Ventilation and Air Conditioning - which is associated with cool and/or air images.

DESIGN

PROTOTYPING

THE GOAL

" The most basic definition of prototype is, a simulation or sample version of a final product, which is used for testing prior to launch. The goal of a prototype is to test products (and product ideas) before sinking lots of time and money into the final product.

Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement. Once a draft of your product idea is in the hands of real users, you’ll finally see how they want to use the product. You can then go back and adjust your initial guesswork " - UXPin

WIREFRAMING

Wireframe as a skeleton of the design, is the first stage in building the prototypes. It's Low-fidelity design that is concentrated on structure, as opposed to look and feel, would help me to focus on functionality without getting lost in details. 

Wireframes Testing

I created the wireframes in Tridium Niagara 4 - software engineering tool where the BMS system developed, integrated and hosted - and tested them before releasing it to user testing.  Then one to one interviews were conducted as a part of  user testing and in the testing session, feedback was collected.

LOW-FI PROTOTYPING 

With Wireframing, User Testing and Style Guide in place, it was ready to go to the next stage, developing the Low-Fi Prototypes. I kept it simple, built resourcefully, on a small budget and in a short time period.
Low-fidelity prototyping helps me to balance between overspending and overthinking, between too little investment and too much user validation.

By building a practical preliminary version of  the system, I would be able to catch potential problems, as well as those promising insights faster and earlier in the process. As I mentioned earlier, the system will be developed in Tridium Niagara 4 platform, therefore, the interactive Lo-Fi prototypes were built in Tridium Niagara 4.

HI-FI PROTOTYPING 

It's very crucial to test our product before handing it over to our client to foresee any issues or failures. The main purpose of these interactive Hi-Fi prototypes was the usability testing, getting our target users to validate it. 
After all, these prototypes were the closest to the final finished product in its detail and functionality.And I was able to get the most out of the Hi-Fi prototyping test, gathering all user and key stakeholder's feedback and making adjustments along the process.  The interactive Hi-Fi prototype was also built with Tridium Niagara 4.

Hi-Fi Prototypes Testing

In this prototyping test, I stressed to users that it is the prototype that is being tested, and not them or their capabilities.
Hi-Fi prototypes testing was conducted by getting target users to test the interactive prototypes. I sat next to them observing them interact with the prototypes then collecting their feedback at the end of each section.

DESKTOP HI-FI PROTOTYPING

Tridium Niagara 4.6 platform has incorporated responsive web features in it, therefore, it's unnecessary to design desktop prototypes for this project since Tridium will automatically resize the current design and page to fit the user's screen.

However, I have built a web template based on the planning and analysis that I have done for this project. This template's deployed on our other projects. User testing was also conducted in order to gather feedback from users. 

HOW WE GOT THERE

THE PROCESS

CHALLENGES

Many aspects in the project remained ambiguous and/or unknown until we reached a certain application development stage, this's one of the biggest challenges that I had to overcome.

Other challenges were the live data's variable names sensitivity, limited screen space constraints to accommodate massive information, and technical knowledge required. 

 

ADJUSTMENTS

This project was an iterative long process in an agile environment, adjustments were constantly made throughout the entire design and development cycle.  It's to ensure that we solve our users’ pain points and maximise the positive impact based on their needs and feedback, and to balance out between business and user requirements.

The adjustment was Adding/deleting/merging/branching the main menus (or sub-menus), site structure, UI design to suit this constant-evolving system.
In addition to above, pop-up windows are deployed on equipment's trends (or history) and schedule. And also on those information that's crucial to find faults or data-tracking , e.g. room temperature, valve position, damper position, building floor mode, etc.

APPROACH

One of the approaches that I adopted to overcome the constantly-changing page layout challenge is, I designed them - in the early draft, in such a way that expansion (or even splitting) is possible with minimum changes if required. Then I kept refining them throughout the cycle before finalising the design.

Other approaches are:

• A range of different Red colour and Blue colour shades to indicate: how hot (Red) or cold (Blue) the room temperature is, and at what range its deviation from Set Point is. 
•  Colour-changing text or icon implementation is also in place to indicate the equipment's current state, e.g. Open (Green colour) vs Close (Red colour), Start (Green colour) vs Stop (Red colour) , On (Green colour) vs Off (Red colour), Normal (neutral colour) vs Alarm (Red colour) , Normal (Green colour) vs Fault (Red colour).
• High level overview of a building floor (and all the equipment in that level complete with their locations) with selected device's granular data displayed in one page, to allow user gets all information at a glance.
• Combining Low Rise Lift and High Rise Lift pages into one page to allow user gets all information at a glance.
• Breaking down those large sections into two or more sections and into separate pages, e.g. Condenser Water Plant into two sections - Chiller section and Cooling Tower section.
• All other single categories were grouped under "Miscellaneous" big umbrella, to allow expansion without major changes.

CONCLUSION

The whole design process for this BMS project's going a little different than the common web design process since we work with real live data to populate the web content and integrate the data into the BMS system.

Therefore, I adapted the UX UI approach to suit this project and learned about the limitations and functionality of the engineering tool, Tridium Niagara 4. The design of the content and layout are constantly changing according to the user's requirements, user’s needs and to solve the user's pain points.

My biggest challenge was to incorporate the constant- changing real live data into the design iteratively while still maintaining the aesthetic essence - full screen page without the need to scroll up or down by users- would be the ideal layout that we try to strive throughout the design and development process.

Back to Homepage Back to Top