Monitair 

Real-Time IAQ Monitoring

for Buildings

[UI & UX Design]

TEAM 

Amrita Sakhrani & Shira Miasnik  

TIMELINE 

Nov 2020 - Present 

ROLE

UI Design Lead & UX Designer (Branding, Interactive high-fidelity prototype, and the UI components for both iOS & Android).
 

CHALLENGE 

Businesses fear about the health and safety of their occupants in buildings given the heightened fear of enclosed spaces since the beginning of the pandemic. As a leader in the IAQ field, we wanted to help provide the means to allow buildings to track the health of their indoor air.  

SOLUTION 

A B2B enterprise mobile application allowing commercial buildings in Hong Kong real-time insight into their facility.  

IMPACT

Increased traction from educational institutions in Hong Kong and investor funding. 

Monitair_preview1
Monitair_preview2
Monitair_preview3
unsplash-image

GOAL 

How might we support businesses in maintaining a safe indoor environment for employees?

RESEARCH

Domain research to understand the field of IAQ (Indoor Air Quality)

AQI-Scale

Sources of indoor air pollutants: Oil, gas, coal, wood, tobacco products, products for cleaning & maintainenance, central heating and cooling systems, humidification devices, outdoor sources radon, pesticides, outdoor pollution.

Understanding AQI: Yardstick that runs from 0 to 500. The higher the value the greater the air pollution and greater the health concern. EPA establishes 5 major pollutants.

Highlight: Managers keep a close eye on reports to see a building’s performance against sustainability targets. 

Conducting Guerrilla Research to understand user pain points

We had a booth at the Build For Asia Expo, 2020. I was able to visit other booths and have casual conversations with the public to understand their take on monitoring IAQ.

Attendees: Property Managers, Engineers, Engineering Consultants, Building Management 

 

B4A_expo3
B4A_expo2

Creating Archetypes to empathise with our target customers

IAQ_UserA

Property Executive

"I just want to know we are meeting the required standards" 

  • Off-site 
  • Managing Multiple Properties

 

IAQ_UserB

On-Site Manager

"I want to know if occupants are safe in my facility"

  • On-site
  • Handling day to day tasks for a single property

Review Mining of Competitor's Apps to look for common themes for improvement in the marketplace

Competitor-Review-mining

 

General Findings

- Poor connectivity / Connection Inconsistency

- Lag time due to bluetooth

- Wifi enabled would be faster

- Graphs are not useful > No time on charts

- feature needs improvement, not easily able to scroll back in time

- No landscape option for tablet

 

Ideas for Improvement

- Introducing a map/floorplan feature for facilities

Seeing how the score is affected when un-checking certain paramters

- Ios 14 widget showing score across rooms (e.g. like weather widget)

- Highlighting spikes on charts > making it easier to detect

- Easier way to compare numbers back in time? (But would the average user do this? Seems they just want to know current stats)

DESIGN

Creating a Moodboard for the visual design and branding of the product

MoodBoard1

How could we create a visual aesthetic to ensure technical data was amiable? 

Finding the sweet spot between scientific and delightful.  

As a part of the UX and Branding we were searching for a factor of delight and pleasure when using an otherwise technical application. We did a brainstorm and mood board sessions together to try and gather inspiration for how to create this throughout the app’s interface. Some of the inspiration came from the delight experienced in Headspace through the soft gradients and illustrations.

Venn_UI

Exploratoration to find the visual design to depict IAQ 

With IAQ being an upcoming industry, I struggled to find an appropriate yet fresh way to represent the current state of a facility’s indoor air quality. The current branding of our hero image on the website was based on vibrant green plants inside a modern office, to convey the emotion of fresh clean air indoors.

Thus, I began with the motif of the green plant and leaf. 

With a confirmed what, it was time to completely exhaust a wide variety of UI design directions for the application. The design phrase “quantity leads to quality” is what I used to guide me through the process of all the different ideations. 

I ran through over 30 different design ideations to find the correct representation for our brand and indoor air quality. 

The short listed design directions included: 

  • Animated Plant changing depending on the IAQ
  • Air Molecules changing density depending on the IAQ
  • A productive individual with good IAQ
  • A working fan
  • Abstracted circles
Iterations_A
Iterations_B

Rapid User Testing with 3 different design metaphors to select a final design

Tested on team members, friends and  people in the co-working space. 

Most appeal for an abstract design background that is gentle and subtly indicating the indoor air quality. 

Testing the efficacy of icons for technical IAQ metrics 

Icon_Testing

 

Based on the moodboards and inspiration I took from other apps, I felt strongly towards using icons to represent the different metrics. However, after discussion within the product team, we acknowledged that icons are typically used to communicate a concept faster than the text - but in this case of a technical parameter such as TVOC or PM2.5, an icon would not necessarily do this and text was necessary. In addition, people are already familiar with the icons for temp and humidity, which drew more attention to these metrics and away from the other metrics that were providing more serious information. 

For right now, it was a compromise to avoid the temptation of icons and just proceed with the names of the metrics.


If not icons, then what was the next alternative? 

We decided to continue to build upon the abstracted round design and I created a set of three indicators for a zone. I was challenged with elevating the coloured dots for a quick understanding of the score. 

Creating mid-fi wireframes with our user's needs in mind

We began with the smallest iOS screen ratio for iPhone 8 to work through designing the key components to include and create an effective user flow. 

wireframe1-1
wireframe2-1

Creating the High-fidelity Interactive Prototype for efficient development under a time crunch 

When creating the interactive prototype, I knew the developers were using React and thus chose components from React compatible libraries - primarily Material Design. We had the aim for building V1 of our app as soon as possible and thus it was important to select the most efficient components to reduce the time spent on customisation. 

Outlining the information architecture for all the screens to be prototyped

V1_navigation_drawer
V1-User-Flow

Working through the interactions, from the home dashboard 

V1-User-Flow-with-Wireframes

Planning & Testing component responsiveness and measuremnts for different devices

UI_measurements

Design System & Style Guide created to meet WCGA AA Compliance

Monitair_Style_Guide1
Monitair_Style_Guide2
Monitair_Style_Guide3
Monitair_Style_Guide4

High-Fidelity Interactive Prototype

Three_state_score_preview

Creating, documenting & testing the full login flow with errors and guidance 

Login-Sign-Up-Error-Flow-1

After user testing, we realized we needed to include a no floorplan view 

Included a more helpful screen, with icon & button for users to quickly jump to list view 

Map_Component_NotLoaded-1

Design Iteration of the map component to allow quick detection

We decided to include map pins, with colors to allow users to quickly click into a red or amber zone and view the IAQ metrics of that particular zone. 

The colored green zone showed more over-powering leaving us to a blue highlight across & colored pins for status communication.  

Map_Component_Iteration-1
Screens1
Screens2
Hi-fi-Android-Screens

Refelection 

It has been a great learning experience being the lead UI and working through selecting and creating all components for the design system. I've learned to think about: 

- Scalabilility as more metrics become available by sensors

- UX writing when creating filters and sort options for better clarity 

- Utilizing components from design libararies for lower cost development and pre-existing scalability

- Thinking about design options and modals for iOS vs Android 

- The impact of color in feedback design 

 

Selected Works

StateraUX Design

HulaUX Research & Design

MonitairUI & UX Design

Apply GradUX Design

 

________

Amrita Sakhrani. All rights reserved 2021. 

LinkedIn | Dribble