Case Study

HSBC - Anti Money Laundering

Project Info

Updating the Ayasdi enterprise anti-money laundering app experience and visual design for HSBC.

The Challenge

To create task pathways with various points of entry and exit for different users. The HSBC AML app had to accommodate many user types; data entry, data analyst, managers, and auditors. Permissions revealed a complete or partial journey depending on roles.
Update look and feel from the previous product. The previous product was plain and uninspiring as well as hard to use. Customers wanted something that made a repetitive task easier and more delightful.
To create a simple onboarding joyride using balloons to show new features as well as how to use and access them.

HSBC paid $1.92 billion in fines to U.S. authorities for allowing itself to be used to launder drug money.






– UX analysis/research (flows and persona)

– Design (visual and interaction)

– Lo-fi prototyping (basic flow and interactions)

– Hi-fi prototyping (final designs for approval and handoff to dev)

The Approach

Rapid and agile ideation. White-boarding ideas, both good and bad. Then creating very basic wireframes to be used as simple click-through prototypes to refine flows.

Early wire-frames in sketch. These became a preliminary click-through to work out flow ideas. They were also used in preliminary customer testing.

Try out early click flow test v1
Sample screens from click through testing

Testing was performed by staff data scientists, product managers, and later versions by the CEO and upper management.

PMs also tested this early version with a few select customers/power users.

Some charts were thrown in for dramatic payoff including a couple of sample topological plots.

Try user flow test v2 or user flow test v3

First version of flow diagram made from feedback of early click throughs.

The evolving version of the flow diagram after notes and comments from testing new versions of the click throughs.

More formalized card flow diagram. This was the starting point to begin to finalize features as well as how to get to multiple customer journeys.

One of the main desires for the final project was a non-linear work flow. The cards in the top navigation gave status to concurrently rendering processes. The user could go into each section and check progress as well as results for completed activities.

Card navigation is used throughout the product allowing users to preview and compare different models and drill deeper into selected ones.

Interactive charts were designed to show the power of Ayasdi’s predictive modeling algorithms. A heatmap to show the accuracy of predictions and a modeling curve that could be adjusted with a slider for accuracy, precision, and recall.

Visualizations and charting were customizable and an invaluable tool for data insights.

Topological models were what really set Ayasdi apart. Using these models, data was visualized and groupings and outliers are revealed. Interactive charting is combined with the model allowing a user to tune the thresholds within each model to make predictions and insights that might never occur looking at a flat data set.

Pertinent data insights, visualizations, models, and charts could all be pinned to a dashboard. These dashboards could then be set up to monitor trends in the data as well as be used as presentations or documentation.  Notes could be attached for reference or explanation for handoff.