ROLE
Sole Product Designer
TIMELINE
1 Day (Creative Hackathon)
TEAM
1 Engineer, 1 Designer
RESPONSIBILITY
Lead UI/UX Design, Interaction, Visual Design
ROLE
Sole Product Designer
TEAM
1 Engineer, 1 Designer
TIMELINE
1 Day (Creative Hackathon)
RESPONSIBILITY
Lead UI/UX Design, Interaction, Visual Design
✶ CONTEXT
✶ CONTEXT
This project is the 1st-place winning prototype from the Quantum Creators Con, an educational app designed to make learning about quantum computing intuitive and engaging. Created after a 5-day series of seminars followed by a one-day hackathon.
This project is the 1st-place winning prototype from the Quantum Creators Con, an educational app designed to make learning about quantum computing intuitive and engaging. Created after a 5-day series of seminars followed by a one-day hackathon.
✶ OVERVIEW
✶ OVERVIEW
This project is the 1st-place winning prototype from the Quantum Creators Con, an educational app designed to make learning about quantum computing intuitive and engaging.
The core idea is that true understanding comes not from active, playful interaction. The app translates the complex workflow of QuEra’s neutral-atom computers into a visual, game-like experience.
This project is the 1st-place winning prototype from the Quantum Creators Con, an educational app designed to make learning about quantum computing intuitive and engaging.
The core idea is that true understanding comes not from active, playful interaction. The app translates the complex workflow of QuEra’s neutral-atom computers into a visual, game-like experience.
✶ CHALLENGE
CHALLENGE
Quantum computing is challenging not only because of its complexity, but because it is often presented in ways that raise the barrier to entry.
Quantum computing is challenging not only because of its complexity, but because it is often presented in ways that raise the barrier to entry.
Early design ideas relied too heavily on scientific diagrams, which increased cognitive load and made the experience feel inaccessible. The core challenge was to represent abstract concepts accurately, while keeping them immediately understandable to non-experts.
Early design ideas relied too heavily on scientific diagrams, which increased cognitive load and made the experience feel inaccessible. The core challenge was to represent abstract concepts accurately, while keeping them immediately understandable to non-experts.
✶ SOLUTION
SOLUTION
Reframed the learning experience around playful, guided interaction.
Reframed the learning experience around playful, guided interaction.
Instead of static diagrams, the app uses animated visuals, simple metaphors, and a clear interaction sequence that allows users to engage with quantum concepts step by step.
This approach reduces intimidation, encourages exploration, and helps users build intuition through doing rather than passive reading.
Instead of static diagrams, the app uses animated visuals, simple metaphors, and a clear interaction sequence that allows users to engage with quantum concepts step by step.
This approach reduces intimidation, encourages exploration, and helps users build intuition through doing rather than passive reading.
✶ PROCESS
✶ PROCESS
Brainstorm
Early design ideas relied too heavily on scientific diagrams, which increased cognitive load and made the experience feel inaccessible. The core challenge was to represent abstract concepts accurately, while keeping them immediately understandable to non-experts.
Early design ideas relied too heavily on scientific diagrams, which increased cognitive load and made the experience feel inaccessible. The core challenge was to represent abstract concepts accurately, while keeping them immediately understandable to non-experts.
Engineering student explained the core concepts, and I designed the visuals and motion to simplify the process.
✶ DESIGN SYSTEM
✶ DESIGN SYSTEM
Building a Visual Language for Quantum Computing
Building a Visual Language for Quantum Computing
To make abstract quantum processes feel intuitive, I developed a cohesive visual system grounded in clarity, hierarchy, and motion. Each color, type scale, and component was designed to reduce cognitive load while preserving scientific accuracy.
To make abstract quantum processes feel intuitive, I developed a cohesive visual system grounded in clarity, hierarchy, and motion. Each color, type scale, and component was designed to reduce cognitive load while preserving scientific accuracy.
✶ OUTCOME
All visual graphics and interactions in this project were designed and prototyped in Figma. Translated QuEra’s quantum computing processes into intuitive visual metaphors, informed by technical explanations from a PhD candidate in engineering.
1) 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.
2) 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.
3) Optical Trapping
Focused lasers create optical traps that hold atoms in stable positions.
The interface shows how scattered particles become organized and controllable.
4) Initialization & Rearrangement
Atoms are rearranged into the configuration required for computation.
Visual state changes help users track preparation before operations begin.
5) Computation
Targeted laser pulses manipulate selected atoms to perform quantum operations.
Subtle motion and color cues guide attention to active qubits.
6) Measurement
Measurement collapses quantum states into observable binary outcomes.
The final visualization bridges physical atomic behavior and readable computational results.
✶ OUTCOME
All visual graphics and interactions in this project were designed and prototyped in Figma. Translated QuEra’s quantum computing processes into intuitive visual metaphors, informed by technical explanations from a PhD candidate in engineering.
1) 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.
2) 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.
3) Optical Trapping
Focused lasers create optical traps that hold atoms in stable positions.
The interface shows how scattered particles become organized and controllable.
4) Initialization & Rearrangement
Atoms are rearranged into the configuration required for computation.
Visual state changes help users track preparation before operations begin.
5) Computation
Targeted laser pulses manipulate selected atoms to perform quantum operations.
Subtle motion and color cues guide attention to active qubits.
6) Measurement
Measurement collapses quantum states into observable binary outcomes.
The final visualization bridges physical atomic behavior and readable computational results.
✶ 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.
