Gabriel Djan,
BCompSc
UX Designer who loves problem solving and emphasising users and clients.
Building User-friendly Web-based BMS System
Design user interface and data analytics dashboard for Building Management System in agile environment and space constraint.
Company
Building Management and Control System
Sector
HVAC, Information, Building Automation
Challenge
Agile environment, iterative process, screen space constraint to fit enormous information, highly technical and specialist industry, controller platform's live data (high-sensitivity variable names)
My Role
Entire product design and development, from research to conception, visualisation and testing
PROJECT #2: BMCS Graphic User Interface
Planning And Analysis
There is no consistent design graphic user interface that is used in each client's Building Management and Control System, the graphic and web design would entirely depends on the associated system engineer's style. In this project, my goal is to design and build web template for their client's Building Management and Control System Graphic User Interface. I strongly aim for user-friendly, simple but attractive, responsive and consistent design and make a great impact for its user experience.
Step One
Brand analysis and site structure analysis.
Step Two
Based on brand awareness and website observations, I defined the user persona.
Step Three
Three 'user stories' were created to define the features for a new web, with "what I think the user wants" in mind.
[User] says, I want [a feature} so that I can [achieve some goals]
-
Ben wants to find out why his office room temperature is too hot.
-
Norman wants to set the operating mode to occupied on certain weekend days
-
Gordon wants to find out when the equipment stopped working and why
The user story defines needs and possible pathways for the user through the site or app. It doesn't not describe the actual solutions or UI.
Step Four
Draw 'Storyboards' describing the user using the App. Based on the user story, redraw them as a story board
Consider the environments they are in. Consider the difference time makes: before, during and after business hours. Morning, daytime, evening? The aim here is to consider the experience of the user rather than the interactions with UI.
Step Five
Based on the website and user stories define the elements of an Web/App dashboard
Step Six
Try not to get bogged down the content- focus on the journey Content Analysis. How many steps is practical? Use real words for the headings and boxes with thumbnail drawings but try not to over plan the content.
Step Seven
Photograph with the start paper prototyping of the Web/App as a whole.
Analysis of Brands, Users, Stakeholders, Customers Interactively
I did website observation and gather as much as possible information from there. I should look for these following ten key elements to start the analysis phase.
1. Vision (subjective aims - usually drive by a leader)
2. Mission (objective aims - what the organization wants to achieve)
3. Brand Essence (what makes it authentic and its differentiation from other brands)
4. Value Proposition (the promise and benefits to customers)
5. Key Beliefs (ethics or ideals embedded in the organization)
6. Target Audience (people)
7. Key Market (location)
8. Key Competitors (who are they?)
9. Competitive Advantage (practical distinctions from competitor)
10. Three words to describe their audience (Voice Words)
User Persona
Due to specific industry, in this case BMS user, it's very obvious who are the target users. Therefore, I categorized these users into three major group and created three user personas to identify their needs and challenges (pain points) and identify the possible solutions to address them.
User Story
To help with creation of simplified description of a requirement, I also wrote the user stories. In this agile software development process, these will capture simplified, high-level descriptions of a user's requirements written from that end user's perspective.
Voice Words
Swot Analysis
User Persona 2
User Persona 1
User Persona 3
Elements of Web
In designing the elements of the dashboard, it's important that the users will expect to see information about the building/ equipment current status, as well as any critical urgent alarms, warnings or alerts that they need to deal with.
A great rule of thumb for elements in dashboards is that I should always start with a high-level overview and provide easy paths for the users to increase the level of granularity.
I like to keep things simple, while giving the user complete control. Therefore, there will be a basic menu sets (e.g. Home, Alarm, Trends, Schedule, Information, O&M and Log Out) and a functional menu sets (e.g. High Rise Floor, Low Rise Floor, Lower Ground Floor, AHUs, Lights, PACs, Lift Motor Room, FCUs, Fans, Central Plant and AC 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. This Site Structure, helps me visualize of the Web/App Flow and Site Map that will serve as the base reference to paper-prototyping and wireframing. Client has indicated that they want ipad/tablet design. Therefore, the Site Structure was drawn in ipad/tablet design format.
Web Flow
Card Sorting for Web Elements
Site Map
Site Structure
Prototyping
" 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
Some designers describe wireframing as skeleton of our design, Low-fidelity design that is concentrated on structure, as oppose look and feel. Its purpose is to help us to focus on functionality without getting on lost on details.
Wireframing Testing & User Interview
I created the wireframes in Tridium Niagara 4 (software engineering tool where the BMS system will be developed and hosted) and tested them myself before releasing it to user testing. User testing then be conducted on one to one interview and feedbacks were collected.
Visual Research
Research on visual design to define the colour, typography, graphic styling, web and device design was a challenge as this is my first BMS's UX UI Project and only a handful companies in Australia are the players in this industry. With Integrated System Engineering Manager assistance, I managed to overcome the challenges. Some of the best samples from internet were also collected. These are important to define the style guide.
Style Guide
The style guide, which consists of colours, fonts, sprites, glyphs, icons, symbols and buttons, should be inline and harmony with all visual research that had been done at previous stage.
Wireframes and Wireframe Testing
Visual Research - Colour
Visual Research - Typography
Visual Research - Graphic Styling
Style Guide
Visual Research - Web and Device Design
Low-Fi Prototype
With Wireframing, Wireframing testing, Visual Research and Style Guide, I'm ready to go to the next stage, which is developing the Lo-Fi Prototype. Lo-Fi Prototype should be kept simple and low-cost to build. As I mentioned, the system will be developed and hosted in Tridium Niagara 4, therefore, I built the interactive Lo-Fi prototypes with Tridium Niagara 4.
"Low-fidelity prototyping helps us to find the middle ground between overspending and overthinking, between too little investment and too much user validation. By building a practical, preliminary version of your product, you will catch potential problems and promising insights faster and earlier in the process. The best low-fidelity prototypes are built resourcefully, on a small or nonexistent budget and in a short time period - Laura Busche (Author of Lean Branding and Powering Content)"
Hi-Fi Prototype
It is important to test our product before launching it in the market to foresee any issues or failures. We want to get the most out of the feedback with Hi-Fi prototype that is closest to the final product in its detail and functionality. The main purpose of interactive prototypes is the usability testing of the product by getting our target users to validate it.
The interactive Hi-Fi prototypes is also built with Tridium Niagara 4.
Hi-Fi Protoype Testing & User interview
It is important that at prototype testing, users understand that it is the prototype that is being tested, and not the user or their capabilities. Hi-Fi prototype testing was conducted by getting target users to test the interactive prototype and observe them then collect their feedbacks based on questionnaires that I have prepared. They are broken down into four sections: Structure, Content, Aesthetics and Communication. On the right-hand side there are numbers (number 1 to 10) to rate how good is the corresponding item with number 10 is the highest score.
Note: As I mentioned earlier, this project is iterative process and in agile environment, I repeatedly do changes from time to time during the design and development cycle according to the needs and feedback from users, to solve the users's pain points and maximise the positive impact. These changes are including adding/deleting/merging/branching the main menus or sub-menus, site structure, style guide, page layout to suit this constant-evolving system. In addition to these, trends (or history) and schedule are displayed either in pop-up window or if user hits on certain data that normally are the vital information when finding faults or data-tracking , e.g. room temp, valve position, damper position, floor mode, etc
And also it is common secret in this industry that, many aspects will remain ambiguous until we reach certain stage of application development.
We also implement color-changing code to indicate the state of certain data such Open/Close, Start/Stop, On/Off, Normal/Alarm, Normal/Fault.
One of the methods that I adopt to overcome the graphic page layout constant-changes challenges is allowing enough space to expand if needed at early draft stage and keep refining until it reaches to final design. Other methods are :
1. All other single category are stored under "Miscellaneous" big umbrella
2. Break down the large sections into two or more, e.g. Condenser Water Plant into two sections, Chiller and Cooling Tower
Below are the Web/App Flow, Site Map, Style Guide after going through the iteration throughout the design and development process. And for this exercise, I'll show only the Lo-Fi Prototype and Hi-Fi Prototype after the iteration process.
Style Guide Rev
Lo-Fi Floorplan (High Rise, Low Rise, Lower Ground)
Lo-Fi AHUs
Lo-Fi Lights
Lo-Fi PACs
Lo-Fi Water Recovery
Lo-Fi Misc
Lo-Fi Access
Lo-Fi Lift (Proposal)
Lo-Fi FCU
Lo-Fi Fans
Lo-Fi Tables
Lo-Fi Central Plant
Lo-Fi AC Schedule
Lo-Fi Navigation Menu
Hi-Fi Floorplan (High Rise, Low Rise, Lower Ground)
Hi-Fi AHUs
Hi-Fi Lights
Hi-Fi PACs
Hi-Fi Water Recovery
Hi-Fi Misc
Hi-Fi Access
Hi-Fi Lift (Proposal)
Hi-Fi FCU
Hi-Fi Fans
Hi-Fi Tables
Hi-Fi Central Plant
Hi-Fi AC Schedule
Hi-Fi Navigation Menu
Hi-Fi Prototype - Desktop
Due to Tridium Niagara 4.6 has responsive web feature in it, it's unnecessary to design desktop prototype for this project. Since the feature will automatically resize the current design and page to fit user's screen. However, I've built web template to be used for other project based on the planning and analysis that I've done for the ipad design. And then getting feedbacks from user during user testing was conducted.
Desktop Hi-Fi Prototype
Conclusion
The whole design process for this BMS project is going a little different than the common app/web design process since we work with real live data in the content and integrate it into BMS system.
Therefore, I adapt the UX UI approach to suit this project and learn about the limitation and functionality of the engineering tool, Tridium Niagara 4. The content design is constantly changing according to the user's requirements, needs and to solve the pain points. The biggest challenge is to incorporate the constant- changing real live data into the design iteratively while still maintaining the aesthetic essence, full screen page without scrolling is the ideal layout that we try to strive throughout the design and development process.