Three teams, three products, one company

Each team at Vcheck was shipping its own product in its own visual language. A dropdown designed in March would be designed again in June by someone else, solving the same problem without knowing it had already been solved.

Nothing underneath was shared. States were missing, names followed no convention, and there was no documentation to point to. Engineers read each spec their own way, and designers drew the same components again for every new feature.

I counted before I drew

The audit came first: every screen, every component, every pattern, logged with where it had been duplicated and where two versions disagreed. It turned out worse than anyone expected.

Then I sat with engineers to find the exact places they were guessing, and studied how IBM, Atlassian and Microsoft had solved the same problems, to set a bar for what Particle had to reach.

Decisions made before the first component

Four layers on one foundation

60+ components and 200+ variants. Different products, one shared foundation.

L1FoundationsColor, typography, spacing, elevation, radius and grid. Tokens sync between Figma variables and development tokens, so one change propagates everywhere.

L2ComponentsButtons, inputs, modals, tables, dropdowns, tabs. Each with its full set of states: hover, active, error and disabled. Structured enough to enforce consistency, flexible enough for edge cases.

L3PatternsStatus indicators, form flows, filter panels and data views. Reusable answers to problems that kept recurring.

L4DocumentationWritten for designers, engineers, QA and product managers. If it did not serve all four, it did not serve its purpose.

Work got faster because nobody had to guess

One click per screenshot, per alias, per search

For every subject, an investigator searches public records under each name variation, or alias, the person has used. Every result is screenshotted, uploaded to the portal and filed under the alias it belongs to, so QC reviewers can filter it later.

Filing is manual: one dropdown, one click per screenshot, per alias, per search. A subject with 10 to 20 name variations repeats that cycle hundreds of times on a single case. Everyone we spoke to called the work mechanical.

What the research told us

A survey of 53 investigators, shadowing on the evidence page, and six depth interviews with investigators, QC and training leads. Every finding pointed back to the same step: tagging evidence to the right alias.

Fix the filing

Research named the filing step, so the first design automated it. Investigators keep taking screenshots, but drop them in bulk; the portal reads the URL out of each image, matches it to a search and an alias, and asks for confirmation only where it is unsure.

It worked. It also left the investigator doing the most repetitive part of the job: taking the screenshots.

The fastest way to tag evidence is to never take it by hand.

The idea came out of a detour. We were deep in the bulk-upload flow, in a design review, when the conversation wandered past the filing problem to the screenshot itself. Lupi argues that discovery depends as much on questioning the brief as on answering it. Bulk upload answered the brief: make filing faster. The detour questioned it, and the answer stopped being a better upload modal.

Capture the search, not the screenshot

The Evidence Capture plugin docks beside any source site and mirrors the portal’s search checklist. The investigator still runs every search themselves; the plugin watches, captures each step, files it, and moves them to the next alias.

Automation covers the routine. The exceptions still need a path.

Investigations rarely follow the happy path. For each case where the plugin alone would fall short, I designed a way through that keeps the investigator in control without bringing back the clicking.

01 · Manual capture Capture what the
plugin wouldn’t

WhenAn extra screenshot is needed, like a case detail or a modal.

DecisionOne click or ⌥⇧E captures the tab and suggests the alias.

02 · Bulk upload A fallback for sites
the plugin can’t see

WhenEvidence comes from outside the browser or a blocked site.

DecisionDrop every file at once; the portal reads URL and alias.

03 · Low-confidence matches The system suggests,
the investigator confirms

WhenA file shows a partial name, or no URL at all.

DecisionExact matches apply, fuzzy are suggested, rest by hand.

04 · Reassign Fix a wrong match
in one move

WhenA manual capture was filed under the wrong alias.

DecisionDrag the evidence onto the right alias to reassign it.

One file for every team, from first flow to final edge case

I delivered the work as a Source of Truth file in Figma: high-fidelity user flows paired with the technical documentation behind every screen, so engineering, product and QA worked from the same reference.

High-fidelity flowsDocs beside every screenOne reference for every team