BuiltKojo Technologies2025

Cutting hours of manual entry out of construction quoting

Vendors were hand-keying hundreds of line items on quotes worth millions. I led the workflow redesign from onboarding through document scanning to review.

My role: Workflow design lead — current-state analysis, journey mapping, interaction design, usability testing
Focus: Product design, Analysis, User testing, UI/UX
Outcome: 701 unique users and 459 PDFs scanned in release week

Kojo's redesigned bid portal shown on desktop and mobile over a photograph of a glass high-rise under construction

Background

Kojo is a construction materials inventory management platform. I led the workflow design for vendors responding to requests for quotes from their customers, spanning onboarding, document processing, and review. The goal was to help vendors process quotes faster so they get paid sooner.

The problem

A vendor not yet integrated with Kojo had to trade emails with customer success and manually enter every quote line item into the bid portal. Line items run into the hundreds. The quotes themselves run from hundreds of thousands to millions of dollars — so a tedious step sat directly in front of the most consequential transaction these businesses make.

Evaluating the current state

There were existing wireframes plus what was already in production. I tested both internally with team members and watched Fullstory recordings to find where users actually stalled, then turned that into flow diagrams of the current state. Starting from recorded behavior rather than the wireframes meant the redesign responded to real friction instead of assumed friction.

Existing bid portal showing a vertical sequence of steps for uploading a quote PDF, reviewing requested items, and submitting the total quote, all stacked on a single page — The production experience: every stage stacked on one page.

Existing manual entry screen with a dense table of requested line items, each row requiring unit price, tax, and lead time to be typed in — This is the table vendors were filling in by hand, hundreds of rows at a time, on quotes worth up to millions.

Flow diagram of the current state showing parallel paths for PDF actions, table actions, and yields actions, with decision points between them — Diagramming the current state from Fullstory recordings rather than from the spec, so the map reflected what vendors actually did.

Persona sheet for Mike Thompson, an inside sales representative at a supplier in Los Angeles, listing his jobs to be done, goals and motivations, challenges and pain points, and user roles and permissions

Customer journey map

I built the journey map with input from my product manager, integrations specialist, and customer success, and used it to identify the opportunity areas worth designing into.

Wide current-state journey map made of sticky notes in horizontal lanes, tracking the vendor's steps from receiving an RFQ email through submitting a completed quote

Design iterations

Three iterations. I started with a full-page layout, then broke the stages of uploading, scanning, and reviewing into a stepper with a dedicated page per step so vendors could concentrate on one task at a time. Capturing user logins meant adding an authentication step to the scope.

First iteration: a single page containing upload quote, review requested items, and submit total quote as three sequential sections — Iteration 1 — everything on one page.

The one-page version tested worse for a specific reason: on a quote with 300 line items, showing every stage at once meant the vendor never knew whether they were done. Splitting it gave the work a visible end.

Second iteration: a dedicated upload page with a four-step progress stepper across the top and a large drag-and-drop zone below — Iteration 2 — one task per page, with a stepper carrying the sense of progress.

Scan review screen with the original quote PDF displayed on the left and the extracted line items in an editable table on the right, with a confirmation banner above — Keeping the source PDF beside the extracted table lets vendors verify a scan without switching context — the step that decides whether they trust it.

Account registration screen for the Kojo bid portal, alongside a welcome panel explaining how to submit a quote — Iteration 3 — authentication entered scope once we needed to capture who was submitting.

Mapping screen pairing scanned quote line items on the left with the customer's requested RFQ items on the right, with dropdown controls to match them — Mapping scanned items to requested items is where automation and judgment meet. The vendor confirms; the system suggests.

Final entry screen offering two paths, upload quote PDF or manual entry, presented as two equally weighted cards — Manual entry stays a first-class option. A third of vendors still chose it in release week.

Usability testing

Four sessions — two internal team participants, two external vendor users.

What worked

The “Upload Quote PDF” call to action was clearly understood
Dedicated pages per step
Judged a real improvement over the current bid portal, with vendors specifically glad to spend less time on manual entry

What needed work

Limit uploads to one file at a time
The “next” button labels were confusing
Bulk editing may need to be in scope
Scrollability was not obvious

Outcomes

In release week:

701 unique users on the new bid portal
459 PDFs scanned in
333 quotes still manually entered

“You just saved me half the time it takes to enter a quote” — Tom, Commercial Pipe & Supply

The 333 manual entries are the honest number in that set: a third of vendors still bypassed scanning. That gap was the next thing I would have designed into.