Hi! I’m Alex, an Art Director at Anthracite Design Studio. Over the past year, we worked closely with our client to create an interface for a transportation monitoring system. This system utilises a network of AI-powered cameras, each designed for specific purposes. Managed by operators, the system aids in preventing potential incidents, minimising consequencespp, and cataloging cases for further analysis and usage, ultimately contributing to a safer city environment. Today, I’d like to share with you how we approached the icon development for the system and whether the research invested in it proved to be worthwhile.
Cameras’ icons play a pivotal role in notifying operators about detected incidents on roads and streets. A variety of camera types has been developed for the transport monitoring system, each specialized in detecting distinct entities; for instance, one camera may analyze faces in footage, while another excels at identifying traffic violations. To expedite incident reporting and the notification of special services, operators must swiftly discern the camera type, category, feature, and status on the map.
Our goal was to design a set of icons that operators could easily recognize within the transportation monitoring system. This process posed challenges, as it entailed depicting over 15 camera types, including primary categories, AI module presence, size variations, orientation, status, and incident priority alerts. Moreover, we needed a streamlined process for integrating new cameras into existing screens and managing updates effectively.
Our approach was marked by thorough research. We started with devoted considerable time to study real-life camera appearances, which provided us with the foundational elements to depict each camera type.
Example of camera variations we are working with. Some types of cameras we can’t show due to NDA
Despite the utilisation of a network of AI-powered cameras, the system is still under the management of operators. Acknowledging the critical significance of operator feedback, we conducted several iterations of usability testing sessions. These collaborations with operators enabled us to fine-tune our designs, ensuring that they align with the needs of the individuals who rely on them daily.
Through our rigorous testing, we established >80% recognition as our threshold. Pursuing a 100% recognition rate proved impractical since operators typically work with multiple cameras simultaneously in real-life scenarios, rather than identifying one camera at a time.With this benchmark in mind, we successfully manage to finalise the designs of the new icons, ensuring their recognisability within the system.
We aimed to integrate a new camera icon set into our product as a part of our design system. First we combined all tested selected icon design comprising a well-organized component set that streamlined the creation of new screens.
In parallel, we established a set of design principles, guidelines, and rules, serving as essential directives for our design team and developers, thus ensuring consistency of design and its implementation.
To simplify implementation, we created prototypes that precisely illustrated how certain new camera features should function within the product. This streamlined the development process
While it may appear that dedicating additional time to research and integrating icons into our design system incurs an initial investment, the long-term benefits are undeniable. Our approach not only increased our confidence in our decisions and final designs but also significantly streamlined the process for future updates, modifications, and the creation of new layouts. With the expansion of the transport monitoring system database and improvements in the AI model, we embarked on the introduction of new features. You can read about our previous case in which a seemingly ‘Small’ Feature we introduced reduced incident processing time by 34% and saved operators 8 hours of additional work per month.