AlertGo: IT Alert System Revamp
AlertGo is an alert monitoring and logging system for the IT team to maintain market trading platforms. While the functions were onboard, improving UX for greater efficiency was put on schedule.
In this case, I summarised 2 objectives of improvement from user study, and revamped the UI/UX with insights from IT support. Additionally, I bridged design and implementation by learning and using JavaScript (Vue) and CSS properties.
Company
HSBC
Year
2024
Duration
5 months
My Contribution
Heuristic Evaluation
User Interview
Competitive Analysis
High-fidelity Prototype
Front-end Development
*For confidentiality purposes, names, data, and specific functionalities, have been modified or anonymised. The core process and outcomes remain accurate to reflect my contributions and learnings.
Heuristic Evaluation
Detect Potential UX Defects
Dove into the system myself, I applied heuristic analysis to uncover UX issues. By testing usability firsthand and evaluating against core principles, I found the following challenges that a first time user might encounter:
Heuristic Evaluation
Detect Potential UX Defects
Dove into the system myself, I applied heuristic analysis to uncover UX issues. By testing usability firsthand and evaluating against core principles, I found the following challenges that a first time user might encounter:
Heuristic Evaluation
Detect Potential UX Defects
Dove into the system myself, I applied heuristic analysis to uncover UX issues. By testing usability firsthand and evaluating against core principles, I found the following challenges that a first time user might encounter:
Cluttered visuals and readability issues
Ambiguous buttons and coloured rows
Absence of responsive design
Absence of responsive design
User Interview
How IT Operators Handle System Alerts
Through the interviewing process, I reached out to 6 IT operators and gained valuable insight into the end-to-end IT ticketing process. In addition to asking about my initial observations, I also inquired how IT operations worked, how they interacted with the system and gathered their expectations for improvements.
User Interview
How IT Operators Handle System Alerts
Through the interviewing process, I reached out to 6 IT operators and gained valuable insight into the end-to-end IT ticketing process. In addition to asking about my initial observations, I also inquired how IT operations worked, how they interacted with the system and gathered their expectations for improvements.
User Interview
How IT Operators Handle System Alerts
Through the interviewing process, I reached out to 6 IT operators and gained valuable insight into the end-to-end IT ticketing process. In addition to asking about my initial observations, I also inquired how IT operations worked, how they interacted with the system and gathered their expectations for improvements.
Insights
The Different Roles
To balance the daily tasks and respond to emergency issues promptly, IT team members take on different support roles.
Insights
The Different Roles
To balance the daily tasks and respond to emergency issues promptly, IT team members take on different support roles.
Insights
The Different Roles
To balance the daily tasks and respond to emergency issues promptly, IT team members take on different support roles.
"Batman"
PRIMARY USER
Responding to alerts, investigating issues, and logging severity in AlertGo.
Support
SECONDARY USER
Identifying unhandled alerts and ensuring the correct Batman is assigned to resolve them.
Pod Team
RELATED USER
Reminding the Batman or finding a backup when the Batman is unavailable.
Pain Points and Opportunities
Focusing on the process users gather information, I summarised the pain point and opportunities.
Pain Points and Opportunities
Focusing on the process users gather information, I summarised the pain point and opportunities.
Pain Points and Opportunities
Focusing on the process users gather information, I summarised the pain point and opportunities.
How Support System Worked
By asking about a typical day of handling support as a Batman, Support or a pod team member, I summarised the findings by service blueprint and highlighted the insights.
How Support System Worked
By asking about a typical day of handling support as a Batman, Support or a pod team member, I summarised the findings by service blueprint and highlighted the insights.
How Support System Worked
By asking about a typical day of handling support as a Batman, Support or a pod team member, I summarised the findings by service blueprint and highlighted the insights.
The Piece of the Puzzle
INSIGHT #1
AlertGo integrated with internal channels, bots, and Xmatters to empower the support process.
Plug and Play
INSIGHT #2
Users wanted to access the alerts and actions as easy as possible.
Rapid Resolutions
INSIGHT #3
The IT Supports were in a timely manner to ensure the alerts were addressed.
Objectives
How Might We…
Enable Batman or their backup to respond to alerts promptly?
Streamline the process of identifying alerts for faster resolution?
Objectives
How Might We…
Enable Batman or their backup to respond to alerts promptly?
Streamline the process of identifying alerts for faster resolution?
Objectives
How Might We…
Enable Batman or their backup to respond to alerts promptly?
Streamline the process of identifying alerts for faster resolution?
Competitive Analysis
Additional Learnings From Competitive Products
To balance the browsing and reading experience, I assessed various IT support solutions in the market. Then I identified three patterns of displaying alerts, created quick mockups to gather user feedback, and proposed a direction to the team.
Competitive Analysis
Additional Learnings From Competitive Products
To balance the browsing and reading experience, I assessed various IT support solutions in the market. Then I identified three patterns of displaying alerts, created quick mockups to gather user feedback, and proposed a direction to the team.
Competitive Analysis
Additional Learnings From Competitive Products
To balance the browsing and reading experience, I assessed various IT support solutions in the market. Then I identified three patterns of displaying alerts, created quick mockups to gather user feedback, and proposed a direction to the team.
Cards
UNSELECTED
Concise with the key information.
Distinguishable between different elements.
Allow to take quick actions
The card design decreased the scanning efficiency, and lacked of extensibility
List-Detail Navigation
UNSELECTED
Fit user mental models.
Easier to focus on the details.
Rich space for information and functionality.
Extensible.
The information structure couldn’t meet users’ expectation of plug and play.
Hybrid Table
ADOPTED DIRECTION
Bring user rich details and a good scanning/reading experience.
Enable user to take actions in one click.
Design & Iteration
Learning, Doing, Iterating
As product designer (and front-end engineer, partially) working in a project with limited resources, I ensured designs were not too complicated to implement. To enable this I had equipped myself with more skills and gradually enhances the designs that I create.
Design & Iteration
Learning, Doing, Iterating
As product designer (and front-end engineer, partially) working in a project with limited resources, I ensured designs were not too complicated to implement. To enable this I had equipped myself with more skills and gradually enhances the designs that I create.
Design & Iteration
Learning, Doing, Iterating
As product designer (and front-end engineer, partially) working in a project with limited resources, I ensured designs were not too complicated to implement. To enable this I had equipped myself with more skills and gradually enhances the designs that I create.
Solutions - HMW1
HMW Enable Batman or Their Backup to Respond to Alerts Promptly?
We found 3 key problems that caused delay of responding to an alert. And provided solutions to address them.
Solutions - HMW1
HMW Enable Batman or Their Backup to Respond to Alerts Promptly?
We found 3 key problems that caused delay of responding to an alert. And provided solutions to address them.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
#1 New Alerts Were Buried Under Old Groups With Subtle Changes
PRoblem to solve
To address this, I proposed to show the latest updated alert on homepage so that the alert group could be on the top sorting by time sequence. Besides, alert time was redesigned from timestamps to "minutes ago" for better clarity.
#2 The page loading time could be slow, which disrupting timely access.
PRoblem to solve
After discussed the root cause with experienced engineers, I proposed to add pagination feature to reduce the data load at once.
#3 the Batman might being off duty after acknowledging An Alert
PRoblem to solve
Handlers that have been off duty are highlighted so the team can switch the handler promptly.
Additionally, I noticed that the limited responsive design pushed buttons off-screen on laptop displays. As a result, I adjusted the responsibility guidelines and tailored the layout for each breakpoint.
Additionally, I noticed that the limited responsive design pushed buttons off-screen on laptop displays. As a result, I adjusted the responsibility guidelines and tailored the layout for each breakpoint.
Additionally, I noticed that the limited responsive design pushed buttons off-screen on laptop displays. As a result, I adjusted the responsibility guidelines and tailored the layout for each breakpoint.
Solutions - HMW2
HMW Streamline the process of identifying alerts for faster resolution?
From previous user interviews, we identified two user types, each following a two-step process to identify alerts—scanning and reading. I revisited the design based on this insight to improve efficiency.
Solutions - HMW2
HMW Streamline the process of identifying alerts for faster resolution?
From previous user interviews, we identified two user types, each following a two-step process to identify alerts—scanning and reading. I revisited the design based on this insight to improve efficiency.
Solutions - HMW2
HMW Streamline the process of identifying alerts for faster resolution?
From previous user interviews, we identified two user types, each following a two-step process to identify alerts—scanning and reading. I revisited the design based on this insight to improve efficiency.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
Improve Alert-Scanning Efficiency
Filters tailored for Batman and Support’s different scanning patterns.
Restructured data to fit F shape reading pattern, help users identifying alerts faster.
A Better Alert-Reading Experience
Reorganized data by user scenarios to maximize reading efficiency.
Alert details were trimmed based on users’ actual scenarios and needs.
Fonts sizes and spacing were carefully considered for an intuitive reading experience.
Buttons only displayed when mouse was hovering on an alert to reduce cognitive load.
