Airgap Portal
Designing a tool to manage product deployments between Honeywell site reliability engineers (SREs) and customer engineers.
Product
Honeywell, Developer Portal
Platform
Web app
TL;DR
Overview
Honeywell customers host our products on cloud or on-premise environments. These customers do not want to give Honeywell engineers access to their data, so customers must deploy new product versions or configurations themselves.
Role
UX design lead
Completion
August 2024
Problem statement
Honeywell Site Reliability Engineers (SREs) must manually package product deployments for customer handoff, which can take up to five days. This is an inefficient timeline for both SREs and customers.
A solution is needed to create deployment packages quickly, as well as allow customers to create their own.
Goals
Create an efficient experience to create and download deployment packages
Consider both users of a Honeywell engineer and customer engineer
Use Material UI to maintain consistency with the Honeywell Developer Portal
Sample user flow - Create package download
User stories
The Airgap Portal serves 3 main users between internal Honeywell engineers and external customer engineers.
Honeywell Site Reliability Engineer (SRE):
"As a SRE at Honeywell, I need to simplify customer onboarding and job deployments so our customers have product solutions that work as expected with minimal downtime."
Honeywell Saas-Ops Engineer:
"As a Saas-Ops engineer, I need to view the products owned by specific customers so I can ensure our environment is secure as well as manage on or off-boarding of customers.
Customer Engineer (external):
"As a customer engineer, I need to download job deployments for our (on-premise or cloud) product so the tool is up-to-date and runs smoothly."
User flows
Download & deploy a package
Primary task flow (Customer engineer):
Login —> Airgap home screen (Package downloads)
Create new package —> Fill out form
Submit form —> Package job begins running
Package is ready —> Download package
Deploy package into the environment
View my products
Primary task flow (Honeywell SRE):
Login —> Airgap home screen (Package downloads)
Navigate to 'Products' —> View 'My products'
Create new product —> Fill out form
Submit form —> Product created
Customer has appropriate product
Configuration manager
Primary task flow (Honeywell SRE):
Navigate to "Configuration Manager" in the Airgap Portal
Navigate to the "Custom" tab to view custom configurations
Create custom configuration —> Fill out form
Submit form —> Custom configuration created
Package download can be created with the new configuration
Wireframes
Wireframe goals
Create UI layouts that support the user tasks and are scalable
Identify a pattern that can be recycled across Airgap Portal to reduce interaction costs
Review iterations with team for feedback and decision
Proof of concept
I referenced the current state of the Airgap Portal. This was proof of concept to show the primary functionality of creating a deployment package.
Company name is auto-filled in for the user
Select a product name from a dropdown menu and "Submit"
Refresh the job to see if it's ready to download
Wireframe v1 - Data table
Sort by columns to view product-specific jobs or by timestamp
Table shows job deployments, products, and configurations
Create new job through a modal that contains a form
Wireframe v2 - Card list
The newest card (top-left) indicates the newest job that has been requested
The card list supports needed pages, but limited info could be placed on the card
A new job would be created by navigating to a new page to fill out a form
Wireframe v3 - Standard list
Necessary information would display in the list, like job ID, status, and product name
The user could only sort the list between first to last or last or first
A new job would be created by filling out a form that appears in a side panel
Wireframe decision
The data table was chosen by the team for the final designs. The data table allows the user to sort and filter the data, as well as easily compare the items in the table.
We decided to choose the side panel that appears from the right for the forms to populate the data tables, so users can keep the context of the page.
Final designs
The final designs were designed and implemented with the MUI Design System. The Honeywell Developer Portal uses MUI, so we needed to remain consistent with what exists.
Navigation menu
Menu includes 3 main pages:
Package downloads
Products
Configuration manager
Package downloads
Package downloads house the product deployments that are ready to download; created by either Honeywell or customer engineers. If the product doesn't have a download, the user can create one by filling in the company name, product, version, and configuration.
Tasks to be done:
Create and download product packages
Manage (view, delete, and search) product packages
Products
To create a product deployment, the product must be created in the system first. The product will be listed in this page if it exists in the system; if not, it be created with the product's name, SBG (business group), and version.
Tasks to be done:
Create a new product
Manage (view, edit, delete, and search) through the user's or all products
Configuration manager
Each product deployment must also include a configuration—either default or custom. For custom configurations, the user can create a new instance with the SBG (business unit), product, version, alongside uploads for the configuration and custom parameter files.
Tasks to be done:
Create a new custom configuration
Manage (view, edit, delete, and search) through default and custom configurations
Final prototype demos
Add a new product
Personas: Honeywell SRE or Saas-Ops Engineer
Add a new configuration
Personas: Honeywell SRE
Conclusion
Outcome
I was able to quickly receive receive feedback since I was working directly with Honeywell engineers. I organized the designs into the respected pages and compiled all the MUI components I used for them to easily access in Figma.
More engineering teams want to use the Airgap Portal to deploy new versions and configurations to their customers.
Lessons learned
This work was a different project for me to take on since it was outside my assigned product at Honeywell.
I learned about new processes that happen at Honeywell that my engineering counterparts do within their daily work. I was fortunate that the people I worked with on the Airgap Portal were some of the end-users, so I was able to get valid feedback and direction from them.