Cleaver-Brooks

A person interacting with a touch screen.

From Standard Design to Cutting-Edge Modernization

Cleaver-Brooks, a leading boiler technology provider, required a comprehensive UI kit for its interface screens to propel its brand into a new era of innovation.

  • UI/UX Design
  • Graphic Design
  • Strategy
  • Research
00
pages

 Color Selections

To align with the established legacy of Cleaver-Brooks brand guidelines, ArtVersion intersected familiarity with a modern twist. The color directions were reminiscent of the established color story, yet incorporated new warm and cool colors into the mix that offered balance, contrast, and overall unity into the UI designs. The story was cohesive and promoted readability for operator usage.

Midnight Blue
#003150
Seaside Blue
#3396A7
Crimson Cherry
#AA272F
Clear Skies
#99CAD3
Deep Ocean
#007C92
Stone Grey
#82786F
Muted Teal
#477F80
Willow Green
#738639
Open Sans typeface example.
Open Sans
Preferred
Helvetica typeface example.
Helvetica
Optional
Arial typeface letter A.
Arial
Optional

Typography

With careful analysis and concepting, the team pinpointed which typography would best align with Cleaver-Brook's brand identity, while ensuring the selection was accessible. The preferred selection was the classic sans-serif font, Open-sans, with two alternative options — Helvetica and Arial.

Book cover mockup.

Iconography

ArtVersion immersed the conceptual and contextual stage with a hands-on approach at the Cleaver-Brooks facility to grasp an in-depth experience with their boiler machinery. This allowed the team to zero in on the intricacies and design icons that would be utilized. Not only did they prove useful for design elements, but they also better understand the micro-interactions of the icons that would embody them. Each icon took on a bolder color fill that encouraged reliability and demanded attention.

Home Icon.
VSD lightening bolt icon.
Close icon.
System icon.
Alarm icon.
Brightness icon.
Control and calibration icon.
Settings icon.
User icon.
Diagnostics search icon.
Menu icon.
Information Icon.
Book spread mockup.
A custom light mode background.

Light 

Readability and accessibility were two pivotal factors in the updated UI kits. ArtVersion's design team deployed a custom and sleek background design that ensured clarity while adding a visually-alluring edge. 

Dark

The team presented Cleaver-Brooks with the option for dark mode, thus custom dark backdrops for the screens were designed with corresponding UI elements and iconography.

A custom dark mode background.

Custom Widgets

ArtVersion went beyond traditional design by contextually designing micro-interactions tailored to each UI element, considering both their active and inactive states. This included designing hover states, sliders, drop-downs, dial interactions, and more. Each component in the UI kit was crafted to suit the user's environment, whether touch screen tap or cursor clicks.

Book spread mockup.
A UI screen mockup.

UI Specifications

The design was further enriched with designs that included detailed graphs for temperatures, water pressure, system warnings, and a comprehensive full-screen boiler data interface. Given the intricate nature of each element, ArtVersion compiled a comprehensive UI kit spanning over one hundred pages. The guide delved into detailed specifications, usage, and best practices for each component. It covered everything from precise element spacing to broader aspects. The final product equipped Cleaver-Brooks with all the necessary specifications for the integration of the UI interface with their boiler systems.

UI Screens

Dark Mode
A UI screen design for Steam Boiler Data.
A UI screen design for data set 1 being highlighted.
A UI screen design alarm time and message.
A UI screen design boiler media and type, fuel actuators, and fuel type.
A UI screen design featuring some ui elements blurred out and top navigation showing.
A UI mockup of a tablet device.

UI Screens

Light Mode
A UI screen design light in color showing Steam Boiler Data and Run.
A UI screen design in light color with Data set 1 highlighted.
A UI screen design in light color shows alarm time, message, and state.
A UI screen design in light color showing boiler media and type, fuel actuators, and fuel type.
A UI screen design in light color.
A title page for the UI Kit.