Repair Order Estimate Redesign

At Tekmetric, the main goal is to service auto shops with the best experience to create repair orders, manage employees, and increase sales. This project focused on redesigning the most used area of the app – Repair order estimate page. The outcome of this project resulted in implementing a new design system and plans for implementation.

RESPONSIBILITIES

Information hierarchy, visual design, stakeholder presentations, cross functional collaboration, user research

ROLE

Lead Product Designer

DURATION

2024 - 2025, 2 months

TEAM

1 director of design, 1 engineering lead

Problems we’re solving

HIERARCHY AND LAYOUT

  • Lack of clear hierarchy makes it unclear what needs attention first.

  • Gray-on-gray titles and elements create a sense of weightlessness, making it harder to distinguish elements on the page.

  • Excessive space between elements creates a feeling of disconnection, rather than cohesion within the RO.

  • "JOB TOTAL" is the only capitalized item in tables, contributing to hierarchy inconsistency.

  • The page has limited vertical space due to fixed content, making it hard to scan.

  • Long ROs (5+ jobs) require excessive scrolling, complicating navigation and locating items.

VISUAL CONSISTENCY AND COHESION

  • Inconsistent button styles: black buttons with icons and text vs. gray icon-only buttons.

  • Inconsistent language (e.g., "Labor Guide" vs. "Add Part" starts with a verb).

  • Package pricing icon (blue lock) and maintenance schedule icon (purple) lack color cohesion.

  • Visual elements, including mixed typography, shadow inconsistencies, and button alignment issues, detract from cohesion.

  • Different colors are used inconsistently for status indicators and actions (e.g., blue notification bar with red disable button).

  • Blue-on-blue tabs make inactive tabs look disabled, adding to visual confusion.

PREVIOUS DESIGN

Before diving into designs, I used data to highlight areas that are BLUE - primary information, GREEN - secondary, and PURPLE - tertiary information. 

ORGANIZING SECTIONS BY INFORMATION HIERARCHY

I focused on designing two states of the RO estimate page. The view and edit states.

Pinpointed key problem areas

Because this is a highly trafficked area, it was important to map the problems to specific areas in the user interface.

Final Designs

This project went through 6 rounds of iterations. It involved feedback from stakeholders and creating new components for our design system. We also took this opportunity to redesign the navigation and side bar for increased usability.

Measuring Impact / Rollout

LOW IMPACT RELEASE

Small changes with minimal user disruption and low risk.

Examples:
• Minor UI updates (color tweaks, small icon changes).
• Bug fixes that don’t alter workflows.
• Performance optimizations that run in the background.
• Internal changes (code refactoring, logging improvements).

Indicators:
✅ No training or onboarding required.
✅ No impact on core workflows.
✅ No expected downtime or performance issues.
✅ Easily reversible if issues arise.

HIGH IMPACT RELEASE

Major changes that alter core functionality, require user adaptation, and carry higher risk.

Examples:
• Complete UI/UX redesign that changes navigation or workflows.
• A new pricing model or change in payment processing.
• Major backend infrastructure changes that could affect system stability.
• Deprecation or removal of a heavily used feature.

Indicators:
❗ Requires extensive user training, onboarding, or documentation.
❗ Could lead to downtime, performance issues, or major support requests.
❗ High likelihood of user resistance or confusion.
❗ Rollback would be complex and time-consuming.

Next

Counter Sales