Creating the Zebra Technologies icon library
What is the main purpose of an icon? Is it to communicate the intent without any text and language barriers? In order to better communicate the message, the metaphor needs to be simple and clean. In enterprise and industrial use cases, this means tasks being completed more efficiently and with fewer errors.
As someone responsible for UX and UI at Zebra Technologies, I am always trying to find ways to improve the way we communicate with our end users. This also involves designing an icon and making sure it is distilled to its essence to make it simple and easy to understand.
Users in the enterprise world interact with many types of technologies to carry out their jobs. Zebra Technologies designs and builds many of these hardware and software solutions and whilst growing their portfolio, they have used icons from multiple sources including third party consultancies where they would use their own design style for the past several years. This has led to an inconsistent look and feel which started to affect the user experience across our portfolio. A common problem was where one icon would not match another in terms of style. In some cases I spotted several different icons for the same job so it became necessary to take action to rectify the problem.
The obvious issues were different thicknesses on the lines, solid fill on some and line work on others, shine and shade effects on some, etc.
The grid:
I started by creating a grid and taking some design inspiration from Material design as our devices were using Android as their select operating system.
I developed the new icon grid to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. This standardisation resulted in a flexible but coherent system.
The grid is 32x32. I wanted to be able to put metaphors in detail and wanted to make sure that the grid is:
• Divisible by 2, 4 and 8
• Scalable
• Easy to generate common sizes like 64x64, 128x128, 256x256 and 512x512.
This is where Material design and I differ as Material design icons were using a 48x48 grid.
Inspiration:
Once I had the grid, I scrutinised our new logo as I decided to take inspiration from our own company logo for visual features. The new Zebra logo and branding had just been released, so it was a good time to make some changes.
The Zebra logo has sharp corners and curves, parallel lines, negative space and solid fills. I tried to translate these features as a visual style formula and used on metaphors as much as possible. I also wanted the new icons to have a family feel so I followed the same principles for creating each icon, as long as the metaphor permitted. The more I explored the idea of using both sharp and rounded edges, the more the visual style worked well with our logo and brand.
Power icon:
Our users generally use a couple of different devices from our portfolio in their daily life, like a barcode scanner, a smart device and a printer in the same shift. When you think of a power button as the first and the last thing our users interact with on our devices, the importance of a consistent look and feel was becomes clear but we weren’t there yet:
The power icon was the obvious choice to start with designing our own icon library and being the first official member soon after.
The metaphor:
In our icons, the metaphor is the decisive shape that dictates whether the icon will have sharp or rounded corners. For example, a lightning bolt metaphor wouldn’t work well with rounded corners or curvy lines but a home icon or a camera icon was suitable to include both styles at the same time.
I knew the metaphor was the core of each icon so I went through multiple iterations before the final version.
For common use icons, I have used Material Design icons as my starting point and tweaked the core metaphor to our own needs and made sure that it fit our 32x32 grid.
As a rule, all metaphors are drawn in 2D frontal view as a silhouette. This helps the metaphor convey the message directly and easily.
User feedback also led the final design of our icons. We made sure our users understood the message on the icon but inevitably, this meant that some icons took more time to refine, such as this cleaning icon for our printers:
One by one, the icon library started to populate and we created a web page to show them all.
As we embraced the new look and feel, we immediately started to see the difference on the UI of our devices; a modern look and feel needed for a long time.
What started as an attempt to achieve a consistent look and feel across our portfolio resulted in creating a new icon library. Now we have over 500 icons in our library which I feel very proud. They all share the same look and feel and they were all creating using the same rules, but as with all design work, there is always some room for improvement and we are constantly making necessary updates to our library so watch this space.
