04 · Design · The same station screen
In the office the hierarchy was clear. Under the shop lights only the title remained
The UI designer sets type size and hierarchy from site light, distance, and device. What goes to frontend is components and states, not a long picture that cannot be sliced. A new component that can be reused enters the design system. A third red is not opened in private.
First version: Hairlines, grey helper numbers, scrap reason as a dropdown. Looked good on a monitor. Workers who could not walk close could not finish reading. Gloves could not open the dropdown.
Once it reached the shop: Scrap qty in the largest type on a dark ground. Reasons became large color blocks. First screen keeps only completed and scrap. Three stations share this component set.
The UI designer turns a walked path into a screen that can be read on site
Interaction sets state and feedback. The UI designer decides whether that feedback holds under a given light, distance, and device. The job is not merely a unified style. It is sensitivity to the place of use. An office monitor, a shop station screen, a handheld, a phone in a cab — density cannot be the same. Put a back-office hairline table on a shop screen three meters away and the title survives while the numbers vanish. Workers go back to paper job tickets. The system becomes after-the-fact entry.
What he hands frontend is components, type size, spacing, state color, and what must not be done — not a long picture. A long picture cannot map to loading, no privilege, and a number that is zero. If implementation and the spec disagree, the UI designer calls it unfinished. He does not accept a "close enough" walkthrough. Close enough on the shop floor means reading the scrap qty wrong.
Components have to reuse on the next station, not be invented per document
DaXi Technology screens eventually enter the Design-system designer. If the UI designer makes a third red or a second table row height for a new document, later frontend forks. His work includes constraining himself: use an existing component when it works; a new component must name the difference as an environment need, not a taste. Shop-screen number components and back-office number components may differ because viewing distance differs. On the same kind of screen, completed and scrap must use the same component, or three stations will have three ways to read.
He also joins the site walkthrough, not only a comparison on his own monitor. The record writes measured facts: can the first screen be read from the station's normal stance, do color blocks still separate under overhead lights, does the miss-tap area cover the neighbouring button. If it cannot be read, change hierarchy. Do not ask the worker to step closer.
Three station screens, from decoration to one set
On a machining project, version one was praised in the meeting room for clear hierarchy. On the shop floor, aluminum chips and overhead lights ate the grey helpers. The scrap-reason dropdown needed a precise tap. Workers would rather shout for QC to write on paper. The UI designer stood two stations' distance away and cut the first screen to two numbers: completed, scrap. Scrap uses dark ground and white type. Reasons become at most six large color blocks. The rest go into "other" with a required remark. Three stations use one component. Themes by shift-lead taste are forbidden.
After frontend built it, he stood at the same place again. One station had put scrap qty back in grey, because development reused the back-office stats style. That was returned. Visual preference yields to being readable. If the brand color has too little contrast in this place, it stays on the splash and off the key numbers.
The walkthrough record keeps the stance. The UI designer writes how far he stood from the screen, whether the overhead lights were on, and whether brightness was what workers use. "Contrast passed" with no stance only holds in the design tool. If the next shift hangs the screen twenty centimeters higher, the type-size conclusion has to be remeasured. Meeting-room screenshots cannot be reused. He treats remeasure as part of delivery, not a post-go-live polish loop.
The same component may be dense in the back office and must be sparse on the shop floor. Sparse is not the back-office page enlarged. It is helper information cut. What is cut is decided by the action this screen must finish. If the actions exceed two, he splits screens. He does not put navigation on a station screen. Workers will not hunt a menu in the middle of shop-floor reporting.