About Auvik

OVERVIEW

Auvik is a network management and monitoring platform that helps IT professionals troubleshoot issues, gain real-time visibility into their infrastructure, and proactively identify potential problems before they escalate. With features like automated network mapping, performance tracking, and alerting, Auvik empowers teams to manage complex networks more efficiently and with greater confidence.

Context + Role

OVERVIEW

The Auvik platform provides many diagnostic parameters for its users and the ability to send users alerts when thresholds for these parameters are met. IT professional are alerted through notifications when these thresholds are met, allowing them to check or fix the issue at hand.

The design team was tasked with revamping the entire alerting workflow to make it easier for users to use alerts. New functionality was also added to the work alerting feature. Our design team, through competitor and user research was able to identify how the new alerting experience was going to look. However, we were missing key components within the design system to make this happen. One such component was the expression builder.

My role was to work with the Staff UX Designer and Design System PM to help visualize, build and document a robust expression builder that would service our current and future needs.

Inspiration + Exploration

RESEARCH

To come up with our recommendation, we looked at how competitors and other industry professional utilized the expression builder within their workflows. We also analyzed various user experiences of the expression builder and noted the ones we thought were best in terms of ease of use. We looked at expression builders used within Heap, our competitors such as Solar Winds as well as some other general research. Below is a sample of some of the research we gathered.

COMPETITOR ANALYSIS

Building Concepts

DESIGN

We explored multiple variations of the expression builder as shown here. Each option was explored in relation to the entire alerting workflow and with engineering to ensure the design was deliverable.

PHASE 1

PHASE 2

PHASE 3

PHASE 4 (FINAL)

Testing the Ease of Use

TESTING

Although the UX team favoured the design explored in Phase 3 for its simplicity, we ultimately moved forward with the Phase 4 design, as it proved more robust and scalable for the alerting workflow. Through customer calls, we validated that the expression builder remained intuitive and easy to use. An additional factor in the decision was development efficiency—Phase 4 leveraged existing React libraries, significantly reducing implementation time.

Usage in Final Product

TESTING

CREATE ALERT FORM