A whiteboard idea.
It began as a single sketch, a way to see a regulation’s hierarchy at a glance. That one drawing became the north star for everything that followed.
Foundation · Hierarchy conceptRegology was a regtech platform that used AI to help financial institutions track and comply with thousands of regulations across multiple jurisdictions simultaneously. I joined as the sole product designer and owned the UX end-to-end, from user research and wireframes through to a full design system and developer handoff.
Regology funnels the entire universe of laws down to the rules that apply to a single business, then drives an ongoing compliance cycle. Hover any node to explore it.
Professional compliance users had sophisticated needs the product wasn’t yet meeting.
Users couldn’t search within a specific jurisdiction; every query returned global results.
H·01 Visibility78 unread alerts with no way to route, prioritise, or mute irrelevant feeds.
H·04 ConsistencyThe parent–child relationship between CFR → Part → Section had no visual representation.
H·06 RecognitionWhen regulations updated, there was no diff view to show what actually changed.
H·08 AestheticEighteen months, version after version, each release added the feature the last one revealed we needed. Click through the build.
It began as a single sketch, a way to see a regulation’s hierarchy at a glance. That one drawing became the north star for everything that followed.
Foundation · Hierarchy concept“I spend half my day just trying to find out what changed, I should be spending it figuring out what to do about it.”
Note: this persona has been updated to reflect Regology’s current 2026 user base, now spanning banking, crypto, energy, healthcare, and tech sectors.
Everything in the prototype runs on one typeface, one blue and a small, sturdy kit of components. This is that system, live and pokeable. Click the swatches, flip the switches, expand the rows.
13px / 1.45. The scale stays deliberately tight, dense regulatory tables need predictable rhythm more than dramatic contrast.9–11px, controls at 5–6px. Page gutters sit at 30px; card padding at 14–18px.| Doc No | Title | Type | ||
|---|---|---|---|---|
| 29 CFR 1910.132 | Personal Protective Equipment | Requirement | ||
| 7 CFR 1786.151 | Collection & Recovery of Penalty | Sanction | ||
| 29 CFR 1904.7 | Recording Criteria | Requirement |
1px line, 9–11px radius, a faint shadow and 14–18px padding. They differ only in what they hold, a record, a panel of stats, or a single alert.4px with a soft shadow, a cheap, legible “this is clickable.” On click it locks into a selected state: a blue ring and a corner tick. Clicking the body opens the regulation; the chips act without leaving the list. (The middle and right cards are pinned to show the hover and selected states, click any card to toggle its selection.)#FDEEB0 amber; deletions grey out with a strike. The same two tokens drive every diff in the product.1fr 1fr 300pxrepeat(4, 1fr)repeat(3, 1fr)Early pencil wireframes that mapped the exploration journey before any pixels. Click any sketch to view it full size.


A fully interactive rebuild of the platform. Search, switch views, select & filter regulations, expand the hierarchy, it all works.
| 2019 Design Pattern | 2026 Regology Feature |
|---|---|
| Regulation hierarchy tree | Regulatory Change Agent |
| Alert routing + filter | Smart notification engine |
| Exploration card view | Regulatory Research Agent |
| Version difference view | Change tracking AI |
| Configuration management | Compliance Agent workflows |