Tinybop — App Design
States of Matter
Creative Direction, UX & UI Design, Illustration
How do you make something kids can’t see feel understandable?
At Tinybop, we designed States of Matter as a hands-on science lab where kids could experiment with solids, liquids, and gases—changing temperature, adding different materials, and watching their particles respond in real time.
app structure
One scene, many experiments
Unlike most Tinybop apps, States of Matter takes place in a single laboratory.
Kids could swap containers, add solids, liquids, and gases through separate chutes and hoses, and change the conditions around them. Keeping everything in one scene made it easier to understand cause and effect: make a change, then immediately see what happens to the material and the particles inside it.
interaction
Making the science tangible
The core challenge was helping kids connect what they could see with what was happening at a microscopic level. Rather than treating melting, freezing, evaporation, and condensation as separate lessons, we let kids make those changes happen themselves. As materials heated and cooled, the particle model responded alongside the main scene—speeding up, spreading out, clustering, or changing state.
The same controls worked across different substances, so kids could compare how solids, liquids, and gases behaved without learning a new interaction each time. We wanted it to feel more like a lab than a lesson: add matter, adjust temperature, swap containers, and see what happens.
visual language
Designing a visual language for matter
The challenge wasn’t just illustrating matter—it was defining how different materials should look and behave while still belonging to the same world.
We played with opacity, texture, color, motion, density, and shape until each substance felt recognizable. Those differences also had to hold up as materials moved from one state to another.
illustration
Everything began with one imperfect circle
One imperfect circle became the basis for the illustration system throughout the app.
That slight imperfection gave everything a tactile, handmade quality that contrasted with the more technical simulation underneath.
Visual system
Supporting artifacts
app icon • Typography • selected UI components
outcome
Three types of matter, one app
The final experience brought illustration, interaction, animation, and simulation together into one responsive system. The larger challenge was balancing scientific accuracy with open-ended play—giving kids enough feedback to understand cause and effect without telling them exactly what to discover.
States of Matter launched as part of Tinybop’s Explorer’s Library and was designed for a global audience across multiple platforms.
timeline
2019
Role
Lead Designer
Platforms & Distribution
iOS · Tinybop Schools
TECHNICAL CONTEXT
Unity-based development
focus
Product Design
UX/UI
Illustration
Creative Direction
recognition
2020
American Library Association
ALSC Excellence in Early Learning Digital Media — Honor
Collaborators
Robert Blackwood, Engineering
Raul Gutierrez, Product
Eden Wall, Education
Beckie Choe, Motion graphics