Hatari · Voyance — Aderinsola Adejuwon
Ask me about this project...

Ask about Hatari

Powered by Claude AI
Try asking:
Why did you choose a node canvas over a form builder?
How did you make ML legible to non-data-scientists?
What was the hardest design problem on Hatari?
How did you handle async handoff across time zones?
← Back to home Aderinsola Next project →
Hatari / Voyance

I joined to design a billing flow. I left having designed the product.

How I led design across a transaction-monitoring platform: from a visual rules engine to case management to the design system underneath, at a Techstars-backed fintech in Lagos.

Role Product Designer
Company Voyance (Techstars '22)
Timeline Jul 2021 – Aug 2023
Platform Web (desktop / tablet)
Industry Fintech / RegTech
Hatari workflow canvas showing an Input, Rule, and Action node connected
The problem

Fast enough to catch fraud. Defensible enough to survive an audit.

Hatari's customers (banks, fintechs, lenders) have to make a yes/no call on a payment in milliseconds, then defend that call to a regulator months later. That double bind: fast and defensible — is the whole problem.

Rules required an engineer A compliance lead knew exactly what "risky" looked like but couldn't express it without filing a ticket and waiting on engineering.
The model quietly rotted Fraud patterns drift. A model that scored well last quarter silently gets worse, and the people relying on it have no way to see it happening.
Flagged events went nowhere Alerts piled up without a real place to triage, decide, record a verdict, and prove later why a decision was made.

And underneath: the parts I was asked to design (onboarding, subscriptions, team management) had no product to attach to yet. Hatari was being spun out as a standalone product, and the existing foundation didn't reach the dense, specialised screens this one would be made of.

Discovery

I didn't start from assumptions.

Discovery drew on interviews with target users (representatives from banks, fintechs, and online businesses), analysis of support tickets against Voyance's existing authentication and billing flows, and a read of competitor tools and where they frustrated people.

What I learned changed the design in two ways:

On the front-of-house The recurring pains were specific: confusion during login, difficulty managing subscriptions, and billing statements people couldn't make sense of. The "seamless billing experience" in my brief was really a clarity and control problem, not a visual one.
On the core product Compliance people think in policies, not programs. They could describe a rule in a sentence. They could not, and did not want to, write code. Any builder that made them think like engineers would break the trust that makes them willing to hand over live transaction data.

Before screens, I set a few principles so the later decisions weren't arbitrary:

Teach through the interface, not the manual. In a tool this complex, the UI itself should make the right thing obvious and the wrong thing hard. Make destruction recoverable. In a domain where mistakes have compliance consequences, "undo" is a feature, not friction. Plain language over system language. A rule should read like a sentence, a model's health like a status, a bill like a plain statement.
The solution

The rules engine: the decision the product turned on

Let a compliance analyst (not a developer) compose real-time logic over a live stream of transactions, and have it feel authorable and auditable rather than like writing a program. I weighed two approaches:

Considered: Form builder

A conventional stack of IF / AND / THEN condition rows. Familiar, quick to build, and fine for a single simple rule.

But it hides the logic: once a policy has more than a couple of conditions, a flat list stops telling you what actually happens, in what order, to what. That's the opposite of auditable.

✗ Not chosen
Chosen: Node canvas

A visual pipeline: input → rule → action nodes wired together on a canvas, with each rule's logic written in plain "If / Then" language.

Stream processing already behaves like a pipeline, so the canvas matches the mental model and shows the whole decision path at a glance, which is exactly what auditability means. The trade-off: harder to build, a steeper first five minutes. I spent the effort buying that cost down.

✓ Chosen
Input Transactions
Rule Amount > $10K
Action Flag & alert
How I bought the learning curve down:
Blank workflow canvas with 'Drag and drop an input node to begin' prompt
Blank state teaches the first move "Drag and drop an input node to begin." The canvas opens with one instruction instead of intimidating.
Workflow canvas: Input (Transaction stream) → Rule (Amount > $10,000) → Action (Flag for review)
Rules read as English "If" and "Then" statements, so "more than 15 transactions in a week to an unexpected location" reads as a sentence.
'Only one input node per workflow' tooltip disabling the Input Node button
UI enforces validity Only one input node allowed; the option disables itself once one is placed. The constraint is taught by the UI, not by a failure message.
Rule Editor panel showing context-aware controls for the selected node
Context-aware controls Dropping a node changes the bottom bar to expose only that node's controls, instead of showing everything at once.
Key decisions

Every other surface I designed, as a decision.

The rules engine was the heart of Hatari, but three more surfaces had to be just as considered for the product to hold together. Each one came down to a single decision.

01 Cases · Case management

Design the case queue as a workspace, and make permissions explicit.

{{ a.label }} {{ a.sign }}

{{ a.body }}

{{ s.label }}
{{ prodCarCases.current }}
{{ prodCarCases.counter }}
02 Models · ML monitoring

Make a model's decay legible to people who aren't data scientists.

{{ a.label }} {{ a.sign }}

{{ a.body }}

{{ s.label }}
{{ prodCarModels.current }}
{{ prodCarModels.counter }}
03 Billing · Front-of-house

Treat billing as a clarity-and-control problem, not a visual one.

{{ a.label }} {{ a.sign }}

{{ a.body }}

{{ s.label }}
{{ prodCarBilling.current }}
{{ prodCarBilling.counter }}
The 20% nobody sees

Designing for handoff as its own problem.

With a team split across time zones, an engineer often couldn't ask me a question synchronously, so the answer had to already be on the canvas. I left designer's notes documenting interaction logic: that deleting a rule is undoable, that exiting with unsaved changes warns you first, that a filtered list shows a recovery banner before it's gone.

Undo & redo Deletions are recoverable. A banner appears for a few seconds before anything is permanent.
Unsaved changes Exit guards on every destructive path. In a compliance tool, "are you sure?" is a feature.
Complete state matrix Every upload: in progress, succeeded, failed, too large, unsupported. Every edge case handled.
Hatari workflow canvas with an undo banner for recovering a deletion
The undo banner: a few seconds to recover before anything becomes permanent
The impact

From capability to product.

$85K+ ARR at market launch
10+ Product surfaces designed
0 → 1 Standalone product shipped

Hatari went from a borrowed, general-purpose foundation to a coherent, shippable, sellable product with its own system, across every surface a customer touches. Early customers included Dojah and AjoCard, and the product was generating recurring revenue by the time it went to market.

The business outcome belongs to the team. I include it as proof Hatari became real, not as something my design caused.

What shipped

A standalone product where there had been a capability.

I designed every surface a customer touches. Here is the full scope of what I owned, end to end:

Visual workflow & rules engine
Case management
ML model management
Dashboards & analytics
Onboarding & projects
Subscriptions & billing
Developer & API settings
Team, permissions & feedback

I didn't do it alone. Our product manager owned requirements, go-to-market, and customer relationships. The ML engineers owned the models I was designing an interface around. Frontend engineers built it across time zones, and a lot of my design decisions were shaped by what would translate cleanly into code without me in the room. There was also a design lead at Voyance I checked direction with.

My job was to be the person holding the whole product's design together. It was still a team's product.

"Aderinsola was the key force behind our Hatari project, and also did great work updating our design system."

— Design Team Lead, Voyance

"She knows when to stand her ground and defend UX and design decisions. Her ability to handle edge cases and iterate on the fly is stellar."

— Olayinka Oloko, Product Manager
Looking back

What I learned from designing a high-stakes product.

What worked

Treating scope as something to find rather than accept. The honest unit of work was never "billing"; it was "a product a team can trust with high-stakes decisions."

What surprised me

How much of good design in a high-stakes tool is deceleration: the undo banners, the unsaved-changes guards, the constraint that disables itself. I came in thinking my job was to make things faster; a lot of the most important work was making the dangerous things slower.

What I'd do differently

Get the rules-builder mental model in front of real compliance analysts earlier and more often. It's the surface most likely to make or break adoption, and it deserved the most outside contact with actual users.

How it changed how I design now

I stopped treating empty, error, and loading states as cleanup at the end. On Hatari they carried as much of the product's trustworthiness as the happy path, and I've designed states-first ever since.

← All projects Next project →