MoleculeBuilder
Web Application Design
Turned my own chemistry textbook frustrations into Abeka's first interactive chemistry tool—an 8-point snapping system that teaches molecular structure through intuitive, magnetic atom connections.
Role
UX/UI Designer
Developer
Timeline
September - October 2025
Skills
Interaction Design
Visual Design
Prototyping
Tools
Figma
HTML
CSS
JavaScript
The Problem I Remembered
I can still picture myself as a student, staring at a chemistry textbook, completely lost trying to figure out how atoms connect to form compounds. The diagrams were static, the rules felt arbitrary, and naming structures seemed like dark magic.
Years later, during a professional development project at Abeka, I was exploring opportunities to expand our product offerings. As I reviewed our catalog, I realized something: we had no chemistry learning aids at all. That old frustration came flooding back, and suddenly, I had my project.
Starting from Scratch
Market research confirmed what I suspected: tools like this simply didn't exist. Great for Abeka's market position, but terrifying as a designer. I had no reference points, no patterns to follow, and frankly, my chemistry knowledge hadn't improved much since high school.
I broke down the problem into three essential questions:
01
Connections
How do we connect atoms?
02
Covalent Bonds
How do we create different types of bonds?
03
Naming
How do we automatically name what we've built?
Teaching Atoms to Snap
The first challenge was the trickiest, atoms aren't just puzzle pieces that fit anywhere. They have rules: valence electrons dictate how many connections they can make, and orbitals determine where those connections happen.
Solution: An 8-point snapping system, placing connection points at "cardinal positions" around each atom like coordinates on a compass.
Solving the Bond Problem
With atoms connecting smoothly, I hit my second challenge: covalent bonds. Atoms connect with a single bond by default, but what about double or triple bonds?
Solution: Click any two connected atoms, and two small buttons appear on either side of their bond. Single, double, or triple, right there at your fingertips.
The Magic of Automatic Naming
The final piece was the naming system, and here's where the 8-point system proved its worth. Because every atom was positioned at specific cardinal points, my code could "read" the structure like a map, checking atoms, orbitals, and bonds to identify what compound the student had created.
Solution: A floating label that displays the compound name in real-time as you build.
An Unexpected Gift
The 8-point cardinal system had one more surprise in store.
When I started building a template library for commonly used structures, things like benzene rings or functional groups that students use repeatedlyl, I discovered the system had made itself remarkably scalable. I could create each template as a simple JSON object: specify which atoms connect at N, SE, or SW positions, define their bond types, and done.
What could have been a complex templating system became almost trivial. The architectural decision I'd made for intuitive interaction had accidentally built me a robust data structure.
What It Became
From a personal struggle with chemistry textbooks to Abeka's first interactive chemistry tool, this project proved that the best educational experiences come from remembering what it felt like not to understand.
The 8-point system became a foundation we could build on, and more importantly, it transformed abstract molecular concepts into something students could see, touch, and finally understand.
