Maintenance Rating Program (MRP)

End-to-end responsive app for field inspections at VDOT.

Field inspections Mobile-first Accessibility (WCAG) Figma

Project overview

The Maintenance Rating Program (MRP) is a mobile-first application designed for field inspectors at the Virginia Department of Transportation (VDOT) to log, track, and report maintenance operations efficiently. As the sole UI/UX designer, I created a responsive, accessible design system that supports fast data entry and clear reporting in challenging on-site conditions.

MRP app screens – login and requirements

From wireframe to framework

Purpose: translate raw structural ideas into a scalable design system supporting VDOT’s mobile inspection workflow.

Design framework in action

  • Used consistent layout patterns and component hierarchy.
  • Created a visual system with spacing, font, and color variables.
  • Defined interaction states (active, default, disabled).
  • Ensured WCAG-compliant contrast with browser-based testing.

Tools

  • Figma (wireframes → prototypes)
  • Browser contrast checker
  • Internal component library
Wireframes evolving to hi-fi mobile screens

Prototype showcase

Outcomes

  • Streamlined field reporting and improved usability through accessible UI patterns.