KC Beam Pattern Tool

UI/UX Prototype

KC beam pattern tool helps consumers understand the differences and the benefits of each beam pattern that KC lights have to offer. 

My Role

• Design Research • Illustration • Prototyping • UI/UX Design


• Pen & Paper  • Illustrator  • Figma


Users are not sure of the differences between light beam patterns that KC has to offer and what purpose each serves. 



  • Illustrate the differences between light beam patterns widths and lengths in relation to each other coming from the same light source.

  • Allow users to compare and interact with light beams by allowing them to overlay multiple beam patterns.

  • Include descriptions for each beam pattern.

  • Make this available for mobile users.


  • A shade of yellow identifies each beam pattern.

  • Users can select multiple light beams or hover over the dedicated yellow circles of each beam pattern.

  • Opaque light beam patterns allow users to see through overlaid light beams and see the differences. 

  • The description of the light beam pattern is always present next to its dedicated yellow circle.

  • For mobile applications users will need to rotate their phones into landscape-horizontal mode in order to use functions.

  • In mobile applications a clickable tip-tool icon will appear next to each dedicated circle containing light beam description.