Note: This activity was created as a portfolio piece, based on a similar activity I designed and developed originally. Any proprietary content, assets or IP has been replaced or recreated.

Problem

With a library of over 500 icon styles, newly hired designers were struggling to remember the available icons and find them in the library based on name alone.

Solution

​Interactive matching game built with HTML, CSS, and JavaScript, packaged and available for a local download or ready for hosting. See source code on Github.

Impact and Results

• Faster speed to work times with designers able to complete icon-based projects sooner in their onboarding
• Better retention, designers could more quickly recognize and recall icon names for faster searching in limited asset management systems
• Allowed for streamlined icon development process, removing a step of comparing submissions to current icons

Working Reconstruction

Features
​Originally built following this tutorial, addition features added by me include:

• Random selection of 12 icons and their matching icon names from a set of 40 options (original had 100).
• Animation and storage of correct matches.
• Responsive design for different screen sizes and mobile/tablet compatibility.
• Timer and turn counter begin at the first attempt and end when the game is solved.
• Print button and pop-up alert appear when game is complete to share results.

Instructions:

1. Click on the cards to flip them over in pairs. 
2. Each pair will include one icon image (with a question mark on the back) and one icon name (with an "i" on the back).
3. The timer and turn counter will keep track of your progress.
4. Correctly matched icons will appear in the Matched Icons section.
5. When you are done, you can print your results.
6. Refresh the page to replay with a new set of icons.

​Open in new window.