CA Process Automation - 2011

Port Connectors

While working at CA Technologies, I was involved in their Process Automation software, a complex web-based platform for IT admins to streamline systems management. Our goal was improving the visual interface that allows for workflow creation. In the most basic terms, boxes represented hardware; lines that represented the path of communication connected boxes. There are several competing products in the market, and all of these use icons to represent the nature of the connections at the points where the lines meet the boxes. Given the complexity of some processes, and that the icons used at the center of these boxes were sometimes composed of two adjacent icons, things would easily become cluttered. I cleaned the interface by using semi-circles to differentiate between inbound and outbound links at these ports. Different types of outbound links were differentiated by color initially and we later tried shapes to avoid relying on color exclusively. This small detail made a big change in how clean and readable the diagrams became. The team and our management were very impressed with the simplicity of this solution. My role in this project involved more than this detail, this was one of those details that made a big difference on the interface.

Icon Designer

As part of the same Process Automation project, I developed an interface for the creation of custom icons by combining a base icon and a modifier icon. This would allow users to create their own repertory of custom icons with great flexibility. Part of our goal was to bring some of the interaction patterns from modern web interfaces and apps to a work environment such as this, scrolling panels were used for the selection of base and modifier icons, a central area for previewing and adding metadata such as name and description.