Passport Food Safety Solutions’ BoviBrom Convoy Elite Application System™ is an automated, closed-loop system used in post-harvest processing plants for applying an antimicrobial to red meat proteins to reduce the levels of harmful food-borne pathogens. The system is comprised of a feeder system, a pumping and blending system, a solution tank, and a PLC that are all monitored and/or controlled via a touchscreen interface.
I was tasked with creating a production version of the touchscreen interface controlling the system that is user friendly and would allow operators to easily understand system status. The client provided images for me to work from of the engineering screens that they were using as proof of concept and as the method of controlling the feasibility build.
Discovery Step 1 – I started this project with multiple phone conferences over the course of a couple of weeks with the lead project engineer. The engineer walked me through every single user interface element in the entire system: what the setting did, what physical parts it controlled, and what associated status was needed to understand the working condition of that sub-system. From those conversations, I was able to get a detailed understanding of how the system worked and what items were necessary to control it.
Discovery Step 2 – After getting a grasp on the system operation, I next needed to understand how customers were going to be using it. I travelled to the site of the feasibility build install and was able to see the system running first hand. The client was providing a demo to a group of potential customers, and I was able to observe their interactions with the current system and listen to the questions they were asking. I stayed after the customer demo and worked 1:1 with the lead engineer to discuss additional advanced details and recent design changes around the product including system redundancies, user access levels, and alerts.
Design Step 1 – Returning from the visit and summarizing the design changes and customer insights I had gained, I grouped all of the system settings and status readings into three categories:
After dividing up the categories, I started to map out the system flow into interface components based on how quickly users needed access (and what permission were required to access them). For example, I devised a run page that was always one-click away from anywhere in the system via a home button, an overlay pattern that would allow operators to see something quickly and then get back to where they were before (such as viewing alerts), and settings pages that were available through the menu.
Design Step 2 – After I had sketched out the interface patterns and general flow on the system, I put together an interactive prototype using Axure that allowed users to walk through the screen flow and also view simulated state changes in the system. For example, if a user switched the operating mode of the system, the runtime page would reflect that mode’s interface.
Design Step 3 – The system design had a lot of potential alerts, so I provided the client with a spreadsheet documenting the conditions when each alert is triggered, what level the alert is at, how the system responds to the alert, and what the on-screen text should say when the alert is active.
The timeline for this project was lightning speed. After the client approved the prototype, I worked with a visual designer who created the final on-brand look and feel (shown below). I helped coordinate iterative design asset deliveries so the client’s display development team could keep moving with creating the production interface. I also made sure each state of the display settings was accounted for in the visual design.
The product launched in early 2017 and the client said “we have the best application interface out there. Our customers are super happy with it.”
Passport Food Safety Solutions
For more information about Passport Food Safety Solutions, visit http://www.passportfoodsafety.com/default
February 1, 2017
The Sandbox Agency
Jonna Buse, Katie Renshaw
