J Kang
06-Watchlist-UI-Scenario detail 1.png

Data chart UI/UX

 

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.

Final.png

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.

1 Line chart.png

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.

Spike.png

4) Spikes

  • 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

Thumbnail, mini versions of charts

2.  Adjusting visual Hierarchy

3. Making the chart actionable

On the spike-lines chart that shows the real-time state of event being screened/resolved, users can directly click through the specific event on the tooltip of a spike, and get to the report page of that specific event displayed on the chart. For example, If users click “New Sanction…”, it will lead them to the report page of “New Sanction…”








 

Minimal Version

Screening Overview - Charts Copy.png