The client
Our client is a hardware & software vendor for metallurgical plants. Syncing and updating enterprise management software locally can be pretty tough and cumbersome, so the company opted to switch to the cloud.
The scope
The task was to design a prototype UI for one of the stages of cast iron production.
Unpacking the terms
Before launching the design process, first of all we build up expertise in the new subject domain through discussions with the client, learning the theory behind the processes and studying all shared materials. The topic is a challenging one, so it’s critical to pinpoint all the nuances and patterns in the way an operator is going to interact with the UI and be on the same page with the client.
For that purpose, we carefully watch and re-watch videos and learn the lingo. So now we know that a charge is a mixture of raw materials supplied into a blast furnace; a tuyere is a tube through which air is blown into a furnace; and a salamander is a mass of solidified metal that accumulates at the bottom of a furnace and can damage it.
For that purpose, we carefully watch and re-watch videos and learn the lingo. So now we know that a charge is a mixture of raw materials supplied into a blast furnace; a tuyere is a tube through which air is blown into a furnace; and a salamander is a mass of solidified metal that accumulates at the bottom of a furnace and can damage it.
The designer, reflecting on their carefree university days, takes notes and draws chats to precisely break down the steelmaking process and build a functional UI.
Doing our homework: examining existing interfaces
What makes enterprise management system UIs special is that this kind of corporate software runs for decades and hardly ever gets replaced or upgraded to a more advanced version. That is why they typically resemble Windows 95 or Norton Commander.
Getting started
Steelmaking is a long and complex process. We take a thorough look at its every step, but in order to design a concept UI we concentrate specifically on determining the proper alloy recipe and composition. This is where an operator makes the most microactions and works with values that require their shaper attention.
Recreating the workflow and laying out the screen view
Designing the primary screen working area
When an operator forms a smelting queue, they mostly interact with the recipe editor screen. Recipes contain a humongous amount of data to keep track of, and an operator has to manage a multitude of numeric values and detect outliers.
A mistake would cost a ruined batch of cast iron and unnecessary equipment shutdown — and big bucks. The damage could run into several hundred thousand dollars.
A mistake would cost a ruined batch of cast iron and unnecessary equipment shutdown — and big bucks. The damage could run into several hundred thousand dollars.
First things… central
An operator handles many sheets and numbers. That is why we apply clear contrast fonts to make the data more readable.
An operator handles many sheets and numbers. That is why we apply clear contrast fonts to make the data more readable.
and a sidebar panel for notifications
All notifications are conveniently gathered on a sidebar to avoid distraction. The system blocks any attempts to proceed to the next stage in the pipeline until all critical issues are resolved.
All notifications are conveniently gathered on a sidebar to avoid distraction. The system blocks any attempts to proceed to the next stage in the pipeline until all critical issues are resolved.
Key focus points
— a contrast UI makes it easier and more convenient to read the data;
— keyboard navigation through the sheets for increased productivity;
— focus on the active cell and row to ease the operators work
— keyboard navigation through the sheets for increased productivity;
— focus on the active cell and row to ease the operators work
We have tried and tested several color coding options to help operators read the data and spot errors quicker.
Relieving eye strain and improving concentration
Sticking to a process based approach to design
Choosing a recipe
We tap into universal control elements to keep the experience as simple and intuitive as possible. For instance, a single click on the "+" button on the control panel is all it takes to create a new recipe.
The mass balance
Steel and cast iron production has very much in common with bread baking. To get it right, you need to pick the right recipe and make sure you have enough of each ingredient for the target batch size. Similarly, a seasoned steelmaker-operator can, on the fly, think up a recipe for any required material and then check the supplies in stock and set up a queue for the production of different grades of cast iron.
Reusable recipes
Ready-to-use recipe templates save operators from entering frequent data over and over again.
Double-checking the chemical formula
Before launching a recipe on the production line, an operator needs to verify that the composition of each material is within normal limits to ensure that the output metal quality will meet the standards. Any errors the system finds during the verification process are displayed in the notifications panel.
Error messages are duplicated near the confirmation button to save operators the time that would otherwise be spent searching.
The system will greenlight the operator for the next step — forming the load matrix — only after all critical issues have been resolved.
The bottom line
We have designed an enterprise management system UI specifically geared towards the steelmaking process. And we've taken care to make it smooth and efficient to use every day. It keeps an operator focused, without getting their attention distracted by unwanted pesky notifications, and helps avoid costly mistakes.
Trying once is better than reading twice, anyway.
Check out our interactive InVision demo
