"Materia"

Bridging Materials Science and Interactive UX

Scope:

Students learn faster when abstract atomic structures become manipulative, interactive experiences. In this section we explore materials structures through interaction.

Structure

Properties

Processing

Characterization

Core material science concept layout

Structure

Problem:

Students struggle to visualize atomic and crystalline structures from static textbooks.

High school and early college learners consistently misinterpret bonding models, lattice structures, and defects because textbook visuals are static and abstract.

Static textbook visuals lack spatial clarity.

The issue wasn’t a lack of information, it was a lack of interaction.

Design Constraints

Scientific accuracy cannot be sacrificed for visual appeal.

  • Must preserve correct atomic geometry and lattice structure

  • Should not oversimplify chemistry concepts

  • Needs to support multiple difficulty levels

  • Must be usable on mobile and desktop

  • Must function without teacher supervision

Based on the above design constraints, the following key decisions were made.

Key Decision 1: Interaction Model of a Metal Atom

Replace static diagrams with manipulable 3D clusters for intuitive understanding.

Students learn structures faster when they can rotate, zoom, and explore atoms freely. Interactive clusters preserve accuracy while giving students control over the visualization.

"Rotate & Zoom" to explore lattice models

Students can rotate and visualize clusters to compare lattice types directly a) HCP lattice model b) BCC lattice

Key Decision 2: Cognitive Load Reduction to Explore Defect States

Staged reveal prevents overwhelming students.

Instead of showing all data at once, information is revealed progressively:

  • Lattice type

  • Coordination number

  • Defects and substitutions

  • Formula and math context

Base

Vacancy

Substitution

Interstitial

"Click" to Explore defect states

Face-centered-cubic (FCC) metal lattice defect states a) Vacancy, b) Substitution, c) Interstitial

Key Decision 3: Aesthetics that Support Learning

Motion, color, and lighting tuned for clarity, not decoration.

Soft gradients, subtle lighting, and gentle motion differentiate elements without distracting students. Color coding highlights bonds and lattice structures, supporting learning.

Visuals designed for clarity, engagement, and retention.

Solution

A clear, interactive learning tool for materials science.

The final design combines scientific accuracy with interactive UX to help students understand atomic and lattice structures intuitively.

Outcome

Students achieved deeper understanding through interaction.

  • Improved grasp of metal crystal lattice structures- e.g FCC, BCC, and HCP stacking differences

  • Higher engagement than with static diagrams

  • Increased confidence in identifying coordination numbers

  • Teachers report fewer misconceptions

Reflection

Blending scientific accuracy with UX clarity.

This project taught me how to design interfaces that preserve rigorous scientific concepts while making them intuitive and interactive for learners.