Map of Chemical Knowledge
Education · Web Platform · Government

Map of Chemical Knowledge

Government public-education site turning hazardous chemical data into approachable visual storytelling — through illustrations, life-context categories, and a gamified knowledge map

Client
Toxic & Chemical Substances Bureau
Agency
Cloud Interactive
My Role
UX/UI + Illustration Designer
Timeline
2018
Platform
Web
Project Type
New Product
01 · Context

Dense government data. Zero public engagement.

Taiwan's Toxic & Chemical Substances Bureau had a public safety problem: how do you help ordinary citizens understand which chemicals in their daily lives are hazardous — and why? The existing resources were thick reference documents written for regulatory professionals. Nobody read them. Nobody was supposed to.

The subject matter is inherently technical and potentially alarming. The design challenge was to make it approachable — even enjoyable — without trivialising the safety message. Government sites have a reputation for being unusable. This was a chance to prove that public service design can be world-class.

Starting Point
Dense regulatory documents nobody reads
Audience
General public — zero chemistry background assumed
Full Scope
UX + UI + illustration system + 200+ icon entries
02 · The UX Problem

The taxonomy mismatch — experts vs. real people

The core design problem wasn't visual — it was structural. Chemical databases are organised the way chemists think: by compound name, molecular formula, CAS number. But the people this site needed to reach don't think in chemical terminology. They think in terms of their daily lives.

A parent worrying about their child's plastic water bottle doesn't search "Bisphenol A." They think about what their child is drinking from. This mental model gap was the central design challenge: the information had to be reorganised around how citizens actually encounter chemicals — not how scientists classify them.

The strategic pivot

Instead of asking "what chemical are you looking for?" — which requires prior knowledge — we asked "where in your life did you encounter it?" This single structural decision unlocked the entire information architecture.

03 · UX Strategy

Three decisions that defined the design

01
Life Context Over Chemical Taxonomy
Organise the entire site by how people live — Food, Clothing, Housing, Transport, Education & Entertainment — not by chemical classification. Users enter through a world they already recognise, not a scientific vocabulary they don't.
02
Illustration as the First Language
Custom character-based illustrations greet users at every entry point — before any text. Characters signal that this is a safe, friendly space. The approachability of the visual language is what earns permission to deliver the serious content underneath.
03
Gamification for Dwell Time
A "knowledge map" mechanic rewards exploration — revealing connections between everyday objects and chemical compounds as users navigate. Progress mechanics encourage users to go beyond their initial entry point, increasing depth of public education.
04 · Information Architecture

Five categories. Five worlds citizens already live in.

The top-level navigation is built entirely around daily life contexts. Each category represents a recognisable domain — the kitchen, the closet, the commute. Within each, chemicals are surfaced through the objects and situations that people already encounter. The user never needs to know a chemical name to start exploring.

Food
Preservatives, additives, packaging
Cloth
Dyes, fabric treatments, synthetic fibres
Accommodation
Cleaning agents, paints, plastics
Traffic
Fuels, exhaust, road materials
Education & Entertainment
Art supplies, toys, electronics
Why this works

A user worried about a cleaning product doesn't need to know it's called "sodium hypochlorite" — they navigate to Accommodation → Cleaning → and encounter it in its real-world form first, before any chemical name appears. Understanding comes before jargon.

05 · Feature Design

Three layers of discovery — browse, search, explore

Different users approach the same content with different behaviours. A curious teenager browses visually. A concerned parent searches by object. A student doing research explores connections. The design supports all three simultaneously — without forcing any single mental model onto the experience.

Browse by Category
Visual-first entry through life context cards. No prior knowledge required — users choose the world they recognise and explore from there.
Search by Keyword
Type a product, object, or chemical name. Results are icon-first, colour-coded by category — visual recognition before reading.
Knowledge Map
An interactive visual map reveals connections between everyday items and compound families. Gamified — chemicals "unlock" as users explore adjacent categories.
Illustration System — Making Chemistry Feel Safe

Every category, sub-category, and chemical entry has a corresponding custom illustration character. Characters are friendly and slightly anthropomorphic — designed to signal that this content is approachable, not threatening. The illustration system was designed to scale: the same visual language covers 200+ chemical entries without feeling repetitive.

Approachability
Warm, Character-Led Visuals
Characters greet users at every landing page. The visual warmth earns trust before any chemical data is shown — essential when content could otherwise feel alarming or inaccessible to a general audience.
Scalability
Icon System at 200+ Entries
The iconographic design system covers every entry in the chemical dictionary. Colour-coded by category, consistent in style, and compact enough to work at 40px — ensuring the catalogue remains browsable even at scale.
Infographic
Detail Pages — Data Without Walls
Chemical detail pages replace dense regulatory text with infographic layouts: hazard levels shown as visual scales, exposure routes as illustrated diagrams, and safety precautions as icon-tagged cards. The data is all there — it just no longer requires a chemistry degree to parse.
Gamification
Progress Mechanics for Deeper Learning
The knowledge map tracks which chemicals a user has explored, revealing a visual "completion" state as more entries are visited. This progress mechanic — borrowed from game design — transforms passive reading into active discovery, increasing both dwell time and retention.
06 · Visual Design

Full platform — homepage to detail view

A warm, illustration-led visual system that makes hazardous chemical data feel like a children's encyclopaedia — without compromising accuracy or authority.

Complete site design — homepage · categories · knowledge map · chemical detail
Map of Chemical Knowledge — full platform UI: homepage, category view, knowledge map, and chemical detail pages
07 · Design System

Visual language — colour, illustration, and type

The colour system is dual-purpose: warm, vibrant tones signal approachability at the homepage level, while category colours create a navigational vocabulary across the full dictionary. Each of the five life categories owns a distinct colour — consistent across icons, headers, and detail pages.

#F97316
Food
#8B5CF6
Cloth
#0BBBA0
Accommodation
#3B82F6
Traffic
#F43F5E
Edu & Ent
#1A1A2E
Foreground
Headings
Display Bold
Large, friendly headings with tight tracking — warm and confident, never institutional or cold
Body / UI
Noto Sans CJK TC
Bilingual body text (Traditional Chinese + English) — critical for a government site serving the Taiwanese public
Outcome

Successfully launched as a public educational resource by Taiwan's Toxic & Chemical Substances Bureau. The life-context visual dictionary format — connecting everyday objects to chemical awareness through illustration and gamification — became a reference model for subsequent government digital communication projects in Taiwan.

Web Illustration Information Design Gov / Public Gamification Data Viz EdTech
Back to start
Global MyB2B
View case study