Health Icons
Improving icon discovery with information architecture and metadata design
SUMMARY
I’m volunteering with Health Icons to improve icon discovery. I’m using information architecture methods to create metadata that deliver relevant, thorough search results.
MY ROLE
User research
Information architecture
Metadata design
TOOLS
Optimal Workshop
Slack
Airtable
VIEW THE PROJECT LIVE
Health Icons is volunteer-driven and growing.
SCOPING PHASE
Framing the challenge
Health Icons is a free, open-source, and growing collection of health-related icons. I volunteered to help work on a new system for categorizing the growing collection of icons. But categories are only one part of the discovery ecosystem that helps users find the icons they are looking for. I reframed my brief with a new design challenge:
How do we create a disciplined metadata structure that can grow along with the icon collection?
RESEARCH PHASE
Identifying the issues
I took stock of the current state of discovery metadata. Site analytics were not available, so I spent some time with the site to find out where the problem areas were. A few primary issues emerged:
Categories were too limited to classify increasingly diverse icons. The categories “symbols” was serving as a catch-all for icons of all kinds.
Tags were inconsistent. For example, the tag “ache” might only appear on an icon representing “intestinal pain,” despite there being several icons representing similar pain.
Key terms people might use to search for the represented concept were sometimes missing. For example, “nose” was tagged with “nostril” but not with “nasal.”
American English and British English were inconsistently represented. Health Icons is used globally where British English is sometimes standard. “Bandage,” for instance, was also tagged “bandaid” (US) but not “plaster” (UK).
Metadata governance was ad hoc. No bank of tags existed yet, so contributors had to come up with tags on the fly, leading to inconsistencies.
Icons weren’t yet accessible. When downloaded and used in the wild, designers would be applying their own alt tags to these icons. But without them now, low-sight visitors to Health Icons would be relying on our interpretations of meaning (titles, tags) to choose the best icon for their use case. I advocated for visually descriptive icon alt tags to provide those users with more information to make an informed pick.
Uncovering how users group and name health concepts
I ran an open card sort in OptimalSort to better understand how our users make sense of health-related concepts. How do they group concepts together? And what language do they use to describe those groups? Understanding users' mental models would help me set up useful categories.
A total of 47 participants each sorted 64 cards, each representing an icon. I selected the cards for this study randomly to avoid creating natural clusters. Participants sorted each card into an average of 33 uniquely named categories. Analysis was challenging, but it made me double-down on committing to using the language of our users.
I spent a lot of time with the card sort’s resulting dendogram as I generated new categories.
-
Blood
Devices
Diagnostics
Medications
Network
Objects
People
Places
Shapes
Symbols
Vehicles -
Based on my analysis of the card sort, I recommended the following categories:
Departments and Specialties
Medicine and Treatments
Tests and Diagnostics
Infection Prevention and Control
Equipment and Supplies
Human Body
Blood Types
Conditions and Diseases
Symptoms
Family Planning and Reproductive Health
Pregnancy and Infant Care
Administration and Technology
Signage and Guidance
People
Places and Infrastructure
Transportation
Typography
Emotions and Values
Shapes and Logos
Finances and Payments
Environment
Wellness and Nutrition
Education
Animals
Reporting
NEXT UP
The work continues
Right now, I’m analyzing a TreeJack validation study I recently ran to see how our proposed categories fare. Are users able to use new categories to find an icon they’re looking for? The results will show where some tweaks are needed.
Then, I’m going to move on to tags and keywords. Some big plans in the works that I’ve recommended:
We’re going to move our metadata to Airtable. Right now, metadata lives in Figma. Much as we all love Figma, it’s not meant for creating controlled vocabularies or tag libraries.
We’re completely refreshing the icons’ metadata in Airtable.
We’ll make tags clickable. Tags, which are just styled text at the moment, will become another way to browse through content on the discovery path. But making them like filters means that we’ll need to reserve tag status for terms that are likely to have other associated icons. So:
We’ll create a new type of metadata, the keyword. Keywords will be hidden terms that the user doesn’t see, but that help focus search results. Keywords will include synonyms, regional language differences, technical medical terms, and variations on common terms (such as COVID-19, SARS-COV-19, coronavirus, Covid). These are all words/phrases that need to exist to power the search. They don’t need to be visible to users, though.
Then we’ll spend some time on data cleaning and improvement. We’ll remove duplicates, resolve stemming issues, trim down our tags while populating our new keywords field, and make sure terms are applied consistently across the icons. We’ll improve accessibility by adding visual descriptions of icons, such as “a hand covered with small dots.”
We’ll develop an ontology model to help populate tags and keywords. I’m already working on a plan for getting a “360” view of tags and keywords for a new icon. We’ll ask icon contributors to consider the 5 Ws (who, what, where, why, when) to avoid missing important associations. For medical icons, the icon contributor should also check the MeSH (US medical subject headings) entry to find precise medical terminology to use in the keyword field.
Finally, we’ll make a plan for data governance. We’ll set up an Airtable form for icon contributors to enter their new icon metadata.