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.
Project Title → Consistent Doodles
Course → ITP Thesis 2019
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).
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 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 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 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.
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.
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
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