A design-system-led refinement of an industrial machine monitoring platform, restoring visual hierarchy, role clarity, and scan-friendly decision-making at shopfloor scale.
Â
Leanworx
Project Type
UX & UI Redesign • Enterprise SaaS
Stage
Scale-Ready Product Refinement
Services
The context
Leanworx delivers a machine monitoring platform used across live shopfloor environments by operators, supervisors, managers, and maintenance teams.
The platform was functionally mature and already supported role-based flows. However, as the product expanded, clarity began to erode. Screens accumulated information over time, visual hierarchy weakened, and interfaces required increasing interpretation. While users were routed through the correct flows, the system no longer consistently guided attention.
Leanworx engaged us to refine the experience by re-establishing hierarchy, coherence, and consistency across the entire platform.
The challenge
The problem was not missing structure, but diminishing clarity at scale.
Across the platform, we observed:
Across the platform, we observed:
- Role-based screens accruing excessive secondary information over time
- Visual hierarchy that existed, but weakened as new features and states were introduced
- Machine dashboards presenting accurate data without consistently emphasizing what mattered most for each role
- A design system that required refinement to enforce hierarchy as the product evolved
Design System Re-Architecture
This became the primary focus of the engagement. Instead of addressing clarity at the screen level, we redesigned the Leanworx design system end to end, using it as the primary mechanism to enforce hierarchy as the platform scaled. Clear tiers for primary, secondary, and tertiary information were established through rationalized typography, spacing, color usage, and consistent component anatomy across modules.
A key addition was the intentional use of icons within status indicators and data states. Familiar visual cues were paired with recurring system statuses and actions to support faster page scanning and recognition, reducing reliance on text or color alone. By embedding hierarchy and meaning directly into the system, clarity was no longer dependent on individual screens being carefully designed—it was enforced consistently across the platform.
Designing for Harsh Shopfloor Conditions and Tablet Use
The design system was explicitly optimized for real shopfloor usage, where interfaces are frequently viewed on tablets, from varying distances, under uneven lighting, and often in motion.
Key adaptations included:
- Larger baseline font sizes to improve legibility during quick glances
- Increased icon sizes and clearer iconography to reduce recognition effort
- Expanded touch targets to support gloved or imprecise input
- Spacing and layout decisions calibrated for tablet-first use rather than desktop assumptions
- Consistent scaling behavior to preserve hierarchy across screen sizes
These changes ensured the interface remained readable, usable, and dependable in the physical environments it was designed for.
Role-Aware Machine Panels and Data Visualization
Building on the redesigned system, we focused on machine-specific panels within dashboards, where the same underlying data needed to be interpreted differently by each role. We designed role-aware information components that adjusted emphasis and structure based on user context, ensuring each panel surfaced what mattered most without exposing unnecessary detail.
Operators were guided by operational status and immediate actions, supervisors by performance summaries and comparisons, managers by aggregated trends and decision cues, and maintenance teams by diagnostic context and fault indicators. In parallel, we introduced theme-specific data visualizations to communicate urgency, stability, deviation, and trends more intuitively, reducing interpretation time in high-pressure shopfloor conditions.
System-Wide Flow and Screen Refinement
With hierarchy and machine panels resolved, we reviewed every screen across the platform.
All role-based flows, configuration screens, edge states, and low-frequency workflows were aligned to the same hierarchy principles. This ensured clarity did not degrade outside primary dashboards and that users experienced a consistent mental model across the system.
All role-based flows, configuration screens, edge states, and low-frequency workflows were aligned to the same hierarchy principles. This ensured clarity did not degrade outside primary dashboards and that users experienced a consistent mental model across the system.
Navigation Refinement
Navigation patterns were refined to support the updated hierarchy.
An expandable vertical navigation model surfaced high-frequency actions immediately, while progressively revealing secondary tools. Redundant steps were removed and flow depth was reduced where possible.
Movement through the platform became calmer, faster, and more predictable
An expandable vertical navigation model surfaced high-frequency actions immediately, while progressively revealing secondary tools. Redundant steps were removed and flow depth was reduced where possible.
Movement through the platform became calmer, faster, and more predictable
The outcome
The refined Leanworx platform is now anchored by a design system built for industrial reality.
Visual hierarchy consistently guides attention. Machine panels communicate role-appropriate information at a glance.
Tablet-based usage on the shopfloor is clear, legible, and reliable.
By treating the design system as the primary lever for clarity, the platform evolved into a resilient, scalable machine monitoring experience that supports confident decision-making in demanding environments.