Icon Design

  • Improving the usability of ConnectWise products by designing a consistent, scalable set of icons and documenting best practices for usage.

    Icon design for ConnectWise.

    My Role

    Research, design, and documentation.

    The Challenge

    The first step was auditing the products, collecting screenshots of the different icons, and documenting how each was being used. I also interviewed some of our users and asked them to perform tasks that involved locating icons. 

    Here’s what I found…

    ♦   Over 200 unique icons were being used across the products.
    ♦   Icon sizes were inconsistent and many icons contained details that were lost at smaller sizes.
    ♦   Many of the icons were not universally recognized symbols (i.e. magnifying glass for search) and without text labels, it was hard for users to understand what their purpose was.
    ♦   There were many redundant icons or icons that looked similar but were being used for different actions, this caused confusion for our users who would often accidentally click the wrong icon.

    Here’s a snapshot of what the icons looked like in product menus before the redesign. 

    An example of what some of the icons looked like in the products before the redesign.

    Design

    Once I had a clearer picture of what I was working with, I was able to eliminate all the redundant and decorative icons. I designed the new icons and tested them with our users to make sure I was on the right track with my image choice. After completing the set, I wrote usage guidelines and instructions for other designers so that anyone could contribute to the set in the future. 

     

    An excerpt of the icon documentation that shows the grid system used to build the icons.

    What I learned

    Going into this, I didn’t think it would involve much more than jumping into illustrator and whipping up a new set. The more I dove into the world of icon design and usability, the more I started to see just how important it was to do the research, test the images, and consider if an icon should be used at all.