Designing an interface for an industrial IoT app

Our client has a passion for pioneering breakthroughs in ceiling fan technologies. We designed an app user experience (UX) and user interface (UI) to match their engineering excellence.

 

 

Hunter Industrial, a division of Hunter Fan Company, features blade spans ranging from 14 to 24 feet. Having secured a leading position in the market, Outside Source was tasked with a redesign their controller interface for their next generation of products.

fan.gif

Before

Prior to our UX/UI redesign, the experience was difficult to navigate and interact with. User flows were not intuitive, the visual design lowered the perceived quality of the product, buttons were small and difficult to press, and small text lacking proper contrast was almost illegible in industrial environments.

Before

Before

 

After

A clean, modern interface design reflects the high quality of the enterprise product and brand. Clear navigation establishes a hierarchy of function and purpose, while fonts meet accessibility standards for size and contrast. Large buttons ensure easy, accurate interactions in an environment where users interact with the interface in a variety of settings – wall mounted, low or high light, and minimal time to process the information presented.

The design was created in coordination with the device manufacturer’s proprietary IIoT platform requirements, which uses a Qt engine.

iiot-ui-design.png
 

Dashboard design: Fan speed is indicated by a circle gauge, and colors and icons allow users to visually understand the most crucial information of their facility status at a glance.

dashboard-design.png
 

Scheduling was simplified into a cohesive, single-screen experience. Up to three routines and seven days a week can be easily scheduled with minimal interaction. Forward and reverse fan direction colors are carried through to the scheduling screen for consistent status indication throughout the application.

ui-design.png
 

The small keyboard of the original interface design presented usability issues — users could not accurately press the intended keys. This was addressed with a custom keyboard design that maximizes the screen, allowing for the largest possible target areas.

ux-design.png

 

 Design System

specs.png
styleguide.png

Results

We designed a flexible controller interface that was adapted to unique size requirements and orientations.

We built a product that greatly improved the user experience and better reflects the world class products Hunter produces. Hunter released their product to the public knowing their UX is as beautiful as it is intuitive and usable.

Questions?

We’re here to help.