Consistent Doodles: Icon Search Powered by ML

Consistent Doodles, a new search engine for an icon aggregator, makes the icon search experience easier and faster. It uses the assets' feature extraction via machine learning to utilize the high number of icon collections.

# UX, Web, Prototype
thumbnail image of the project consistent doodle; the laptop screen shows multiple donut icons that have similar features

Project Title → Consistent Doodles
Course → ITP Thesis 2019

Blocks image

Icons vary in their level of detail, scale, weight, and style depending on their themes and purposes. In order to create coherent experience in digital environments like mobile product, designers strive to ensure visual consistency in the use of icons.

Without such consistency, a set of icons falls apart as a visual language and becomes more like a random jumble of doodles. The key to effectively transforming a set of icons into a universal language is consistency (see “Consistent doodles” from Code hidden in Stone Age art may be the root of human writing).


User Research & Site Map

There were two user testings: an intial one and another feedback section at the end. The first user testing was about clarifying the goal and user needs, and the later one was about checking the usability of redesigned wireframe. All icons* that were involved in both user testings were pre-analyzed with machine learning.

*For analysis purpose, icons from the Noun Project and its API were used—I do not own right to any of the icons used in the project


Related Recommendation

Related recommendation refers to feeding visually similar icons, once the user makes an initial selection. This comes handy when the user has specific image in one's mind already, and all the user wants to do is quickly going through the visually similar icons for a single term.


Pairing Recommendation

Pairing Recommendation is for searching multiple terms while keeping consistency among them. Once ther user clicks the pairing button inside the individual icon page, the thumbnail will show in the searching bar—indicating that the loaded results are affected by the previous selection.


Search in Collections

Search in Collections an option that user can choose prior of entering text query. The search bar has two options of Icons and Collections. If the user chooses Collections and enter multiple queries divided by comma, it will scan through all the existing collections and returns the ones with highest matching order.


Process & Long-term Goals

The entire process continuously went together with receiving feedbacks and reflecting them into my design. For example, I received a feedback that the searching state (into pairing) wasn’t clear, so that’s when I decided to add a thumbnail in searching bar with darkening out rest of the area. Or, having an option to switch back and forth between icons and collections was also an idea I got from user testing session.

Next goal will be basically iterating these two steps of "Receiving feedback → Refining the prototype" while having more understanding about the data coverage of icon aggregator sites.