Navigate through ambiguity and iterate design to meet changing requirements due to user needs and tech constraints gathering along the way.

To help users quickly browse and focus on key information, I proposed organizing the content into clearly defined sections. The page was designed to address user needs by including insights such as changes in trends, percentage distribution across flows and endpoints, breakdown of actions (e.g., monitored vs. mitigated bad traffic), and distribution of malicious traffic by protected application. Based on these topics, we divided the page into three main sections: highlights (overview and summary), traffic trends, and event breakdown. The highlights section was placed above the fold for immediate visibility. As SMEs contributed more data and we gathered feedback from customers, I iterated on the widgets (infographics and data visualizations), and explored various layout options to ensure a logical, easy-to-digest reading flow.

In the highlights section, our goal was to give users a clear overview of traffic activity. Initially, I considered showing a comprehensive traffic breakdown across all types, including total volume, percentage distribution, trends, and a 7-day comparison. However, based on feedback from SMEs, I narrowed the focus to highlight only bad bot traffic to align the content more closely with the report’s core topic and helped users concentrate on the most relevant data. I also explored various layouts, visualization styles, and typography choices to present the information more effectively and enhance readability. Lastly, we added an “Unknown” category (alongside “Mitigated” and “Flagged” traffic) to better reflect the actual data landscape and maintain transparency with users.

In addition to the traffic overview, we aimed to provide users with a broader context by grouping and categorizing flow labels to reveal not just that traffic originated from malicious bots, but also the intent behind those attacks. Ideally, the interface would show different attack intents observed on an application, their prevalence, and trends such as changes in directionality and velocity over time. We began with a tagged traffic breakdown infographic, which later evolved into a more focused representation of attack intent and mitigation rationale. As part of this iteration, I replaced the donut chart with a distribution bar chart to improve readability and optimize space usage. I also explored several enhancements, including brief explanatory text, links to reference material (e.g., OWASP Automated Threats to Web Applications), percentage visualizations, trend indicators, and suggested actions. Design iterations also addressed visual emphasis, color harmony, and accessibility (color blindness considerations).

In the traffic trends section, one of our goals was to help users easily understand event patterns across applications over time. There was internal debate about whether to prioritize percentage or absolute event counts, so I proposed a new tooltip design that displays both metrics, along with a total summary for added context. For application selection, I explored several interaction options to improve usability. These included displaying separate lists for available and selected apps, showing event counts and percentages within the dropdown, pre-selecting the top 10 apps by default with a “Reset to Top 10” option, and supporting a “Clear All” function. I also ensured users were informed about how many apps were available and how many had been selected, set a maximum selection limit, and added a reminder message prompting users to select at least one app when none were chosen.

For the traffic breakdown of transactions, we grouped data by patterns and explored multiple presentation methods. This included using a data grid and accordion layout, where each row displayed summary KPIs, and expanding it revealed top data points. I experimented with different typography styles to enhance clarity and hierarchy. In the detailed view, KPIs were sorted from highest to lowest, helping users quickly understand the percentage occupied by the top ten items, with the option to view the full dataset in a secondary layer.

I also explored various visualization types to improve data presentation, ranging from donut charts to distribution bar charts, aiming to enhance readability and make more efficient use of space. For line charts, I focused on improving clarity by making lines bolder and highlighting key data points such as the maximum and minimum values. Additionally, I proposed an improved tooltip design that summarized the total count, along with event numbers and percentage shares. Throughout the iteration process, we dedicated to help users access richer insights in a more concise and easily understandable format.

Starting with the highlight section, users can quickly review key metrics, top attack intents, and mitigation rationales (reason codes) for bad bot traffic within a specific region and time period.

Scrolling down, users can explore traffic trends broken down by different categories. They can switch between different visualization types based on their needs, narrow the time range, and filter data by specific applications right in the widgets.

Lastly, transaction details can be viewed with different groupings, allowing users to uncover insights and patterns from the top items in each category.