Personal project

Autoguard Pro — Autobody damage estimator

A design-led prototype that guides users through photo capture, damage classification, and a clear, composable estimate model.

Product flow

Scroll or use the controls to move through the core screens of the estimation journey.

Autoguard Pro vehicle identification screen — Vehicle identification keeps the estimate grounded in the right make, model, and body context before damage capture begins.

Autoguard Pro damage details screen — Damage details turns loose observations into standardized inputs that are easier to reason about and estimate.

Autoguard Pro pinpoint damage screen — Pinpoint damage isolates the affected zone so the system can reason more precisely about severity and repair scope.

Autoguard Pro nearby services screen — Nearby services makes the prototype feel operational by handing off the estimate into practical next-step options.

Autoguard Pro estimation summary screen — Estimation summary consolidates the captured data into a calm review step rather than a noisy wall of detail.

Screen 1 of 5

Overview

Problem

Consumers and small repair shops need a fast, reliable way to document vehicle damage and produce an initial repair estimate. Existing tools either ask for too much domain knowledge or produce noisy results because the capture experience is poor.

Approach

I designed a small, composable design system ("The Precision Concierge") that favors editorial scale, deliberate asymmetry, and tonal layering over heavy borders. The prototype focuses on 1) guiding a user to take a usable photo, 2) surfacing damage types clearly, and 3) composing an estimate from discrete damage items.

Implementation

Built as a front-end prototype using Tailwind, the work is split across modular pages: vehicle identification, damage detail capture, pinpoint damage, nearby service discovery, and an estimation summary. Components emphasize background tone for separation, large tap targets for stressed users, and a visual-scanning overlay to improve photo framing.

Outcome

The prototype produced a clear pattern for guided capture that reduced ambiguous photos in informal testing. It also proved a component approach that can be wired to an ML backend or a rules-based estimator without changing the user flow.

Learnings

High-contrast, editorial headings help orient stressed users.
Photo framing guidance materially improves downstream model accuracy.
Design systems that use tonal separation scale better than rigid borders in this domain.