How might we design a product that looks like the future of mining?

Design System UX Design UI Design Visual Design

Overview

Scope: Improve and speed up the start-up experience in TeleAI
Users: Heavy machinery operators (primarily at mine sites)
Role: UX/ UI Designer
Tools: Adobe XD, Balsamiq

Insight

The first major project was to update the look of TeleAI to reflect a modern approach to mining. In 2019 Hard-Line Solutions underwent a brand overhaul, but TeleAI's design was not updated and didn't look like a cohesive part of the HLS brand. Not only did the product need to look and feel like a Hard-Line Solutions offering, the new design needed to embody a modern, technological approach to mining to fit into the competitive landscape

Define

Design a software system that embodies and looks like the future of mining.

Process

Colour

Using the Hard-Line Solutions new brand as a starting place for TeleAI’s redesign, the colour palette was the most immediate divergence. The new HLS brand adapted the brown orange from the logo to become accent colours against a neutral palette of black and greys. This was the key to bringing the brand over to TeleAI. In addition to the primary palette of orange and greys, I created a secondary palette for key indicators, and a gradient palette to add dimension and texture to the interface. With the new colour palette, I focused on improving contrast and accessibility across the system.

The Menu Component

The collapsible menu tray was pivotal to redesigning the system and achieving the goals of maximizing the efficiency of screen real estate. This component is used for the navigation and user menu but also for the AUTO/ASSIST functionality which is an optional system configuration. In its collapsed state users are still able to access navigation or functions, and when expanded more information and features that aren't frequently used are visible. The menu tray case study focuses more on this component.

Layout

Establishing hierarchy through layout and typography helped to improve not only the design but also the usability of the product by visually helping to guide operators through flows. By creating defined areas for menus and controls, these areas are anchored and not floating on the screen. This creates organized groups and reduces cognitive load.

Old TeleAI touchscreen configured with AUTO

New TeleAI touchscreen configured with AUTO & MULTI

Outcomes

The new design of TeleAI has been well received by both internal and external audiences and coupled with improvements made to the UX the system has been observed to be easier to use. In order to further validate the new design I would run moderated usability testing in addition to conducting a focus group to get insight on whether the new design achieves the goal of presenting TeleAI as a modern mining tool.

How might we...

?

How might we... ?