IVR Icon Set

IVR (Interactive Voice Response) dialer icons are a critical part of the usability for IVR creators. IVRs are used to guide callers towards the proper agents or pre-recorded messages. Think of your encounters calling customer support from big organizations. It could take two coffee breaks just to get the right person on the phone. This entire process is setup using an IVR (Interactive Voice Response) setup.

Comsys wanted a new set of icons to replace the previous set that looked out of date and werent user friendly. So I set out to create icons that would look like they were designed to be part of a family. This process started by looking into the current set and highlighting some of the problems. First all icons used positive space, which means they look disjointed. Secondly icons were built in detail but displayed on a small canvas, this greatly reduced the recognizion and made them harder to load.

I began by finding how each icon relates to one another putting them together in groups (sets). Once this was determined I had a starting point to create visual recognition between each individual set. Next I wanted to have the icons blend in the page and make them instantly recognizable so that they are easy to parse. I decided between a few basic shapes that each icon would share. This would create visual clarity by injecting each icon with similar properties such as height and width.

Deciding between these shapes proved easy after trialing each shape in a few renders. Creating all icons in the set as circles lacked the hard line that would stop the eye from recognize a shape. It also lacked a feel of importance and gave it an informal look and feel; which doesn’t fit the importance of the usecase. Square icons didn’t feel right either because the page has a drag and drop mechanic going for it. Square icons didn’t invite to drag and drop as profoundly as square icons with rounded edges do. So after trying three primary shapes I settled on square icons with rounded edges; I continued on developing a grid where the negative space would stop.

Each icon went through at least ten iterations before I felt comfortable showing them to users and management. We were very happy with the first iterations and made a couple of consistency and clarity changes to the icons before releasing them to the IVR (Interactive Voice Response) dialer software.

One innovation that didn’t make the initial release is a dynamic resizing mechanism. IVR flows can become really big and cumbersome. Small icons would really help in this situation. Bigger icons on the other hand look nicer and are easier to use. They provide a better usability but only when the dialer is not too large. In the end it became clear that small businesses would fare better with larger icons while veteran users would prefer a tiny icon that takes less screen space. I designed two versions of each icon (differentiated by the line where the cut out of the icon stops). Depending on the number of nodes (icons) on the screen the icon would change size providing a good usability when screen estate is plenty, and when screen space becomes restrained.

  • Technology

  • Illustrator
  • SVG
  • Launch

  • 2015
  • Visit Comsys

  • ComsysConnecy