Designing an interactive quantum learning app
Designing an interactive quantum learning app
Won 1st place among 40 participants across 5 universities for designing an interactive app that makes neutral-atom quantum computing more understandable
Won 1st place among 40 participants across 5 universities for designing an interactive app that makes neutral-atom quantum computing more understandable
ROLE
Sole Product Designer
ROLE
Sole Product Designer
TIMELINE
1 Day (Creative Hackathon)
TIMELINE
1 Day (Creative Hackathon)
TEAM
1 Engineer, 1 Designer
TEAM
1 Engineer, 1 Designer
RESPONSIBILITY
Lead UI/UX Design, Interaction, Visual Design
RESPONSIBILITY
Lead UI/UX Design, Interaction, Visual Design
Overview
Overview
Making neutral-atom quantum computing more understandable through interactive design. This project explores how interactive visualization can help non-experts understand the core principles behind neutral-atom quantum computing.
Developed during the Quantum Creative Hackathon, the project resulted in an interactive learning prototype that translates complex quantum processes into intuitive visual interactions. As the sole designer, I led the UI/UX and interaction design, developing a visual system that balances scientific accuracy with clarity for non-expert audiences.
Making neutral-atom quantum computing more understandable through interactive design. This project explores how interactive visualization can help non-experts understand the core principles behind neutral-atom quantum computing.
Developed during the Quantum Creative Hackathon, the project resulted in an interactive learning prototype that translates complex quantum processes into intuitive visual interactions. As the sole designer, I led the UI/UX and interaction design, developing a visual system that balances scientific accuracy with clarity for non-expert audiences.
PROBLEM FRAMING
Why quantum computing is difficult to understand
Why quantum computing is difficult to understand
Quantum computing concepts are often communicated through highly technical diagrams and dense explanations.
Quantum computing concepts are often communicated through highly technical diagrams and dense explanations.
For most learners, this creates two barriers:
For most learners, this creates two barriers:
How users currently track health habits
Abstract concepts that are difficult to visualize
Educational materials designed primarily for researchers
How users currently track health habits
Abstract concepts that are difficult to visualize
Educational materials designed primarily for researchers
As a result, many people struggle to build an intuitive mental model of how quantum systems behave.
As a result, many people struggle to build an intuitive mental model of how quantum systems behave.
Key Design Question
Key Design Question
"How might we translate complex quantum processes into interactive experiences that make abstract concepts easier to understand?"
2.RESEARCH
Understanding the learning challenge
Understanding the learning challenge
Initial research focused on how quantum computing is typically explained.
Initial research focused on how quantum computing is typically explained.
We examined:
We examined:
Academic diagrams and visualizations
Educational videos and resources
Existing quantum learning tools
Academic diagrams and visualizations
Educational videos and resources
Existing quantum learning tools
The goal was to understand where learners struggle most when encountering quantum concepts for the first time.
The goal was to understand where learners struggle most when encountering quantum concepts for the first time.
3.SYNTHESIS
Patterns in existing explanations
Patterns in existing explanations
Three patterns emerged:
Three patterns emerged:
Highly abstract visualizations
Highly abstract visualizations
Most diagrams assume prior knowledge and fail to build intuition.
Most diagrams assume prior knowledge and fail to build intuition.
Heavy reliance on mathematical explanations
Heavy reliance on mathematical explanations
Concepts are often explained through equations rather than visual models.
Concepts are often explained through equations rather than visual models.
Limited interaction
Limited interaction
Most learning materials remain static, making exploration difficult.
Most learning materials remain static, making exploration difficult.
These findings suggested that interactive visualization could help bridge the gap between theory and intuition.
These findings suggested that interactive visualization could help bridge the gap between theory and intuition.
4.PROCESS
Designing for intuition rather than accuracy alone
Designing for intuition rather than accuracy alone
Instead of replicating scientific diagrams, the concept focused on building visual metaphors that support exploration and discovery. The goal was to create an experience where users could interact with quantum behaviors rather than simply read about them.
Instead of replicating scientific diagrams, the concept focused on building visual metaphors that support exploration and discovery. The goal was to create an experience where users could interact with quantum behaviors rather than simply read about them.
Translating research into interaction concepts
Translating research into interaction concepts
After identifying key learning barriers, I explored how quantum concepts could be translated into intuitive interactions rather than static diagrams. Initial brainstorming focused on mapping abstract quantum processes into visual metaphors that could support exploration and discovery.
After identifying key learning barriers, I explored how quantum concepts could be translated into intuitive interactions rather than static diagrams. Initial brainstorming focused on mapping abstract quantum processes into visual metaphors that could support exploration and discovery.
Key elements included:
Key elements included:
Color-coded states to represent quantum transitions
Motion-based interactions to illustrate system behavior
Progressive disclosure to introduce complexity gradually
Color-coded states to represent quantum transitions
Motion-based interactions to illustrate system behavior
Progressive disclosure to introduce complexity gradually
Insights from the research were organized into clusters to identify recurring challenges in how quantum concepts are typically explained. These themes helped guide the design direction toward interaction-driven learning rather than traditional diagram-based explanations.
Insights from the research were organized into clusters to identify recurring challenges in how quantum concepts are typically explained. These themes helped guide the design direction toward interaction-driven learning rather than traditional diagram-based explanations.
5.FINAL OUTCOME
An interactive system for learning quantum concepts
An interactive system for learning quantum concepts
The final prototype presents quantum computing concepts through an interactive visual interface designed for exploration. Instead of presenting dense diagrams or mathematical explanations, the system allows users to manipulate visual elements and observe how quantum states change in response.
The final prototype presents quantum computing concepts through an interactive visual interface designed for exploration. Instead of presenting dense diagrams or mathematical explanations, the system allows users to manipulate visual elements and observe how quantum states change in response.
Neutral Atoms
Neutral Atoms
This stage introduces Rubidium (Rb) as the core building block.
Simple orbital visuals ground the user in the physical foundation before interaction begins.
This stage introduces Rubidium (Rb) as the core building block.
Simple orbital visuals ground the user in the physical foundation before interaction begins.
Doppler Cooling
Doppler Cooling
Atoms initially move too fast to control at room temperature.
Laser beams are visualized as directional forces that reduce motion and prepare atoms for trapping.
Atoms initially move too fast to control at room temperature.
Laser beams are visualized as directional forces that reduce motion and prepare atoms for trapping.
Optical Trapping
Optical Trapping
Focused lasers create optical traps that hold atoms in stable positions.
The interface shows how scattered particles become organized and controllable.
Focused lasers create optical traps that hold atoms in stable positions.
The interface shows how scattered particles become organized and controllable.
Initialization & Rearrangement
Initialization & Rearrangement
Atoms are rearranged into the configuration required for computation.
Visual state changes help users track preparation before operations begin.
Atoms are rearranged into the configuration required for computation.
Visual state changes help users track preparation before operations begin.
Computation
Computation
Targeted laser pulses manipulate selected atoms to perform quantum operations.
Subtle motion and color cues guide attention to active qubits.
Targeted laser pulses manipulate selected atoms to perform quantum operations.
Subtle motion and color cues guide attention to active qubits.
Measurement
Measurement
Measurement collapses quantum states into observable binary outcomes.
The final visualization bridges physical atomic behavior and readable computational results.
Measurement collapses quantum states into observable binary outcomes.
The final visualization bridges physical atomic behavior and readable computational results.
Key outcomes include:
Key outcomes include:
An interactive interface that visualizes quantum behaviors through motion and color
Progressive interactions that gradually introduce complexity
A visual system designed to reduce cognitive load while preserving scientific meaning
An interactive interface that visualizes quantum behaviors through motion and color
Progressive interactions that gradually introduce complexity
A visual system designed to reduce cognitive load while preserving scientific meaning
This approach helps users build an intuitive understanding of quantum systems by experiencing cause-and-effect relationships through interaction.
This approach helps users build an intuitive understanding of quantum systems by experiencing cause-and-effect relationships through interaction.
6.REFLECTION
What I learned
What I learned
Design as Translation
This hackathon clarified my interest in the designer’s role as a translator between complex technologies and human understanding. I realized that clarity is not simplification, but intentional framing.
Clarity Under Constraints
Working within a one-day constraint emphasized the importance of decisive choices and strong metaphors. Time pressure forced me to prioritize interaction-first thinking over visual polish.
Make Complexity Approachable
The experience strengthened my motivation to build educational products that make complex systems feel accessible without oversimplifying them. Good design preserves depth while lowering cognitive barriers.
Grateful for the teamwork
Grateful for the teamwork
Coming into this project, I had little prior knowledge of quantum computing. Over the course of a week, I immersed myself in learning the fundamentals while collaborating closely with engineering phd who specialize in the field.
Working alongside domain experts pushed me to quickly translate complex scientific ideas into intuitive visual interactions. Despite the tight timeline and moments of uncertainty, the process was incredibly rewarding. Presenting and discussing our work was especially exciting, and I’m grateful for the opportunity to learn from such a multidisciplinary team.
Winning 1st place was an unexpected but meaningful outcome that reinforced the value of collaboration between design and science. The experience showed me how much I enjoy translating complex and abstract scientific concepts into visual interactions that make them clearer and more approachable. It also strengthened my interest in designing products that help people understand and learn new ideas.
Coming into this project, I had little prior knowledge of quantum computing. Over the course of a week, I immersed myself in learning the fundamentals while collaborating closely with engineering phd who specialize in the field.
Working alongside domain experts pushed me to quickly translate complex scientific ideas into intuitive visual interactions. Despite the tight timeline and moments of uncertainty, the process was incredibly rewarding. Presenting and discussing our work was especially exciting, and I’m grateful for the opportunity to learn from such a multidisciplinary team.
Winning 1st place was an unexpected but meaningful outcome that reinforced the value of collaboration between design and science. The experience showed me how much I enjoy translating complex and abstract scientific concepts into visual interactions that make them clearer and more approachable. It also strengthened my interest in designing products that help people understand and learn new ideas.
