Banner Engineering (founded 1966) · Lead UX Designer · 2023–2024
Five products. Three platforms. One framework that respects the differences.
- Problem
- Five software products grew up around the hardware, one team and one pattern set at a time, across web, mobile, and factory-floor HMI. Customers re-learned the interface five times over, and engineering teams duplicated work with no shared foundation.
- Solution
- One framework drawn along the line between legitimate platform difference and accidental divergence. Glove-friendly hit targets, colors adjusted for non-computer displays, and font sizes defined in multiple display units allowed for development beyond the modern web.
- Stack
- A Figma design system, an HMI-compatible pattern library, and a Storyboard component catalog met developers in their workflow and made it easier to be compliant than to go rogue.
Banner Engineering (founded 1966) grew its software portfolio the way most companies do. Organically, product by product, with no shared foundation. Five products, three platforms, five different design languages, and customers who had to re-learn each one. I built the framework that made the products feel like a family without forcing them to look identical.
5
products unified
3
platforms: web, mobile, HMI
Challenge
Banner makes industrial sensors and automation hardware. Their software grew up around the hardware, product by product, each team solving its own problem with its own patterns. Five products, five interaction models, five mental models customers had to switch between. Engineering teams duplicated work because there was no shared anything. The cost of that fragmentation showed up in user confusion, in support tickets, in the gap between what the brand promised and what the products delivered.
Framework design
Audited all five products across every context they showed up in. Web, mobile, and HMI. The HMI piece is the one that matters here. A factory floor touch interface has constraints a desktop tool doesn't. Glove-friendly hit targets, screen brightness in industrial lighting, single-purpose flows that finish before a shift change. The framework had to honor those differences without splintering into five micro-systems. Found the shared patterns, drew the line between legitimate platform difference and accidental divergence, and built the framework around that line.
A factory floor isn't a desktop with smaller buttons. The framework had to know the difference.
Delivery
Delivered as a Figma design system, a platform-specific HMI pattern library, and an adoption guide. The adoption guide was the unsung piece. Teams could start with navigation and IA before committing to full component swaps, which meant the framework could land in production incrementally instead of waiting for a big-bang rollout that never comes. Incremental adoption is the only kind that actually happens.
Next case study
Bobcat (via Sundog)
Bobcat Advantage