|
Overview
Project Title
ioAirFlow App, Website, and UX Strategy People Involved
Timeline
Impact
Tooling
Techniques Used
|
The Challenge
|
Building audits take a long time and are incredibly expensive. There are existing solutions like building automation systems that allow newer buildings the capability to monitor their building through software, and what ioAirFlow is doing is creating an in-between platform.
At the start, when I first joined, there was a team of eight people trying to automate a manual report that ioAirFlow was making for clients who signed up for their buildings to be tested. The website also needed a refresh so they can better market the solution. So, we thought, if the building owners invest in analyzing their building's health through ioAirFlow, they'll be able to find and verify their problem spaces and find solutions in a faster and more cost-efficient way. |
Their clients said that the information they usually get from building audits was not easily digestible. ioAirFlow faced the same problem with the millions of rows of data from the sensors. We had to showcase that in an easy-to-understand manner to ensure it's actionable to our users. So why should most people care? The answer is pretty straightforward. Our team always quotes this. According to EPA, we spend around 90% of our time in buildings, and over time, our buildings are getting older. The chances are the older your building is, the more health problems its occupants have unless it's being maintained or retrofitted properly. |
Improvements I Helped Our Team Achieve
Before I joined, ioAirFlow spent 1-2 months creating accurate reports. They haven't started automating anything outside of the analysis and the data analysis had bugs. The initial interface was not intuitive. I knew I had to work on a lot of things and these are my biggest wins!
Time Reduction
Now it takes just 1 hour to generate a report after data is collected. In comparison, before automating everything, it took the team two months, with more than six people working on the project.
Intuitive
Most users managed to create reports and navigate the product with very little guidance. All of them say the product was well designed and easy to use.
Responsive
My research has uncovered that most engineers who go for onsite visits use their tablets or phones for work. I saw the need to ensure that our product should be responsive.
Risk Reduction
Using a one to two-page summarized report, we can provide building occupants peace of mind to show them how their building is performing.
Brand Cohesion
Users like seeing a well-designed product. It gives the illusion that it's more usable. I created a UI library that the developers could reuse. In most usability tests, users remark that our software has always complimented the design and aesthetics.
|
Clarity of Terminology
Users could identify with the terms we used. It meant little to no confusion on the language we used on the latest usability tests. This is a heuristic I pay close attention to.
Sensor Mapping
In the past versions, our data analysts would have to manually provide coordinates on a canvas to display a sensor on a floor plan. I helped design a way to allow the users to place the sensors on their provided floor plans which saved two days of work effort.
Error Reduction
I helped reduce the errors found in the product. I'm not a QA engineer, but I do have background in QA Testing. I had to ensure our product was always accurate because it deals with the health and safety of building occupants. I took this on and established a process that our team can now implement without me.
Better Data Visualization
I provided ideal states that helped users verify how their building is performing. It enabled users to see what they should be aiming to improve.
|
|
|
My Roles
While my job title officially says that I'm a Visual Designer since ioAirFlow is a start-up there was a need to wear multiple hats. Our team works remotely although we do have a physical office. I’m one of the few people in Vancouver, and the rest of them live in Winnipeg so it was a fun challenge to ensure that we found time to meet.
|
User Experience Design
User Interface Design
Data Visualization and Visual Design
|
Quality Assurance
Front End Development and Web Design
|
Getting Started
The idea behind our solution was pretty simple:
Of course, it's a lot more complicated than that. There's a lot of effort spent researching the algorithms that we are using to diagnose the performance of a building. The hardware team tried to find the best possible sensor based on our budget, data collection features, and accuracy. As a designer, I found it fun to help the team craft diagrams of process flows. At the start, I questioned if the technology we were using was the best fit. There were many reasons why we decided to make our analytics platform. There were proprietary factors, plus the expertise of the current team. I interviewed the other stakeholders in their roles. I learned the different types of analysis that we were planning to do. I learned about the building standards like ASHRAE, WELL, and LEED. We had several ideas at the start:
I found that hardware dictates what the software can do, and with our limited capacity, we should only focus on what brings the most value and what we could achieve at a limited time. We knew we couldn't create recommendations right away. Creating a scoring tool would take the analysis teams months of research (which we eventually accomplished). So after some planning, we decided on our MVP. |
|
Research
Usability Tests
Several usability tests were conducted to help incrementally guide user experience improvements for every version that is released.
|
Conducting usability tests was one of the most valuable tools that help us understand how users experience the software.
Most of the people in our team find our software easy to use however when we present it to our clients, it's very surprising what kind of things we didn't notice and how some of our assumptions have been proven wrong. |
|
Affinity Mapping
We had multiple iterations, but before we decide on the path we had to take, I usually wanted to pull the team together to understand the results of our combined research. This helped give the team shared understanding on what was wrong.
User Stories
The software development team is starting to lean towards Agile Software Development, and I've tried conducting a User Stories session to simply map all the features we'd like to see in the future. Here's a preview of the previous User Stories main chart in progress but we quickly realized that there were a lot of opportunities and ideas that the team wanted to explore.
|
Given that there were so many things we wanted to explore (as is always the case with any software company), the brainstorming helped identify what are the things we need to do in the future, and what are the things we can do now.
I found it very important to align the different parts of the business. Right now, ioAirFlow is marketing itself as a software company that can analyze building health and it capitalizes on occupant comfort however, it was important to realize pivots at certain times. During the pandemic, some of the buildings we were analyzing backed out and there was less of an interest to improve certain building facilities, especially with how most employees have transitioned to a remote or "work from home" environment. We also had to consider the safety of the staff when attending events or going to public locations when installing our sensors. |
|
Other Research
We conduct multiple surveys like pre-building analysis and post-building report feedback. I helped design some of the forms, to ensure that there's less bias in the form design to get accurate enough data.
We've also started using Design Sprints in ioAirFlow which is an activity I hope to rely on for the larger challenges that the company is facing.
We've also started using Design Sprints in ioAirFlow which is an activity I hope to rely on for the larger challenges that the company is facing.
Designing
Sketching
I made a lot of sketches to illustrate different ideas. I enjoy the roughness of an unfinished sketch. In the past, I could never fully embrace this when I was only doing "graphic design" years ago.
So, I now sketch more often and share it with others so we all understand and can give feedback on a problem we're working to solve. By doing this, the team was able to arrive at solutions smoother.
So, I now sketch more often and share it with others so we all understand and can give feedback on a problem we're working to solve. By doing this, the team was able to arrive at solutions smoother.
Building Maps
So, to understand how users flow through the software, I organized UX activities and developed maps. There are multiple types of maps. Sometimes I build task flow maps, but generally speaking, since I work with my team on a day-to-day basis, sometimes this is communicated during meetings, and depending on the complexity, I proceed to create prototypes and wireframes.
If the feature is minimal, usually a brainstorming session with both front-end and back-end development is enough to build a feature especially if it just includes adding a button or changing the alignment of specific pages. We do have a system for tracking items that need to be fixed/prioritized which I also help support.
If the feature is minimal, usually a brainstorming session with both front-end and back-end development is enough to build a feature especially if it just includes adding a button or changing the alignment of specific pages. We do have a system for tracking items that need to be fixed/prioritized which I also help support.
The software is now currently on version 3.0. The software has gone through several changes but the core designs remains the same.
Building Prototypes
When I want to showcase the preliminary version of my designs, I create a prototype. We don't often have time to test prototypes which is something that we're currently working on since it's important to test out ideas before building them. I usually rely on Adobe XD for this and simply share the link during meetings and on discord which is what we're using internally to communicate. I know some people use slack, but I do find discord easier to use.
Wireframes
For complex interactions that cannot be relayed during a conversation, I create wireframes that tell the developers what needs to happen. Of course, there is a lot of back and forth and I've realized the importance of open communication to ensure that what gets built isn't too far from the original idea.
Data Visualization
|
Part of what we wanted to optimize was the visualization of the graphs. I primarily rely on Tableau when exploring data and have consulted design books on what could be the easier to understand graphs.
Some things to note
|
|
The Challenge of Automation
|
So after a year of working on it, we've finally managed to create an automated report!
Once we start breaking down the task of how to create a report that gives us accurate recommendations based on highly fluctuating data, we realize that there are many states that we need to be able to analyze and account for. Right now, our automated reports contain mostly dynamic graphs based on the data collected. We are able to provide general recommendations that help improve Energy Efficiency while also helping users stay safe. What it can do is allow the user to explore the space they have and validate if there is a problem based on actual data instead of relying on subjective user feedback. |
|
What Software Development Felt Like
|
This is probably one of the most interesting projects I've ever been part of. Software development is rarely straightforward and as much as I want to depend on the frameworks available, sometimes the business requirements and changing markets can make work very unpredictable. I have worked with B2B SaaS companies in the past, however, this is one of the first roles I had where I was in charge of building the end to end experience of clients. I wasn't just in charge of the information infrastructure, but the UI, UX, the website, our marketing, templates that we were using, and how we were attracting clients.
I'm proud of what our team was able to accomplish and have learned a lot of lessons that I continue to apply today. |
|
Software Case Study
Here's one of our recent case studies.
|
Whiteshell School District Uses ioAirFlow Platform to Identify Covid-19 Risk and Ventilation Performance in Schools
Mounting studies are documenting that viruses can spread faster in stale, compromised air while poor indoor air quality (IAQ) continues to compromise children’s health and school performance.
Now, with the rise of COVID-19 there is a growing call for education facilities to take critical action by testing ventilation and other indoor environmental quality variables to ensure the safety of students and staff. Whiteshell School District heeded this call and used ioAirFlow's platform to identify COVID-19 transmission risk and optimal ventilation performance in their schools. |
Before (Website Rebrand)
I was in charge of improving the websites to match the brand guidelines that I also developed.
The New Brand Guidelines I Made
After (Website Rebrand)
The marketing team conducted a competitor analysis and I also checked the competitors in the space and ensured we took the best parts and followed UX design guidelines when building the revamped website.
|
Visual Style
We wanted to use existing graphics but ensure it looked more cohesive.
Updated Navigation and Site Map
With the help of the marketing team, we planned out the sitemap and how users should be navigating throughout the software.
|
Iconography
I wanted to only use two types of icon styles because it makes the brand look better instead of having different icon styles as before.
Photo Treatment
I wanted to ensure we had the same photo treatment across the page so I cropped backgrounds and adjusted the color settings of each photo.
|
Other parts were added like an updated blog, media section, better calls to action. It was a month-long project where I made a prototype first in Adobe XD and revising, showing it to the team before updating it live on the website. We never really conducted a usability test, but a big win was
But I'm sure that website rebrand isn't the only reason for our increased traffic since our team is putting a lot of effort into marketing and PR activities. If you want to take a look at the website, feel free to check it out.
- A spike in the time users spent on the page
- Increased traffic from all over the world not just in North America
- Organic search seems to be our leading source of traffic
- There's close to a 14,000% increase in total traffic in terms of views than when I first joined
- or a 2,400% increase in monthly traffic than when it initially started prior to our website rebrand and redesign efforts
But I'm sure that website rebrand isn't the only reason for our increased traffic since our team is putting a lot of effort into marketing and PR activities. If you want to take a look at the website, feel free to check it out.
|
Challenges and Solutions
Navigating the Legal and Regulatory Terrain
💡 Challenge Traditionally, building owners are prompted to upgrade their properties only when compelled by legislative requirements. 🧡 Solution We’ve pioneered a proactive approach, empowering property owners and building managers with manageable, incremental measures to enhance the comfort and safety of their buildings. Amidst the pandemic, the urgency for secure public spaces surged. We made an affordable solution tailored to meet the public’s heightened concerns. Optimizing Floor Plan Usability
💡 Challenge Our clientele often lacked accessible and user-friendly floor plans, complicating the installation of sensors. The process of manually inputting coordinates was not only cumbersome but also time-intensive for our team. 🧡 Solution In response, we introduced an add on service to reconstruct floor plans. In addition, we added sensor-mapping capabilities within these spaces, thereby streamlining the entire setup process. Intelligent Prediction
💡 Challenge We aimed to not only predict but also tailor solutions for each client. Initially, our research yielded broad improvements. 🧡 Solution Delving into industry benchmarks, such as those from LEED, we recognized the intricacies of manual certification. To streamline this, we developed a scoring system reflecting these standards, pinpointing immediate enhancement opportunities for building owners. Post implementation of improvements, we can assist in tracking the efficacy of these upgrades. Our team was working with machine learning technology to make our software more intelligent and the improvements are made incrementally. Overcrowded Market
💡 Challenge The building health sector is cluttered with numerous certification bodies that offer prestigious badges at a premium. This is complemented by independent consultants who conduct manual, time-consuming measurements. 🧡 Solution This crowded landscape underscores the demand for building health certification. While high-end badges suit affluent clients aiming to attract premium tenants, we’ve carved a niche for those prioritizing occupant well-being over prestige. Our cost-effective solution not only bridges the gap for these clients but also empowers consultants with swift and dependable data access, enhancing their service delivery. Embracing Plain Language
💡 Challenge At ioAirFlow, I encountered complex engineering jargon that often went beyond what many professionals can comprehend. Understanding the myriad factors influencing building health is no small feat. Take, for instance, the poor air quality in libraries—what underlies this issue? 🧡 Solution Our team committed to making the language simple. When technical terms were unavoidable, we paired them with clear explanations. It’s essential that our rich data translates into clear, actionable insights for our customers. To this end, I focused on refining our communications to ensure accessibility and relatability. |
Thanks ioAirFlow for this invaluable ride
|
I can't thank ioAirFlow enough for giving me the chance to explore making software like this possible. It means a lot to me as well, since I'm very particular about my health and since we do spend a lot of our time indoors, it makes sense that we make sure that indoors we are as healthy as we can ever possibly be.
|
