‍

"The most technologically advanced and easy to use best practice EHS software on the market."

‍

Established in 1999, Airsweb has built up a reputation as a leading provider of premium Environmental, Health and Safety software. They area global company with a head office in the United Kingdom and a user base of over 500,000 in 26 different countries.

‍

I have been employed as the lead designer for their flagship product Airsweb AVA that has enabled the company to scale up their operations and quickly provide experienced solutions to a growing client list. Their previous product titled Airsweb was a powerful piece of software that was able to provide the user with insights into their company operations and enable them to report and collect data on all EHS related data. Airsweb although powerful was a largely bespoke product that had begun to run to the end of its lifecycle and the company wanted something fresh and built with the future in mind.

‍

Design Challenges

Some of the main challenges for Airsweb AVA were to design a product that was scalable, from a single code base and meet the needs of users of multiple skill levels.

·     Clean and Clear UI

·     Positive UX

·     Scalable Components

·     Big Data

Clean and Clear UI

As with most modern user interfaces the buzz term of ‘clean’ popped up in all of the initial meetings. My interpretation for this from a health and safety point of view though was that the data had to be presented in a minimalist way whilst the points of interaction had to be fundamentally clear in order to make life easier.

To do this I set about looking at what Airsweb did well - simplified forms that enable users to enter records quickly. This was fantastic however it suffered from a somewhat inconsistent layout and the grouping of fields began to feel confusing. Additionally, the existing UI didn’t really lend itself well to breaking down information into recognisable chunks of data that encouraged the user to interact. A huge positive feedback from existing users was the ‘drill down’ ability Airsweb provided to see more data, so I wanted to make sure this was very clear in AVA.

After this initial research I came to a conclusion that each report be lay out similar to a paper-based document. A work space acting like a binder with paper forms grouping together familiar and modern fields. The paper pages could even be scaled to smaller sizes should there only be a small number of fields – an idea that evolved into paper tiles that could help key pieces of data stand out in a dashboard view. The user would work through pages and then save at any time. From this approach we could then create dynamic dashboards that used smaller tiles that provided the user with live information from data entered.

This was the point in which a truly clean and clear UI was born for AVA. The user could now see paper tiles representing any KPI they wished and also would house BI charts too. A click on a single tile would drill down to the next level allowing for further investigation. Records felt like actual records and were presented in a clean manner.

Positive UX

Airsweb are a is comprised of intelligent and friendly people who provide a positive experience when dealing with clients. AVA had to reflect this as it is the company’s flag ship product and thus is considered an extension of that experience. Everyone at Airsweb knows that there is a wide range of ability when it comes to using their products. Some users are very tech savvy whereas some are not. The new product had to be able to cater for the needs of every user and provide a unified experience.

For this challenge I took the clean and clear paper tile approach and tried to make sure that the experience with it be one that supports the user but does not get in the way. From a UI point of view this meant fewer but meaningful colours, no sharp corners and well-spaced components. However, the experience of using the product needed to provide a positive state of mind at each step and encourage people along the way. This meant micro interactions, a single window interface and positive language. It also took a feature request of the AVA virtual assistant and created a personality for the product in the form of ‘The Watcher’.

A single window interface provided the user with all the tools they needed to get their job done. No unexpected navigation to other pages when they were filling out an important form related to an accident.Rather, a pane that would slide in from the right with the required tool that could be completed and dismissed. This puts the unfamiliar user at ease as they don’t think their work has taken a hike into the nether of the web.

With this feeling of a ‘safe’ workspace came the styling of buttons and paper tiles. I decided to have no sharp corners on buttons and paper tiles – something that I felt created a softer workspace similar to the way we cover a corner to protect a child’s head. Buttons again would have a rounded appearance to create this feeling of safety. Additionally, the colour of buttons and links would provide the user with some subconscious knowledge of what happens on a click – green makes a change, steel triggers a tool and blue drills down or navigates to another area of the product. Micro interactions also helped the user to know that a button had been pressed and subtle animations remind the user that when a pane slides in, they are still within their initial workspace.

Lastly was the language used and the presentation of the data collected by AVA. The Airsweb personal assistant gave birth to ‘The Watcher’ that a characterisation that would help the user by watching KPI’s in the background and bring attention to dramatic changes. The watcher would also provide feedback to users, but I was cautious that it not gets in the way (let us not forget the days of the paper clip in MS Office!) The watcher would be present when telling the user that certain actions would have particular results.

Scalable Components

We wanted to be able to create a component driven UI that could scale to fit multiple screens. This would enable us to pin the underlying technology of AVA to any device on multiple platforms and maintain a familiar experience. The tile approach we have previously defined for records enabled us to scale for all screen sizes. This enabled us to even allow for data visualisations and KPI's to be brought to the forefront in a simple scroll.

‍

Big Data

Airsweb AVA is powerful under the hood for many reasons, one in particular is how it handles big data requirements of international businesses. This posed a challenge as typical UI layouts would soon become cluttered with a high volume of information. To enable this level of key data to be displayed we developed live dashboards that could be edited at will and KPI's to be pinned. Coupled with the ability to drill down to the data just resting below the surface the user is able to access a wealth of knowledge all in a simple click.