A web-based replacement for a legacy Windows application used to submit electronic bids to state transportation agencies — redesigned around authorization clarity, real-time compliance tracking, and a validation-gated submission path.
Submitting a bid to a state transportation agency is a high-stakes, time-sensitive action. Bids have hard deadlines, legal obligations, and compliance requirements — including federally mandated participation goals for Disadvantaged Business Enterprise (DBE) and Small Business Enterprise (SBE) subcontractors. A missed requirement or incomplete submission can disqualify a bid entirely.
User personas range from experienced estimators at large general contractors to office managers at small firms submitting bids infrequently. For the latter especially, the process could be opaque, error-prone, and anxiety-inducing.
The legacy system was installed Windows software — static layouts, no progressive disclosure, limited affordances, and significant accessibility gaps. Users frequently weren't sure if their vendor goals were on track, their form really had errors that applied to them, or if they had the proper authorization to submit until they tried to submit. The answer was usually a call to support.
A verified signatory ID is required to submit a bid. Rather than waiting until submission to check for it, the form checks up front, which also encrypts the form for that user. Authorization status is visible and persistent. Users know if they are allowed to submit before they fill in a single field.
The legacy system's static layout had no mechanism for showing or hiding fields based on user choices. This created a specific problem: a form section might require a choice between options A or B or C, each with its own subform and instructions. If subforms are all required, there will be false errors. The redesign uses progressive disclosure to make conditionality visible. Everything you need. Nothing you don't.
Participation goals for certified vendors (DBE, SBE, etc) are calculated in real time against the current item total. As vendors are added and line items are assigned, progress bars update immediately — showing dollar amounts, percentages, and whether each goal is on track. There's no math to do manually and no ambiguity about whether compliance is met.
When a user wants to look for any errors (or automatically when a submit action takes place), a validation pass runs across the entire form. Errors are organized into a dismissible drawer for visibility, and also tallied in a persistent block with navigation that jumps directly to each problem.
Each agency's existing form configuration — federal forms, bond goals, vendor goal percentages, item assignment rules, legal language — were migrated and redesigned to take full advantage of the new system while maintaining exact legal parity with the legacy forms. The template architecture allows per-agency configuration without forking the codebase, and the redesign process treated each agency's requirements as an opportunity to reconsider how and when they were presented.
The prototype covers the full bid form experience — authorization status, progressive disclosure of conditional sections, live vendor goal tracking with real-time progress bars, and the Run Check validation flow with a slideout error panel. Built with Vue 3, the Causeway component library, and Tailwind CSS.
Explore the authorization identity bar, add vendors to see goal tracking update in real time, and use Run Check to surface validation errors before the submit path opens.
Two FigJam diagrams document the full submission flow and the vendor goal attribution logic — including how the system resolves vendors with multiple certification types against per-proposal goal configurations.
Users now have continuous feedback on their authorization status, real-time visibility into compliance goals, and a validation-gated submission path that surfaces problems before they become rejections. The three most common support drivers were each directly addressed by the new UX.
The agency template system also reduced the overhead of migrating agencies, turning what had previously been a custom development effort into a configuration and content exercise.
