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

Timeline

August 2023 - Current

Timeline

August 2023 - Current

Timeline

August 2023 - Current

Team

Research Adivsor - Azad Naeemi

Team

Research Adivsor - Azad Naeemi

Team

Research Adivsor - Azad Naeemi

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.

Redesign the website to be a more cohesive experience.

Create a scalable design system for future team members.

Research

We conducted interviews with the users that asked them to speak aloud their thought process while using the product. The data from the interviews was analyzed using an affinity map. User flow maps and personas were created to empathize with users and their mindsets and pain-points.

Insights

Colors play a big role in grouping conceptual groups.

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

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.

Process

Conceptualizing the designs involved:

  • Sketching designs

  • Making prototypes of the interactions

  • Conducting user testing of the visualizations

  • Iteration through both design and development

Final Product

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’ve come to realize 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.