I designed the Contextual Measure Tool to enable accurate measurements in 3D optical setups, including measuring distances, angles, dimensions, and managing complex measurement data.
UX UI includes:
Context-sensitive selection
Context-specific feedback
Layers management
Don't let its minimalist design fool you—this tool is packed with features that redefine precision and efficiency.
3DOptix is a physics simulation web app in the field of optics and light. It's made for physics professionals, optical designers, students, and anyone that's into cool optics experiments.
I had the pleasure to work at 3DOptix as the sole and first inhouse designer, and I designed dozens of unique tools and features for the program.
A web app for simulating light and optics
Design optical setups in 3D space with digital twins of real optical elements
SaaS that's both B2C and B2B and B2A (A for Academia ;)
Optical engineers
Physicists
Commercial research labs
Academia: Students, labs, educators
Like every design project, also this one started with me asking lots of questions in order to figure out the initial requirements:
After I had the initial and very long list of requirements, I continued my research by reviewing the measure tools of 3D/CAD programs like Blender, 3DsMax, Onshape and Fusion and creating heuristic evaluations of all the related task flows I could identify.
I also took inspiration from the layer functionality of 2D Design tools like Adobe Illustrator for my measure layers design.
Early wireframes with the tool panel and workspace with all interface elements - promising but too complex
My early wireframes show the most important interface elements already well organised in the new layered tool panel and in the workspace.
The Information Architecture makes sense.
They also revealed a need for simplification. I had to find a way to remove “Sticky” and “Select Subobject” toggle switches by baking them into the contextual tool behavior.
“Optical Distances” was deprioritized by the PM.
Out of scope: Optical distance calculations needed to be deprioritized
The 3DOptix work space with the Measure Tool
Activating the Measure Tool enables contextual selection of measure points inside the optical design 3D setup. In order to create a measurement, users must hover until they find the correct measure point (that gets activated on hover), and click to create a Measure Marker.
Measure Markers appear in the tool panel inside the targeted layer.
Interface Elements
The First Measurement
The tool opens with an empty Layer 01 targeted by default. Layers are necessary in order to keep the complex measurement data organized and perform calculations inside them.
Interface Evolution
In order to allow the correct contextual behavior of the tool, I had the tool initially split into 2 modes, Distances and Dimensions. Later we found a way to manage with one single mode, but I believe this temporary separation helped me in figuring out many of the functions of this complex tool.
In the beginning my PM wanted the option to turn off Layers in order to enable quick and more uncomplicated measurements. Further testing revealed that the interface clutter and added mental effort is not worth it and I removed the toggle.
Tool panel with and without Measure Layers toggle and without Mode selector
Tool panel with and without Measurement type descriptions
With the help of my list of requirements and collaboration with the physicists I first created task flows and then interactive prototypes for each one. Below you can watch a video with all of them in Figma (running at x4 speed, in real time it would be 10 min long).
Video of all the interactive prototypes at x4 speed
(might need to load a few sec before playing)
Soon the MVP was ready.
With some experimentation, the developer managed to remove the need for the two modes (Distances and Dimensions) by activating both distance measure points and potential dimensional selections on hover contextually in one modeless interface, which is great. Less is more!
Layers and many of the other required functionalities of the tool are still missing and might be implemented in the future. If not, then I hope Parettos law applies and we have satisfied 80% of the need with 20% of the effort.
The MVP
The MVP in action - straight forward measuring
I'm happy you made it here! 📐😊
This was one of my first big projects at 3DOptix and a good one at that: The subject matter was relatable enough for me as a non-physicist to warm up on. It was also a significant learning experience. Balancing technical requirements with user experience was rewarding, fun and just challenging enough.
This project reinforced for me the importance of collaborating closely with development already in the early stages of design. We could have removed the need for modes earlier in the process…
Thanks for reading! 🎉
