Composition / Extraction helper
Helping users create actionable alert data.
Role
I designed this project solo while at BigPanda.
Year
2022
Overview
BigPanda transforms monitoring tool data into Alert tags. However, these tags may not always be optimal for users due to excess or lack of information. The Enrichment tag feature offers two methods for creating more understandable and actionable Alert tags: Extraction and Composition.
​
Extraction
Users can create new custom tags by extracting values from an existing tag.
​
Example: extract service, node, and cluster information from a hostname.
Composition
Users can create one new custom tag by combining multiple values of existing tags.
Example: combine base wiki URL, cluster tag value, and check tag value to add a runbook URL for alert remediation.
User problem
Users struggle when attempting to independently create custom alert tags.
Business problem
Onboarding new clients takes a lot of time because the platform is not self service.
Before state
The before state was a tooltip that contained explanations about the Composition & Extraction methods. It would close when the user started typing and it wasn't informative enough. Also, the examples were not good enough.
Describe your image
Describe your image
Describe your image
Solution
Creating an interactive Composition and Extraction formula helper so users can easily understand how to write the syntax correctly without needing to leave the page.
Composition
The Composition helper has Alert tag values that exist in the system that the user can choose from. On the right side it contains the explaination of the composition method with examples.
When the user types in the input the Alert tags appear. When hovering over an alert tag value it shows a detailed explaination on the right side.
Extraction
The Extraction helper has common patterns and syntax suggestions on the left side. On the right panel there is an explaination of the extraction method and some examples.
I decided to put common used patterns that our users usually use so they would only have to click on it and there done!
Design Process
​
Challenges
​
-
How to represent alert tags and regex syntax in the helper?
-
How to help the user understand the composition method?
-
How to help the user understand the Extraction method?
-
How to teach the user the correct syntax for the composition formula?
Insights from research
​
-
Users have a hard time remembering the syntax
-
Users struggle in creating correct regex formulas
-
Users have a hard time understanding that what they put inside the capture group will become the value of the new tag
-
Most of the users use the extraction method for extracting values between dots or hyphens.
​
After getting some insights around the problem I made some design Iterations and collected feedback from my UX team and product teams.
Design Iterations
Chosen version
User Testing
​
I tested the prototypes on 5 of my colleagues that were not familiar with the Formulas so to succeed in the task they needed to use the helper.
​
​
Composition testing findings:
​
-
Some users with limited composition knowledge grasped the alert tag population after one attempt.
-
All users successfully completed the task.
-
Users with technical knowledge understood that clicking on the alert tag would populate it.
-
The helper function effectively reminds users of the syntax.
-
The options for free text and syntax input are user-friendly.
-
The use of colors facilitates understanding and writing the syntax.
​
Extraction testing findings:
​
-
Users struggled to understand the usage of different colors.
-
Explanations and examples helped users succeed in creating patterns with minimal regex knowledge.
-
The separation of syntax into different backgrounds confused the users.
-
Examples are crucial for understanding the syntax.
