An Icon Story
Product design, Iconography
Background
MachineMetrics is an intuitive and flexible IoT platform to help companies transform shop floor data from insights into actions with powerful apps that reduce machine downtime and maximize profitability driven by manufacturing equipment. There are a lot of places in the MM platform that machine data are represented in different forms to provide value to customers. For example three colors of red, orange, and green are a visual representation of machine operating status as fault, warning , and goal; so users can take action accordingly in each of these conditions. As a product designer in this project, I was responsible to design an icon that can represent the machine in general and it can also communicate different status of a machine as the major part of manufacturing equipment.
There are different types of machines in a shop floor with various forms and functionalities. I wanted to come up with a form that can represent a machine in general as an icon and it is believable for MM users. Here are some real examples of CNC machines, the equipment MM customers work with in their shop floor.
Ideation
After some visual research about designing an icon for a technical equipment, I started to draw on top of the images of machines and gradually simplify the overall form.
A more simplified design could help me to jump into refining the proportions and size, and design the final version, but how might we communicate the machine status with this version? Representing the machine status only by changing the icon’s color did not seem the best approach, and it could not help users to identify icons to navigate quickly later in the app. So, how about giving character to the icon in a way it can represent familiar feelings or even tell a story!
As you may know Font Awesome (FA) is a popular font and icon toolkit, and our design team were using this icon library for other parts of the app. The point is, even a huge library of icons may not have all the examples you need, just as our case with a machine icon. Therefore, I needed to design the icon in a way that preserve the consistency and styles of FA icons.
Machine Icon
I designed the machine icon with a neutral face expression known as the ‘generic machine'‘ icon in our design system with two regular and solid styles. I created the other versions of this icon for specifically representing a machine status.
It wasn’t the end of story for this icon when I came up with a 3D version which could be used as a visual element or an illustration to communicate the intended message. The goal, however, was not to fill every screen with these illustrations, rather keep it more unexpected. The following screens are various illustrative examples of machines I designed for this project. I had so much fun animating it and hope you enjoy watching it too!
