This is an approximation* of one of BlackBox Factories' SMT Line Machines. It assembles tiny components that go in your phone, earphones & laptops.
*Actual machine undisclosed owing to NDAs.
02
The context
It had 16 doors - 4 on each side. If any of the doors are open, the machine considers that an error & gets paused automatically.
03
Errors weren't the problem, finding them was
Without any feedback or dashboard, the machine operators had to check every door. This resulted in:
Increased machine downtime
Decreased production rate
Increased company expense
04
Our playground
The blank top right corner of their iPad dashboard on was what we had to communicate the status of the doors.
05
Our goals
Indicate open/close position of all 16 doors.
Indicate precise position of open doors for error resolution.
Indicate support pathway in case open/close detection is faulty.
06
User flow
Here's how we did it in 07 iterations
01
We tried unfolding the machine
Thumbnail was too small
Machine operators found it difficult to corelate the 2D representation to the 3D machine
02
We tried talking in the same language as engineers - isometry
Thumbnail was still too small
The labels were not effective at distinguishing between the front and rear at a glance
03
We took what worked & added some more
Thumbnail size was good
Human figure clarified the front vs the rear of the machine
Showing two sides at a time made it confusing to know which side was which - was “right” the right of the machine or the right of the person, since they were both opposing each other
04
Ortho for the win
Showing one side at a time helped clarify which was the right & left side of the machine
It was hard to tell if there was an error or not especially if the side in view did not have an error
05
Louder, bigger, bolder
Large orange warning made it easy to spot on the crowded dashboard when there was an error
The darker background improved visibility
06
Factoring edge cases
What if all the machine doors are closed but it still shows an error? The problem - a faulty proximity sensor, now resolved
07
Last minute graphic changes & developer handoff
We created a working prototype of the flow in Figma (with good Figma hygiene) for communicating it to the engineers.
We then segregated each individual element from the screen into SVGs for importing into HELIO's HMI Development Software.
& voila!
Try it yourself!
Can you close all the doors?
Can you close all the doors?
Click on the orange exclamation mark (!) for the current view to simulate closing the machine doors in the real world.
