Overview
From 2022–2025, I worked as a UX/UI Designer at MTEK.
Their product, MBrain, is a Manufacturing Execution System (MES) used to monitor, track, and manage production on the factory floor, from raw materials through to finished products.
MBrain’s interfaces often needed to present large amounts of information and support complex workflows. Over time, inconsistent grouping, unclear hierarchy, and uneven use of colour made them harder to scan and understand.
I focused on redesigning key areas to bring more order to the interface, making relationships between information clearer and using colour more purposefully to guide attention.
Because MBrain is complex, many workflows involved dense screens packed with nested information, competing actions, and hierarchical layers.
In some places, the visual design actually made things harder. For instance, in Process Builder, the selection highlight sometimes faded into the background, making it difficult to tell which area was active.
The challenge was to make these screens easier to read and navigate while preserving the complexity people needed to do their work.
Approach
Rather than applying one visual solution across every screen, I looked at how information and actions were structured within each workflow and identified where the hierarchy was breaking down.
I then used grouping, spacing, contrast, and colour to create clearer relationships between elements and give important information and actions more appropriate visual weight.
Project Examples
The examples below show how I applied these principles to strengthen visual hierarchy, improve scanability, and clarify complex workflows across the interface.
Improving workflow organization
The Process Builder, used to configure production workflows, packed a large number of controls into a relatively small space.
Testing highlighted several friction points, including closely placed controls in the step-design area and a long, uncategorized tool list that made individual tools harder to find.
The long tool list on the right was difficult to scan. I planned to group the tools into collapsible categories, letting users open what they needed instead of scanning every option at once. This part of the redesign wasn't completed before I left the project.
More broadly, the redesign focused on making the existing complexity easier to navigate rather than removing functionality. I used clearer grouping, hierarchy, and colour to separate different parts of the interface and make actions easier to distinguish.
Improving information hierarchy
In MBrain nested tables were used to let users drill down from an order into related information, such as articles, variations, revisions, and bills of materials.
I was asked to make these relationships easier to see without losing the nested structure.
Nested levels were difficult to distinguish
Before
Early explorations: testing different levels of visual separation
Refined Direction
After
Improving form organization
Some MBrain forms spread a large number of fields across wide horizontal layouts. This made it harder to see which pieces of information belonged together, while the main action could get lost among secondary ones.
I grouped the fields by their natural categories: Product Information, Machine Settings, and Batch Details, so related information sits together where it makes sense.
I shifted to a more vertical layout and gave each section more breathing room. This helps guide the eye down the form instead of forcing users to scan back and forth.
I also clarified the action hierarchy. Since Save is the primary action, it stands out, while Reset takes a quieter role.
Outcome
Reflections
UX Writing • Enterprise UX • Manufacturing Execution System
Design Systems • Enterprise UX • Manufacturing Execution System
UX Research • UX Design • Finance
