AIRGAP PORTAL
UX and UI design for generating job deployments between Honeywell Site Reliability Engineers and customer engineers.
TL;DR
Overview
Honeywell customers host our products in their 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.
Honeywell Site Reliability Engineers (SREs) must manually package these deployments for customer handoff, which can take up to five days. This is an inefficient timeline for SREs, and customers must wait days to receive a new product update.
These SREs and customers need a solution 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
Role
UX UI Designer Lead
Duration
Summer 2024
USER STORIES
The Airgap portal would serve three main users; between internal Honeywell engineers and external customer engineers. Whether a customer engineer needs to download a deployment package or a Honeywell SRE needs to monitor deployments, Airgap Portal will be able to support each user's needs.
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:
"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."
TASK FLOWS
The Airgap portal would need three main screens for MVO: Package download, Products, and Configuration Manager. Each screen would help the user get to their end-goals of either deploying a package, ensuring the customer is assigned to correct products, or [configuration task].
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
Proof of concept
To begin wireframes, 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
User selects a product name from a dropdown menu
User selects 'Submit' for the new job to populate the list
User must refresh the job to see if it's ready to be downloaded
Wireframe v1 - Data table
A data table would show a range of data types for a job deployment, such as the job ID, product the deployment is for, and the version number.
The user would sort by columns to view product-specific jobs or sort by timestamp
The table would be used to show job deployments, products, and configurations
A new job would be created through a modal that contains a form with the required input fields
Wireframe v2 - Card list
A card list would show a grid view of all job deployments. Each card would include items like the job ID and status of the job, and give actions through a 'More' menu in the top-right corner of each card.
The newest card in the top-left would indicate the newest job that has been requested
The card list view could support all 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
A standard list would be used to show a top to bottom list of all job deployments. Less jobs could be shown on a page, but could reduce the user's cognitive load.
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 from the right side of the interface
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. The data table could also support the different data types that would be needed for the the package downloads, products, and configurations.
Additionally, we decided to choose the panel that appears from the right of the interface for the needed forms to populate the data tables. This allows the user to keep the context of the page they are on and avoids the potential for a modal on top of a modal.
FINAL DESIGNS
Task flow: Create a package download
Personas: Honeywell SRE & Customer Engineer
Select "Create New Job" from the Package Downloads' data table
Fill out the 'Create New Job' form in the right panel and select "Create" when finished
The new jobs will begin running and new entires will appear in the data table
Once ready for download, a new snackbar will appear in the bottom-left corner
Task flow: Delete a package download
Personas: Honeywell SRE & Customer Engineer
Navigate to the "Package Downloads" page in the Airgap Portal
Select the delete icon button for the job item to be deleted
Select "Delete" in the confirmation modal that appears on top of the dashboard
Once deleted, a snackbar confirming the deletion appears in the bottom-left corner
Task flow: Create a new product
Personas: Honeywell SRE & SaasOps Engineer
Select "Add Product" from the "All Products" data table
Fill out the "Add Product" form in the right panel and select "Create" when finished
The new product will be added to the table & a snackbar will appear in the bottom-left corner
Task flow: Edit an existing product
Personas: Honeywell SRE & SaasOps Engineer
Select the edit icon button next to the product that needs to be updated
Make the version updates in the form within right panel & select "Save"
The product's updated will save & a snackbar appears in the bottom-left corner
Task flow: Create a default configuration
Personas: Honeywell SRE
Navigate to the "Configuration Manager" page in the Airgap Portal
Select the "Custom" tab to view and create custom configurations
Select "Create custom", fill out the form that opens, select "Create" when finished
The Custom Configuration's table is updated & a confirmation snackbar appears
Demo
Create a package download (Personas: Honeywell SRE or Customer Engineer)
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 get designs done and receive feedback since the engineers I was working with were in the same area of the Honeywell office as me. I organized the designs into the respected pages and compiled all the MUI components I used for them to easily access in Figma.
The engineers have received great feedback from their stakeholders, and more teams want to use the Airgap Portal to deploy new versions and configurations to their customers in the future.
Lessons learned
This work was a different project for me to take on since it was outside my assigned product at Honeywell. I was asked to do this assignment in addition to my current work, and I was able to balance the workload. I was able to learn about new processes that happen at Honeywell that my engineering counterparts do within their daily work. I was also 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.