Overview

Qontrol is a comprehensive ads platform designed to help users create, manage, and monitor ad campaigns across major publishers like Google, Meta, LinkedIn, and more. Among its three core features—ad campaign creation, performance reporting, and the alert system—the Active Alerts feature within the alert system was intended to empower users to quickly assess triggered alerts and take action.

Despite its potential, usage of Active Alerts significantly declined over time. Users struggled to engage with it because the critical context—the formula or logic behind each alert—was missing. When an alert was triggered, users couldn’t easily see how or why it was triggered, nor could they evaluate whether thresholds should be adjusted. This lack of transparency and utility hindered the feature’s effectiveness.

The goal was clear: integrate the alert formula and its associations directly into the user flow. By providing this context, we aimed to make Active Alerts more actionable and valuable, giving users the tools to better understand and manage their campaigns.

Team

As the sole product designer, I collaborated closely with a multidisciplinary team to bring the Active Alerts feature to life. The team included the SVP of Data and Technology, VP of Software Engineering, a product manager, a software architect, a technical project manager, a technical program manager, and development and QA teams from SF Appworks. Together, we combined our expertise to tackle the challenges of improving the Active Alerts system and creating a seamless, user-centered experience.

Problem

When users navigate to the Active Alerts page and click into an alert to view its details, the underlying structure and logic of the alert are not displayed. This lack of transparency makes it challenging for users to understand why the alert was triggered, limiting their ability to take informed action.

Research

To better understand the problem, interviews were conducted with internal team members who regularly worked with the alert system. These discussions confirmed that the lack of transparency around why alerts were triggered was a key barrier to the use of the Active Alerts feature. Without this critical information, users were hesitant to perform even simple actions such as updating an active alert status.

Key Insights

• Users could identify which alert was triggered but lacked detailed information about why it was triggered.

• The absence of actionable details often resulted in users ignoring active alerts altogether, as they couldn’t determine what was causing the alert.

• Updating thresholds directly within the alert interface could optimize the alert formula without requiring navigation to client settings. However, this would require surfacing how threshold changes might impact other alerts that use the same parameters.

Solution

To address the challenges with the Active Alerts feature, several key enhancements were made to the Alert Triggered page. These changes aimed to provide clarity, transparency, and actionable insights into the alerts while improving usability:

• Alert formula example: a numerical example of the alert formula was added to illustrate how the alert logic works.

• Reusing components: the Thresholds table component from the Client Settings page was reused to ensure a consistent and familiar experience for users.

• Logic visualization: a new visualization was designed to represent the alert formula, with two distinct views: Simplified and Detailed.

Simplified View

The Simplified View breaks down the alert formula into its individual components, offering a granular look at how the alert is triggered:

• Displays the Alert Formula Example, showing the metrics and thresholds used in the calculation.

• Separates conditions requiring all metrics to be true using AND connectors.

• Highlights conditions where at least one metric needs to be true using OR connectors.

• Includes supplementary data like Trigger Frequency and Performance Reference to provide additional context.

Detailed View

The Detailed View provides a higher-level overview of the alert formula, focusing on clarity and brevity:

• Replaces the detailed breakdown with the full Alert Formula in its entirety, including calculated metrics and thresholds.

• Retains the Alert Formula Example, Trigger Frequency, and Performance Reference to maintain actionable insights without overwhelming the user.

These solutions were designed to strike a balance between providing enough detail for troubleshooting while ensuring ease of use and quick comprehension.

Nice to Haves

While the core solution addressed the primary challenges, additional features were identified to further enhance the user experience:

• Threshold editing impact: allow users to edit thresholds directly on the Alert Triggered page while displaying which alerts would be affected by the threshold changes.

• Estimated impact display: when thresholds are updated, show estimated values indicating whether the frequency of the current alert and other associated alerts would increase or decrease.

Goals & Objective

The overall goal was to increase adoption of the Active Alerts feature, a cornerstone of the alert system, to enhance the overall value of the product.

Primary

• Provide a logic visualization experience that surfaces the details of how an alert is built, offering users a clear breakdown of the alert formula to better understand why an alert was triggered.

Secondary

• Explore additional functionality to allow users to edit thresholds and simulate the trigger frequency of alerts associated with the updated threshold.

Objective

• Increase user adoption of the Active Alerts feature by surfacing alert details on the Alert Triggered page.

Process

Designing the improved Active Alerts experience was a collaborative effort involving the entire team, guided by a process as seen below. From understanding user pain points to delivering a refined user interface, each stage built on the last to ensure a robust and user-focused solution.

Two key steps from the Wireframes & Prototypes stage—UI Layout Sketches and Wireframes and Prototypes—played a critical role in shaping the final design. These steps are detailed below.

Click on the button below to see details of processes I use and have been a part of.

UI Layout Sketches

The design journey began with sketches of the Alert Triggered page to map out a clear hierarchy of information. I identified what was already displayed and determined what new elements needed to be incorporated. Ultimately, I decided to "squeeze" the new Alert Details section between the existing Alert Info and Activity Log sections, ensuring a seamless integration into the page layout.

