A redesign of an acoustic inspection system in two parts: a big-screen app that shows clients live OK/NG results, and a web workspace where engineers review, filter and label thousands of parts.
I joined as the sole product designer, working directly with engineering and a non-technical manager. The system was already in production with clients, the timeline was a hard two months, and the big-screen app, the web dashboard and a companion mobile view all had to be designed at once.
Before redesigning anything, I labeled 500 audio clips as OK or NG across four stages myself. That surfaced the real gaps: labeling logic that differed between people, unclear status indicators, and a UI that made it hard to tell what mattered at a glance.
I made the case that the brand and UI system had to come before any screens, not after. It covers a dark palette for the big screen and marketing, a light palette for the web workspace, one type system, and a separate set of status colors.
OK and NG are functional colors, reserved for detection results, device status and quality analysis. They are never used as brand colors, so a status is never mistaken for decoration.
The original interface had everything technicians needed: barcode entry, station selection, a live spectrogram with OK/NG tags, and a running results log.
But pass/fail counts, timestamps and raw frequency data all had the same visual weight. Nothing guided the eye to what mattered in the moment.
Product ID, score and pass/fail sit in one high-contrast banner at the top instead of competing with the rest of the page.
The spectrogram is split into labeled stages 1–4 with clear boundaries, so a technician sees which phase a defect happened in instead of scanning one long waveform.
Per-point OK/NG results sit directly above their stage, color-coded and aligned to the timeline rather than floating apart from the data.
Frequency and amplitude graphs used to take half the screen. They now sit minimized in a row below, so clients see the audio graph at full size.
Clients and engineers needed more than the live view: go back through recordings, compare stages, and record why a part failed.
The web workspace adds labeling, sorting, filtering and in-depth results on top of the same inspection data and the same visual language as the app.
Two colors carry the whole verdict. The overall score sits top-right; each test point and stage gets its own pill so an engineer sees where a part failed before opening the graph.
An early version put the mark list in a separate rail and pop-out panel, which took space from the graph. Moving it into a third sidebar tab keeps the spectrogram at full width and gives browsing, labeling and view settings one predictable place.
Browse, sort and filter parts. Each card shows its verdict so the next NG is easy to find.
Coarse marks (粗标) label a whole point or stage; fine marks (细标) label a time–frequency region on the graph.
Chart type, render mode, colormap and axis ranges, applied live to the graph.
The app's stage-aligned results carry over: each OK/NG label sits directly above its region of the spectrogram, grouped under colored stage bars. Hovering a region lifts its label and outlines the area. An earlier connector line cut through the labels, so I removed it.
Engineers compare many parts in a row. View settings (chart type, metric, colormap) update live and stay the same when switching point, stage or part, so side-by-side comparison stays fair.
On mobile the list becomes full-width cards and the detail view stacks: verdict, part info, result pills, then the spectrogram. Prev/next buttons at the bottom are easy to reach with a thumb.
The app and web workspace are used to show HP, Geely, Brose, NSK and BOS their own product sound recordings and results, live on the big screen and in depth on the web.
