LearnQM

I design and develop interactive visualizations to help students learn the quantum mechanics behind semiconductors.

Product

Desktop

Product

Desktop

Product

Desktop

Skills

Interaction Design Ideation + Visualization Prototyping Web Design + Development

Skills

Interaction Design Ideation + Visualization Prototyping Web Design + Development

Skills

Interaction Design Ideation + Visualization Prototyping Web Design + Development

Role

Designer + Developer

Role

Designer + Developer

Role

Designer + Developer

Context

LearnQM provides educational tools to help students intuitively learn the quantum mechanics concepts behind semiconductors.

Problem

Quantum Mechanics and Semiconductor Physics are the foundations taught in core science and engineering courses. Educators face challenges in teaching the abstract, counter-intuitive concepts. Courses often emphasize mathematical rather than conceptual understanding. As a result, students often struggle to develop robust mental models and intuitive grasp of the concepts.

Challenge

How might we create interactive visualizations that teach complex concepts in an intuitive way?

Specific Goals

  • Create easy to understand yet accurate visual representations of the concepts.

  • Use interactive controls to allow students to test different parameters in the physics simulation and see cause and effect relationships.

Research

Before starting to make my own chapters, I wanted to think what do students think of existing chapters. Are there any frustrations or pain points along the way? I coded findings from interviews using an affinity map to group them into themes.

Key Insights

Based on the key insights I found from the interviews, I created design principles to guide the work.

Colors play a big role in grouping conceptual groups (such as positive and negative charges).

Ensure colors are accessible to visually impaired and does not detract from understanding.

Users are overwhelmed when presented too much information and call to action at once.

Limit the amount of information and possible interaction introduced per scene.

A student might get more reward out of figuring out information rather than being directly told.

Encourage users to experiment with visualizations to develop their own understanding.

Design Process

Conceptualizing the designs involved:

  • Learning the topic

  • Sketching designs

  • Wireframing the visual representation and different interactions that the students can take

  • Making prototypes using p5.js (a visual programming language)

  • Conducting user testing

  • Iteration through both design and development


Due to the unpredictable nature of trying to simulate physics, often times we run into issues after coding is well-under way. What helps is to ask a lot of questions around the technical constraints as well as pushing back on requirements to balance them with the user experience.

Because of the heavy reliance on colors in the visualizations, it's important to run tests on the color accessibility as well as consider the contrast of shape sizes and strokes.

Final Products

After testing and refining the concepts, I code the visualizations using JavaScript and P5.js. The visualizations include interactions where students can change parameters to see how they affect outcomes. Each chapter includes multiple scenes that progressively adds new parts of a concept.

Website Redesign

I developed a new brand guide, redesigned and developed the website to bring more visual cohesion.

Wireframe

Styleguide

Custom Illustrations

Final mockups

Through this project, I’m reminded of the importance of UX in all kinds of domains, especially education. Through applying user research, we can actually see where students are struggling and find solutions that help them to learn in more holistic and intuitive ways.