AC.
06 / BEAGL · DESIGN CONSULTANT · 2024–2026

I stopped making mockups and started shipping the front end.

On a three-person AI freight team, the shortest path from design intent to working product was for me to build the interface myself.

Role
Design Consultant
Scope
Product design → front end
Timeline
Three months
Focus
AI · Systems · Code
Read the case ↓
The Beagl RFP workspace showing lanes, shipments, estimated spend, equipment mix and network coverage
BEAGLThe freight RFP workspaceOne RFP opened up — lanes, annual spend, equipment mix, top opportunities and network coverage in a single view.

01 — THE SETUP

A new domain, a team of three, and no room or time for a ceremonial handoff.

Beagl helps freight brokers handle shipper RFPs with AI. I had previously redesigned the brand and marketing site, then returned for a three-month product engagement.

Freight was new to me, so the founders taught me the industry. In return, I showed them where advanced functionality had buried basic usability. Most of the features already existed; my job was to rework the experience and adjust the flow and behavior where it made sense.

Domain
learning→Product
structure→Design +
front-end code→Shared
system
RFP management: the original RFP list beside the rebuilt table with status, lane counts and searchRFP detail: the original run-history page beside the rebuilt detail view with spend, bids, files and timelineLane lookup: the original search results table beside the rebuilt lane profile with rate trend and seasonalityCarrier management: the original carrier list beside the rebuilt CRM with shipments, spend and fleet size
01 / 04
BEFORE / AFTERFour core workflows, redesigned with an updated nav architectureThe screens I inherited beside what shipped. A lot of emphasis on surfacing useful data to brokers without making them dig for it.

02 — THE CHALLENGE

The design file as the source of truth was making the round trip too long.

We started with Figma and MCP — a first for me and for the head of engineering. We quickly realized that once code changed, the round trip became unreliable and the mockups fell behind.

Instead, I experimented with designing right on top of the product: layouts, components, motion, and interactions built with Claude. The engineer connected backend and data and merged it into production, also with AI.

IN THE PRODUCTDesigning on top of the running productLayout, components and interaction built in the branch, running against real data.

03 — WHAT I DID

Speed meant mess and inconsistency — until I built the system and guardrails.

  1. Built the interface right in the repo.Designed and implemented layouts, reusable components, motion, and interactions in the dev environment.
  2. Reduced visual drift.At one point the product had accumulated roughly 32 colors and four dropdown patterns. I consolidated the palette to eight working colors and merged duplicate behavior.
  3. Made the component library live.Built an interactive reference from the real product components, so the examples stayed connected to the same code the team shipped.
  4. Added instructions for the AI collaborator.Started a Design.md with principles, priorities, and the questions Claude should ask before producing more interface. That let the team keep going without me.

04 — THE RESULT

No victory-lap metric. Just a working product and a much tighter system that scales.

This is a process case, not a conversion story. What shipped was front-end code, a consolidated visual language, and a workflow and framework the team could keep using.

THE WORKFLOWDesigning interactions where they happenDescribing a component change in plain language with the running product beside it.

Overall we were very impressed with your ability to understand our business and design an interface that improved our customers’ workflow and experience with the product. We were also very thankful for the design elements you left behind that help us continue to build and use the same design for new modules.

Eric W. · CEO, Beagl

05 — LOOKING BACK

The tool changed.
My job and the result did not.

Working in code made some decisions faster but also some mistakes more immediate.
The approach, its benefits and its drawbacks were valuable lessons for this shift in paradigm.