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).

consistent-pictogram
consistent-survey

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

consistent-iconAggregator
consistent-solution
ConsistentDoodles_userFlow3
ConsistentDoodles_related

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.

ConsistentDoodles_related

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.

ConsistentDoodles_pairing
ConsistentDoodles_pairing
ConsistentDoodles_collections

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.

thesis-dogs2
thesis-q&d

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.

Selected Works

Accessible PlacesUX, UI, Mobile, Web, Prototype

Geo UGCUX, UI, Mobile, Web, Prototype

Consistent DoodlesUX, Web, Prototype, Development

MyRxUX, UI, Mobile, Prototype

uniFlowVoice, UX, AR/VR, Development

OGS Annual ReportData Visualization, Web, Editorial

BubblesMotion Capture, 3D, Animation

Talk to Makeup GuruVoice, UX, Mobile, Development

Surfing BilinguallyData Visualization, Web, Development

OGS IconsIconography

NYU OutboundUX, Research, User Testing

TimeData Visualization, Development, Electronic

Harper's Bazaar IconsExperiential, Branding

Champagne TaittingerBranding, Photo, Motion

Target: Opening it upExperiential, Branding

Amazon FashionExperiential, Branding

Carry On CampaignIdentity, Branding

ExtraBucksUX, UI, Mobile, Prototype

The Vengeance TrinityTypography, Print

Bottoms Up!UX, UI, Mobile, Prototype

UTC TimezoneInfographic, Print

LegographyTypography, Print