Charts on Watchlist UI/UX Design
Watchlist is Enigma Technologies’ end-to-end watchlist screening solution demo product. A screening solution helps determine whether records representing entities in a population match with entities described in a given watchlist. The product demo UI was successfully presented at the Sanctions Round table event and we were able to open the conversation around Sanctions and get feedback from experts in the financial industry.
The Purpose of Screening Overview Charts
These analytical charts aim to provide insights into data collected over time. They help users understand what happened in the system, and what changes they should make in the future.
1. Delivering Insights to users in real-time
Target users: Technical manager of the system
For technical managers to check the overall screening system at a glance.A technical manager is in charge of the technical aspects of the solution, such as defining endpoints, monitoring screening activities on the platform, etc. Ultimately, technical managers are responsible for uptime and reliability, and rely on the information made available by our platform for their day to day job.
2. Identifying the best use of system-level data
In parallel with product development, we thought about how the system would perform and what kinds of data/analytics will be possibly displayed throughout the screening process.
3. Maximizing insights, minimizing confusion.
We believe that just displaying aggregate data on charts like dashboards are not enough to give values to users, and often unnecessarily overpowering the actual content.
To solve that problem, I’ve been iterating on how to minimize the visuals and maximize the actionable insight for users. To do so, I’ve been trying to leverage the UI interaction ideas from the design system like “expandable widgets, and tabs” and show the minimal versions of charts and full reports with more detailed charts.
Type of charts
Choosing the right chart type was one of the challenges when it comes to communicate the screening technology process.
1) Funnel Chart
Show streamlined data and Enigma’s screening technology.
Each slice in the funnel represents a process that has filtered out records.
Show the beginning (records screened) and the outcome (alerts created) clearly.
Funnels chart is used to show streamlined data by evaluating a series of related events that are the steps toward a specific goal. Each slice in the funnel represents a process that has filtered out data. The last funnel bears the value that is the final result of the entire procedure. In this example, we used the funnel chart to show the four stages of the screening process (Prescreening, Whitelisting, Contextualizing, Auto-adjudication)
The primary purpose of this chart is 1) to show the progress of how the records are filtering down through the screening process 2) to highlight the beginning point and the end outcome.
The users will see how many records are being screened on that day and how many alerts are generated as an end outcome of the screening process.
Specifically, you can see 900K records are screened and by going through pre-screening, only 135,000 records remain after 85% of data gets screened out. In this algorithm, the fact that data is matching against Watchlist is that it’s suspicious and needs users’ attention. The final remaining records after adjudication are classified as “alerts” in the system. Visually, I used area-chart looking funnel instead of typical center-focused funnel chart in order to show the accumulation of data clearly.
Through design iterations, this funnel chart evolved from the early version that emphasized more on the actual percentage of each stage to emphasizing the outcome and results.
2) Area Chart (Line Graph)
Show patterns of alert rates over time
Show volumes of alert rates
Show alert rate at a certain time and in different timelines
Area chart is an option when a line chart is showing a time series for a single attribute. In this example, It shows the overall patterns of Alert rate (=match rate) over time.
Visually, this area chart is designed with a subtle gradient to give it a lighter/acute feeling, yet to depict a sense of volume of the “alert rate” screened overtime.
Users can select different time ranges (day/week/month/6months/year/Max) to view trends in different timelines. When hovering over on a data point on the line chart, you will see the specific number and the date.
3) Bar Chart
Show Categories of Activities/Attributes/Watchlists
Show Ranking of data types going up and down
Bars on the chart are arranged in order
The bar chart is a graphic representation of a table. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value.
The purpose of this chart is to show the quantity of each data category as well as showing the ranking of what’s going up and down. ex) Activities / Attributes / Watchlist
Pie/donut charts also can be used for the same data types to classify the category, but this chart focuses more on displaying the rank of data types scanned in the system.
Show Spikes (Anomalies) which are quarantines in this case.
Users can click and directly view the report page for the quarantine.
Spikes are commonly used in time series plots. They are also useful in showing deviation from common values such as the mean or median. Line Charts show how a particular data changes at equal intervals of time.
5) Sparklines (small line chart)
A sparkline is a very small line chart, typically drawn without axes or coordinates. It presents the general shape of the variation in some measurement, such as temperature or stock market price, in a simple and highly condensed way.
Enhancing UX for charts
1. Minimizing visual clutter, maximizing insights
UI idea 1: Combining the chart with the header
Attaching the chart widget to the title area so that it looks unified with the header section
UI idea 2: Tabs
Having tabs on the top instead of displaying them altogether on the same page. It enables users to toggle between each chart and navigate the analytics by themselves.
UI idea 2: Expand