Machine Experience
The Challenge
Overhaul the UI and UX of a filling machine that is controlled by an operator via a screen on the machine.
The Context
This filling machine deposits liquid into devices located in trays that are placed by the operator, thousands of trays are filled everyday throughout the US. The machine has a camera that helps locate the correct devices' filling point, the user tells the machine how many devices there are per tray vertically and horizontally, and the machine calculates the distance between them, the user also helps by moving the needle to the correct filling position. The interface is on the machine and it's approximately the size of a 10" tablet on landscape mode.
This interface was designed by engineers to go through the loading, dispensing, and cleaning processes with as much information and customization as possible, leading to overwhelmed users, who believe they have to adjust most of the variables on the screen to successfully complete the operation they're working on, when that actually isn't the case. The UI/UX was made from an engineer's point of view rather than a daily operator. It also leads the user to skip at lot of steps in the wizard because they don't contain the information or commands the operator is looking for.
I had access to the customer service team and their resources, which proved to be very useful because they talk to operators every day and know exactly which issues arrive in each part of the operation. I became best friends with the customer service lead and we talked about operations and UI improvements every week.
The Solution
I wanted to remove all non-essential commands and only have present the actions that pertain to that particular operation step, with a possibility to access the rest through Advanced Settings if needed.
The first thing I did was make screen decompositions of current screens to identify which features should be at each operation point and what to make less accessible and why, I like having a reason behind every change. I went through the operation flow and its edge cases many times as well as with the customer service team and divided features into essential and not essential.
Daily Operations Focus
I decided to focus on operations in terms of daily vs monthly operations. The previous design had all operations available at once and there was no real guidance on what to do first and what to do next. There was also no hierarchy or differentiation between tasks performed everyday, multiple times a day, like loading and dispensing, and tasks that are only performed every couple months, so I divided up the tasks and gave more prominence to the tasks that have to be completed more often.
The three tiles at the top are operations that are completed daily, the three tiles at the bottom are categories that encompass tasks that are either advanced settings, optional features or periodic tasks like deep cleaning.
The daily operations are as follows:
1. The operator is loading and dispensing.
2. The operator is already loaded and it's only dispensing.
3. The operator is running the daily cleaning.
Design Annotations
I like to annotate my designs when presenting them so PMs, developers and business leaders know what's behind each element and why.
Structured Workflow
Once the operator chooses a task, they are taken through a series of steps, in order, that results in a calibrated and correct filling. Operators are not allowed to execute operations out of order, for that will lead to errors when dispensing, defective devices, and can even lead to machine damage.
Users see a small preview in the progress bar at the top, because we want them to know what to expect and not go through the process blindly, but we do not give them access to features that can halt the procedure or produce an incorrect result. From research we know, that sometimes an operator can simply start playing with variables out of boredom leading to errors and a customer service calls, my job was to design an interface that would greatly decrease customer service call volume.
Purposeful Color Usage
Current steps are white and completed states are green. There are preferred fluids and devices that a company uses the most, so I organized these fluid and hardware profiles by usage rather than alphabetically, and added the ability to favorite profiles which stay pinned at the top of the list, so they can more easily access their most used profiles.
Automation
Some tasks are simple software and hardware-wise, so I asked if we could do it automatically if it's something the machine can execute at that step of the process on its own. If there are things I can send to the backend instead of having the user work on it, I will ask and try to give the task to the system when possible.
UX Copy
I reformatted operation instructions with the help of customer service, because they were long-winded and sometimes too technical. There would be an entire page with 10 bullet points describing what the operator has to do when a video or gif, can explain it in a shorted period of time. I asked the customer service team to record certain instructions I believed would be best represented with a visual and severly cut down the copy on both the manuals and interface operation experience.
Preventing Errors
The only commands displayed on the page are the ones that have to be calibrated or executed at that moment, previously, many commands not related to the current operation step were displayed and not only was that unnecessary, it created confusion and increased errors because operators thought they had to manipulate those variables at that moment, producing operation errors and customer service inquiries about whether they should adjust those or not. In the example above, since the only thing the user has to do is 'Turn Syringe Bypass' on, that is the only available command on that screen.
Troubleshooting
Help documents were a website linked to the interface via a QR code, even though we kept more complex troubleshooting off the interface, we decided to add some help information in the same way we added commands, by having the related content on that step rather than a general help section where users would have to spend more time looking for a solution to their specific error. The interface has both required tasks and optional ones.
Progress Indicators
For the dispensing operation, I decided to keep two visuals that already did a great job at representing productivity and success, the camera view going from device to device while dispensing, and a graph visualizing tray filling progress. I added quantitative information as well and fluid + hardware details for users to remember what they are working with since sometimes they can forget because they are operating on auto pilot and switch fluids or trays without updating their corresponding profiles.