Mark Godwin Design
Open Menu
As the lead designer, I led the development of a new EHS product to replace the flagship Airsweb application.
Airsweb
Lead Designer
12 Months design & dev
Enterprise (B2B) Environmental Health & Safety application
Designer, Product Director, Architect, Product Manager
Pen & Paper, Photoshop, Illustrator, Sketch.
The existing product’s outdated codebase caused performance issues, making the product unscalable for growth or feature expansion. It also failed to meet key user needs, particularly in data representation. Prospective clients sought a modern, user-friendly interface, impacting both sales and retention as the product no longer met market expectations. Airsweb required a new 'best of breed' product to replace the current standard.
As Lead Designer, I was part of a team of four, later expanding with an additional engineer at the dev handoff stage.
Airsweb AVA was the main factor in the purchase of Airsweb by EcoOnline in 2020.
Airsweb’s revenue increased year on year until acquisition due to AVA.
Airsweb’s customer retention increased due to AVA.
Active users before 2020.
Airsweb AVA became a Verdantix green quadrant listed EHS product.
Airsweb AVA enabled Airsweb to expand into the North American markets.
We conducted Skype sessions with customers, sharing screens and recording where possible. Focus groups included representatives from 10 enterprise clients.
We presented wireframes and concepts to focus groups for feedback, using monthly meetups to validate ideas with existing users.
These days its often easier to get access to your end users for feedback with apps like Zoom or Teams. However, those products didn’t exist yet making it difficult to get time with users. You had to be willing to do research outside of the usual hours or in person.On top of this due to the hazardous environments our users worked in many clients were reluctant to agree on site visits. It takes time and money in training to allow offsite people into their workplace.
When existing users were able, Skype calls with screen shares were conducted. The screen was recorded in a separate app, then I would review and record as much quantitive data as possible.
Although reluctant, some existing clients allowed me to attend onsite visits following some initial on-site training. I was then able to observe users in the field on the existing product, recording their behaviour with pre defined spreadsheets.
I attended sales meetings to introduce myself to prospective new clients and understand their needs. Later in the design phase, Sales were more than happy for me to show the latest concepts to get feedback from from potential new clients.
There is always a way to get research data, you have to be persistent and willing to pick up the phone and travel.
Don’t ignore sales. They have great insight and data into competitive advantages. As a designer you are employed to make the business money and you do that by creating great experiences based on data.
I learned how much protective equipment our users our every day users need. From training they also had to be incredibly focussed so mobile devices were not allowed on site. They would record accidents later in the day.
73% of users found the existing product lacked meaningful data from records captured.
61% of users felt they couldn’t get information “out” of the existing product.
83% of users found the UI difficult to navigate, often referring to it as “clunky”.
“We print off the reports to take to court for legal investigations following an accident, but its just a pages and pages of all the fields in the report form.”
“I wish there was a screen that would let me see all the incident report data in a year and let me click on it to go directly to reports making it.”
During sales pitches new leads were openly stating that they were looking for a more modern interface and would consider other solutions.
After referring to meaningful data, we found that users were requesting customisable dashboards to view information in a single place.
The level of safety culture maturity was different in each of our focus group clients. However, we were able to find commonality of four different user roles.
These user roles were used in combination with the additional research insights to weigh up the value of features.
I kept project books to quickly sketch wireframes, exploring screen flows and layouts. This enabled rapid ideation during meetings and workshops and was invaluable for evaluative research, allowing swift mockups during brief focus group sessions. A project book allows you to see the evolution of your wireframe designs over time and makes for easy filing in future. Its a little old school now.
I streamlined the interface by removing 40% of unused visual elements and introduced a HUB level to simplify data flow. Modules would now feed into the HUB, which houses configurable dashboards. Each module features an overview page with key insights and reporting options. This structure allows Airsweb to rapidly expand with new modules like risk assessments, proactive observations, and root cause analysis.
Users wanted to see data that was meaningful to them. So we gave them the ability to pin anything they needed to multiple dashboards with a simple click.
We enabled users to generate reports from dashboards that could be printed or exported as PDF. These documents are used in legal cases in the event of an severe accident.
Users can customise live reports (like they could dashboards) for printing or PDF export, ensuring compliance and support in severe accident legal cases. Reports would now feature informative data and analytical visualizations along with each reports details in a print view.
Airsweb AVA was a single page application that allowed the user to remain within a report while they did simultaneous jobs like edit a query tile or create an action.
Users could drill down to specific records, a key selling point that enhanced accident and incident investigations.
As we got closer to the development stage of the project, the business informed me that there would ne no front end developer. Instead there would be a back-end developer who would build everything.Additionally the team had decided to not go with a responsive front end, due to concerns of handling large data load on mobile devices. Their option was for a “https://mobile.” sub-domain that products such as facebook used at the time.
This forced me to be very specific with component designs. The business had opted to make custom components on the Angular framework.
I worked as closely as possible with the back-end engineer who was put in charge of building the front-end.
You have to push hard for what you believe in. I was a younger designer at this point and should have pushed for a responsive front end. This taught me to always stand your ground when you have the data to back up your decisions.
This was my first exposure to design systems and creating a component library.
I discovered Sketch to help me create reusable components in design. Something Photoshop and Illustrator lacked.
Front-end developers are an integral part of a design & dev team.