Wireframes & Prototypes

With the structure in place, I moved on to wireframes, starting with the Alert Details section and focusing on the details panel UI—the hub for key information like metrics, thresholds, and the alert formula.

• Simplified view: I added the Alert Formula Example below two tables for associated metrics and thresholds, forming the Simplified View. Placing the formula lower in the panel ensured consistency while toggling between the Simplified and Detailed views.

• Thresholds table: to maintain familiarity, I reused the Thresholds table from the Client Settings page. To enhance usability, I added color-coded highlights showing where thresholds fit into the formula example and their associations within each view.

• Additional tables: below the Thresholds table, I added two supplementary tables:

  • Trigger Frequency: displays how threshold changes might impact alert triggers.

  • Performance Reference: provides context, though it plays a minimal role in this case study.

Iterations

During the iterative design process, there were several refinements to improve clarity and usability. Key refinements included:

• Editing thresholds: initially, due to perceived technical limitations, threshold editing was going to occur in a modal via an Edit Thresholds button near the Client/Business Unit Settings button. This approach was later refined to allow direct edits to client thresholds within the thresholds table, enhancing usability and reducing friction.

• Alert formula example: originally positioned at the top of the panel, the Alert Formula Example was relocated beneath the Simplified View tables and the Detailed View alert formula. This adjustment minimized eye fatigue that was noticed while shifting focus between the Simplified View tables and the formula example. Additionally, it resolved potential usability issues, such as hover interactions overlaying the Simplified and Detailed views, creating a smoother user experience.

• Highlight contrast: colors and opacities used for highlighting the alert threshold keys were updated to ensure contrast standards were being met and improve accessibility.

• Buttons and icons: the Simplified/Detailed view toggle buttons were placed closer together while adding a divider between them and the nearby Client/Business Unit Settings button to increase the margin and reduce accidental clicks. Adding radio icons within the buttons clarified their relationship, making the interaction feel more cohesive.

Through iterative refinements and thoughtful design decisions, this process transformed initial concepts into a user-friendly solution that aligned with project goals.

Final Solution

After extensive creative reviews, user testing of prototypes, and several design iterations, the project culminated in the final visual design state. This stage included refining every element, from the layout to the interactivity, to ensure a seamless user experience. Along the way, I integrated the ability to edit thresholds directly within the Thresholds table, adding functionality to optimize alert management. With the foundational design solidified, the next step was to bring the logic visualization to life.

Interaction Design (IxD)

To elevate the logic visualization experience, I expanded on the existing visual logic (color-coded thresholds) by leveraging the Alert Formula Example to make the alert build more intuitive.

• Hover states and table highlighting: I introduced hover states for each value within the formula (those between the AND/OR connectors). Hovering over a section highlights and auto-scrolls to the corresponding row in the All Need to Be True and One Needs to Be True tables. This interaction creates a dynamic connection between the formula and its associated metrics and thresholds, making the logic easier to follow.

Next, I tackled interactivity within the Trigger Frequency panel:

• Threshold edits and simulations: When a threshold value is updated in the Client column of the Thresholds table, the Trigger Frequency table is overlaid with a button. When clicking the button, a simulation is run to show the impact of the change. Once the simulation is run, the table displays deltas that indicate the estimated change in trigger frequency for both the current alert and any associated alerts. This functionality empowers users to fine-tune thresholds with real-time feedback.

These interaction design enhancements ensured that users could not only understand the logic behind triggered alerts but also adjust and optimize their configurations with confidence, leading to increased usage of the Active Alerts feature as a whole.

Impact

The introduction of the Alert Details section proved to be a game-changer in achieving the primary objective: increasing user adoption of the Active Alerts feature. Adoption rates soared from 35% to over 80%, a clear testament to the effectiveness of the enhancements. By providing clarity into how alerts were triggered and allowing users to better understand and interact with the system, Active Alerts became a fundamental tool of the alert system.

An unexpected bonus was the overwhelmingly positive feedback about the ability to edit thresholds and simulate trigger frequencies. Users appreciated the newfound efficiency of updating thresholds directly on the Alert Triggered page, eliminating the need to navigate to Client Settings. This streamlined workflow not only saved time but also empowered users to make more informed decisions with ease.

Through these thoughtful updates, the Active Alerts feature transitioned from underutilized to essential, fulfilling its potential and significantly enhancing the overall value of the Qontrol platform.

Final Thoughts

This feature was, without a doubt, a real mind-bender at times. There were moments when deciphering the intricacies of alert formulas felt like trying to crack a rubik's cube—but I had the privilege of working with an incredible team that made it all come together. Together, we polished the feature to a shine and saw it through to launch.

Once again, the research process proved its worth, unveiling user pain points and opening the door to unexpected opportunities. What started as a mission to explain why alerts were triggered snowballed into the editable thresholds and trigger frequency simulation features—both of which turned out to be very popular with users.

Looking back, this project was not only a win for Qontrol but also a reminder of the power of listening to users, embracing iteration, and staying open to where the process might lead. And hey, if I ever need to calculate complex thresholds in my personal life, I think I’m all set!

You may also be interested in