GForces’ NetDirector software provides an industry-leading digital solution to the automotive industry, and needed a cohesive icon set to match. NetDirector software is used globally for hundreds of clients from England to Dubai, Australia to Canada, and many in between. The NetDirector software services over 5,000 locations in over 65 countries.
In order to suit the needs of a huge variety of different sites all with varying styles and requirements, the previous icon set compiled of icons from a range of different sources and designers needed a complete overhaul to a set flexible enough to work yet consistent enough to scale. It was important to cut out unneccesary elements when desiging the icons as the purpose of icons in any scenario is to convey an idea or symbol quickly and simply.
© GForces Web Management Ltd. - All rights reserved.
To replace the current disjointed icon set with a consistent, functional set to work across a variety of sites and contexts.
To create some icons that may/will become necessary for use on current and potential software.
To design a style that is scalable and applicable to different contexts, so if more icons are needed in the future they can follow suit.
To create a line and a glyph version of the set for variation and a choice for each individual client based on preference.
In order to keep the icon set flexible and usable across a variety of contexts, each icon was created in two different styles, and followed a set of rules to keep cohesion across the set. In order to define an icon’s details that could be lost once transferred from glyph to line or vice versa, I employed different methods of defining the key parts of the icons such as encasing the icon as seen in the mileage icons above, inverting shapes and fills, or cutting out shapes to gesture an overlap.
Built on a grid, each icon had rules which dictated the spacing, sizing, thickness and angle of every curve, shape and line. Keeping a slight radius on each edge helped to carry the consistency from one icon to the next. It was important to keep a design language for the icons else they may appear disjointed, however this needed to be subtle to suit the huge variety of use cases across sites and software.
Looking at the previous icon set was a great way to try and understand the idea that each icon needed to convey. Above is a glimpse at just some of the icons that were redesigned from the original set into an updated glyph and line version of each. The previous icons consisted (pardon the pun) of many different styles and had no design language linking one icon with the next; an issue that was the catalyst in beginning this project as the software was well thought out, developed and implemented to great effect, and the icons didn’t convey that at all.
Having a visual style and a set of rules with which the new icons were created meant the icon set could be expanded and added to in order to suit future software and developments, and since the implementation of the icon set to NetDirector it has been expanded to have icons for ecommerce and vehicle configuration software.
The icon set is prevalent across all new and many existing sites that use NetDirector, ranging from small independent dealers to OEM platforms such as JLR, Hyundai and Aston Martin. Having a cohesive set has allowed for page templates like the above detail pages to let the icons draw attention to information as well as just accompanying labels. The icons were built with a pixel perfect grid meaning they render well on all screens, and serve a purpose across all contexts whether that be the glyph or the line version of the icons.
Throughout this project, I was able to learn to create an icon set without the guidance of a senior team member - this was the first time in which I was able to work completely alone to understand and interpret a project of this size, and is the largest project I’ve undertaken to date.
My process was to first research and understand what was necessary in order to create an icon set, then to implement my research and come up with a grid and a set of rules to base my icons from. I then began to design the simplest of icons to start with such as arrows and controls such as play & pause, before working through the extensive list until I was trying to exemplify the difference between a saloon and a hatchback in a matter of pixels. I’ll admit, much of this difficulty came from my lack of car knowledge in the first place, however along with my icon design competence, my car knowledge was being dragged up alongside.
From understanding what is necessary to create an icon set and setting up my grid to work with, to developing consistent, readable icons through a huge number of iterations helped me to understand icon design as a whole and work to a set of creative restrictions to create a cohesive end product.
Since the creation of the initial set of 322 icons, an additional 174 have been designed and integrated seamlessly, due to the guidelines created to keep the icons consistent.