Selfishprimate

"Good design, when it's done well, becomes invisible. It's only when it's done poorly that we notice it." — Jared Spool

Overview

I was tasked with resolving UX issues in a tablet-based vehicle inspection web application used by car inspectors. The goal involved identifying pain points and streamlining the inspection workflow to enhance efficiency and user satisfaction.

Objectives

• Identify and resolve usability issues
• Streamline the inspection process for efficiency
• Create user-friendly interface meeting inspector needs

Research

To understand the pain points and usability issues, I began by meeting with the vehicle inspectors. I listened to their pain points and gathered their ideas for improvement.

Research methodology included direct inspector interviews, observational studies, competitive analysis, and gathering feedback on previous experiences with similar applications.

Key Research Findings

1. Search functionality gap: Inspectors struggled locating checkpoints; solution implemented global search feature from main menu

2. Small interactive areas: Clicking car diagram elements (tires, mirrors, headlights) proved difficult; response included enlarged areas and text links with springboard design testing

3. Accessibility issues: Frequently-used options lacked prominence; integrated quick-access feature for common options

4. Information architecture problems: Unnecessary options cluttered interface while required options were missing; revised architecture to remove rarely-used items and add necessary ones

5. Photo capture inefficiency: Taking photos of undamaged parts wasted time; system updated to prompt photos only for damaged areas

6. Technical performance: Native photo component operated slowly; technical team streamlined capture process by eliminating unnecessary screens

7. Unit confusion: "Inch" measurements confused inspectors; changed to "cm" for familiarity

8. Option discovery: Non-alphabetical listing hindered quick access; alphabetized all options

Ideation and Prototyping

I created mid-fidelity prototypes based on research, tested with inspectors iteratively, and refined designs through feedback cycles.

Challenges

Two major obstacles emerged: developing genuine understanding of inspector workflows through extended observation and interaction, and managing the legacy codebase (no reusable components, disorganized design files, absence of design tokens).

Design Approach

Used Continuous Discovery methodology, focusing on minimal viable elements delivered in shippable increments (checkpoint updates, UI refinements, feature additions) to gather early feedback.

Native Radio Buttons

Enhanced usability and performance with Material Design radio buttons, mitigating fat finger interaction issues.

Native Checkboxes

Streamlined interactions with Material Design checkboxes while minimizing fat finger errors.

Dropdown Menus

Enabled color specification through dropdown interfaces for efficient data entry in limited screen space.

Color Selection

Added checkbox feature allowing inspectors to indicate two-color vehicles with corresponding dropdown menus for accurate representation. Combined color labels with color boxes to support inspectors with color blindness or visual impairments.

Accordion Organization

Grouped options under relevant accordion menus reducing cognitive load for locating car parts.

Global Search

Enabled effortless vehicle part location throughout the application regardless of current location.

Selective Photo Capture

Implemented photo documentation exclusively for vehicle parts requiring photographic evidence, saving significant time.

Impact

The updates aimed to improve usability, functionality, and efficiency using native design components (checkboxes, radio buttons, inputs). Results achieved approximately 5-10 minute savings per inspection:

• 40% reduction in average inspection time
• 60% decrease in data entry errors
• Significantly improved inspector satisfaction