PariPassu: Rastreador and CliCQ

Scope: Senior designer (sole product designer) in a 50-person foodtech. Responsible for end-to-end design of two complementary products (Tracer web + CliCQ mobile), both serving enterprise clients like Coca-Cola LatAm.

Decision authority: Proposed and led the construction of a 110+ component design system to reduce fragmentation. For critical decisions (manual vs. automatic column mapping, visual Canvas for workflow builder), I discussed with the engineering lead and CPO, presenting technical and UX evidence before implementation.

Timeline: 8 months (Jan 2025 - present). Design system built in 4 months; organic adoption took another 4 months.

Impact outcome: Reduced sprint time spent on visual specs from 40% to ~15%. Component reuse jumped from 45% to 82%. Standardized handoff reduced implementation time from ~4h to ~2.5h per screen.

PariPassu sits at the intersection of ag-tech and food-tech: traceability and food quality from farm to retail. Customers include Coca-Cola LatAm, supermarket chains, and national distributors.

Two products:

Tracer: Web traceability platform. Tracks purchases and sales. Integrates with ERPs (TOTVS, Sankhya) for two-way sync.

CliCQ: Quality inspection platform. Visual workflow builder, customizable forms, mobile app for field inspections, automated reports.

When I arrived, every screen was designed from scratch. I interviewed the 3 front-end devs: ~40% of sprint time went to visual specs (colors, spacing, states) that should have been standardized.

110+ components taken to full maturity and adoption in 4 months. The design system existed in early form: my job was to formalize it, scale it, and drive cross-team adoption across two products with different priorities.

Resistance: The CliCQ squad didn't want to pause features to migrate. I convinced the CPO with math: 3 sprints to migrate vs. ~2 days saved per sprint forever. Payback came in 8 sprints.

Adoption: Started with high-frequency components (inputs, buttons, tables) with usage docs and 'when NOT to use' guidance. Weekly pairing with each dev. By week 6, designers from the other squad were rejecting PRs that didn't use the system.

Measurement: Tracked reuse via Figma Analytics. Month 1: 45%. Month 4: 82%. Handoff time dropped from ~4h to ~2.5h per screen (Jira timestamps, 30 tickets).

Automation: Built a Figma -> Make -> MCP pipeline: when a component ships, specs auto-extract and Slack-notify devs with colors, sizes, variants, and direct link. ~15 components/week.

Import was the biggest friction point. Operators register hundreds of movements daily; manual entry was impossible. I interviewed 4 operators and found each had a different spreadsheet format.

Critical decision: Manual column mapping over auto-detect. The engineering lead wanted automation. I argued: mismatching a 'Batch' field can trigger a product recall. Accuracy beats speed when errors have regulatory consequences.

3-step flow: Upload → Column mapping (required fields marked) → Confirmation. Each step independently saveable.

The Purchases screen shows food-chain complexity. I defended: 'Sync pending' status with different colors per ERP (TOTVS vs. Sankhya). The PM wanted a generic 'Pending' tag.

Support logs: 3 of the top 5 tickets were 'my purchase didn't sync' with no context on which system failed. Visual tags let operators identify the failing system in 2 seconds.

The product mapping modal solves another pain: 'Banana nanica - 1Kg' in Tracer vs. numeric codes in the ERP. Visual mapping with dropdowns ensures correct sync.

The hardest challenge. Non-technical food-industry users needed to build conditional logic: 'If inspection score < 70%, alert manager AND trigger detailed inspection.'

First attempt (failed): Sequential form with text conditions. Tested with 3 quality managers; none completed a branching flow without help. Their mental model was visual, not textual.

Second attempt (succeeded): Canvas with 3 draggable block types connected by arrows. Benchmarked against eVisit and Zapier. Same 3 managers: all completed a branching flow in under 5 minutes, no help needed.

Form Block (blue): which form, owner, notification, deadline. Condition Block (red): score ranges, classifications, per-question rules. Result Block (green): approve, reject, or chain another form.

Form builder with 7 question types, each with 3 states. Customizable inspection reports: PDF layout, photo grouping, logo, email settings per recipient language.

Mobile inspection has two modules: - Product: QR scan → Form → Supplier → Confirm → Inspect - Process: Select Form → Select Evaluator → Inspect

Separating them came from field observation (I visited 2 distributors with inspectors). Product flow starts with physical scan. Process flow starts with person selection. Mixing caused errors.