Daniela Ben Hanoch

Home

Work

About Me

Resume

Daniela Ben Hanoch

Work

About Me

Resume

Daniela Ben Hanoch

Work

About Me

Resume

👀

Overview

3DOptix and Me

Discovery and Research

Foundational Explorations

The User Interface

Designing
Science and CAD tools

Three out of many...
for a Physics Simulation Web App

Designing
Science and CAD tools

Three out of many...

Designing
Science and CAD tools

Three out of many...
for a Physics Simulation Web App

3DOptix is a physics simulation web app in the field of optics and light. Its 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. This is a small selection of the most interesting ones.

The Measure Tool

Problem: Users had no way to measure anything in their optical setups!

Optical designers building their optical setups in 3DOptix needed a tool for measuring distances and dimensions in their designs. I was tasked with conceptualizing and designing a tool for that.

What will the Measure Tool do?

Measure, record and clearly organize measurements of all distances, angles and dimensions of an optical design and ensure the perfect alignment of the light paths in the setup in order to create an optimal image quality outcome. (For example in telescope designs, microscope designs, camera objective designs etc…)

3D Optix with the Measure Tool

The Polarization Analyzer

Problem: Users had no way to measure and analyzepolarization in their optical setups

In order to understand the behaviour of the light in an optical setup, optical designers need to measure and analyze polarization. I conceptualized and designed a tool for that.

What does the Polarization Analyzer do?

Enables users to precisely analyze and capture the polarization state of any point along a simulated light beam (Necessary for optimizing optical designs and ensuring accurate polarization control in order to enhancing the performance of complex optical systems.)

The Polarization Analyzer in action

The Advanced Screen Source

Problem: Users need more sophisticated light sources than the current simple lasers

Previously, 3DOptix only had a simple system of lasers as sources of light for optical designers to use in their setups, and no screen objects. I was tasked to design the UX UI for a system that can be used to create any custom light source or screen an optical designer can think of.

What does the Advanced Screen Source do?

Enables users to simulate a lightsource using a screen where every pixel can to be fine-tuned to emit light at a different wavelength, intensity and other attributes, thus enabling the creation of any type of exotic light source imaginable.

Configuring an Advanced Screen Source

3DOptix and Me

The 3DOptix Software

The only cloud based 3D optics and laser simulation software in the world
Contains catalog with thousands of CAD objects that mirror real world optical and optomechanical products
Allows scientists and engineers to create and simulate realistic 3D setups of their designs, visualize and refine their work before moving into physical production

The only cloud based 3D optics and laser simulation software in the world
Contains catalog with thousands of CAD objects that mirror real world optical and optomechanical products
Allows scientists and engineers to create and simulate realistic 3D setups of their designs, visualize and refine their work before moving into physical production

3DOptix Users

Optical engineers
Physicists
Research scientists and labs
Academics, students, labs and educators

Optical engineers
Physicists
Research scientists and labs
Academics, students, labs and educators

My Role and Process at 3DOptix

Collaborate closely with stakeholders (physicists and scientists that were also the CEO and founders at 3DOptix) to clarify feature requirements
Getting very good support from a great team, that was always willing and able to answer my many questions

Perform research and heuristic evaluations
Propose solutions, create detailed user flows and prototypes and iterate on designs through discussions and revisions
Presenting the designs to stakeholders and developers, physicists and other subject matter experts
Deliver interactive Figma prototypes, assets and flow charts to development
Do usability testing and UX reviews on prototypes and dev versions

Collaborate closely with stakeholders (physicists and scientists that were also the CEO and founders at 3DOptix) to clarify feature requirements
Getting very good support from a great team, that was always willing and able to answer my many questions

Perform research and heuristic evaluations
Propose solutions, create detailed user flows and prototypes and iterate on designs through discussions and revisions
Presenting the designs to stakeholders and developers, physicists and other subject matter experts
Deliver interactive Figma prototypes, assets and flow charts to development
Do usability testing and UX reviews on prototypes and dev versions

Duration: 5 Weeks

Measure Tool

Objective: Optical engineers need to ensure that the light paths in their setups are correctly aligned to achieve optimal image quality.

Problem: Misalignment of optical components can cause image distortion or loss of light, affecting the setup's performance.

Solution: Provide users of the 3DOptix platform with a flexible way to measure and record all distances, angles and dimensions of their designs.

Objective: Optical engineers need to ensure that the light paths in their setups are correctly aligned to achieve optimal image quality.

Problem: Misalignment of optical components can cause image distortion or loss of light, affecting the setup's performance.

Solution: Provide users of the 3DOptix platform with a flexible way to measure and record all distances, angles and dimensions of their designs.

Discovery, Definition and Prototype Design

In order to discover the requirements for this tool I interviewed the physicists and engineers at 3DOptix. Many were revealed through an iterative process of designing mock ups and user flows.

Some of the design iterations

Challenges and Solutions

Challenge:

Create a way to accurately measure distances and angles between optical elements in a setup, including sub-objects like faces, edges and vertices

Create a way to accurately measure distances and angles between optical elements in a setup, including sub-objects like faces, edges and vertices

Solution:

Contextual Measure Tool selection modes with mode specific markers and display of selection points according to mouse cursor location. The mode "Distances" is for measuring distances and angles. Any selected entity in this mode will display a distance marker with 3D coordinates. Any two selected entities will have the distances between them displayed, and any three will also have the angles between them displayed.
Angles are displayed with the vertex of the angle as the middle marker in the Measure Tool window

Contextual Measure Tool selection modes with mode specific markers and display of selection points according to mouse cursor location. The mode "Distances" is for measuring distances and angles. Any selected entity in this mode will display a distance marker with 3D coordinates. Any two selected entities will have the distances between them displayed, and any three will also have the angles between them displayed.
Angles are displayed with the vertex of the angle as the middle marker in the Measure Tool window

Challenge:

Create a way to accurately measure the dimensions (area, length, radius, diameter) of optical elements in a setup, including sub-objects like faces and edges

Create a way to accurately measure the dimensions (area, length, radius, diameter) of optical elements in a setup, including sub-objects like faces and edges

Solution:

Contextual Measure Tool selection modes with mode specific markers and display of selection points according to mouse cursor location. The mode "Dimensions" is for measuring areas, radii, lengths and diameters. The measurements displayed for the selected entities will be context dependent (area for surfaces, radii or diameters for circles, lengths for edges)

Contextual Measure Tool selection modes with mode specific markers and display of selection points according to mouse cursor location. The mode "Dimensions" is for measuring areas, radii, lengths and diameters. The measurements displayed for the selected entities will be context dependent (area for surfaces, radii or diameters for circles, lengths for edges)

Challenge:

Create a way to accurately measure the angles between surface normals (average direction of a flat surface)

Create a way to accurately measure the angles between surface normals (average direction of a flat surface)

Solution:

Automatically display the angle measurement between any two selected object faces (surfaces) in Dimensions mode.

Automatically display the angle measurement between any two selected object faces (surfaces) in Dimensions mode.

Challenge:

Enable users to group and save measurements as flexibly as possible.

Enable users to group and save measurements as flexibly as possible.

Solution:

Layers interface with options to create new layers, target layers, change layer visibility, rearrange layers order and measurements order on a layer, open and collapse layers, rename layers and detach and reattach them to the main tool window.

Layers interface with options to create new layers, target layers, change layer visibility, rearrange layers order and measurements order on a layer, open and collapse layers, rename layers and detach and reattach them to the main tool window.

Challenge:

Enable users to select free end points (create markers) for measurements that exist along the length of edges and along the surface of faces of objects.

Enable users to select free end points (create markers) for measurements that exist along the length of edges and along the surface of faces of objects.

Solution:

In Distances mode, hovering on object faces and edges will highlight them and constrain the cursor to the face or the edge and thus enable creating measure markers that lay on them precisely.

In Distances mode, hovering on object faces and edges will highlight them and constrain the cursor to the face or the edge and thus enable creating measure markers that lay on them precisely.

Challenge:

Sometimes the interface can get crowded with too many measure markers so they cover each other and it becomes hard to understand which markers belong to which measures

Sometimes the interface can get crowded with too many measure markers so they cover each other and it becomes hard to understand which markers belong to which measures

Solution:

Move markers independently from their associated objects with Ctr + LMB
Change active marker colors and their associated measurements

Move markers independently from their associated objects with Ctr + LMB
Change active marker colors and their associated measurements

Challenge:

Enable users to move measure markers to exact coordinates in 3D space

Enable users to move measure markers to exact coordinates in 3D space

Solution:

Type marker coordinates directly in the 3D viewport by double clicking on the marker
Type marker coordinates inside the coordinates dropdown under each measurement in the Measure Tool window

Type marker coordinates directly in the 3D viewport by double clicking on the marker
Type marker coordinates inside the coordinates dropdown under each measurement in the Measure Tool window

Challenge:

Enable users to quickly measure something without saving the measurement

Enable users to quickly measure something without saving the measurement

Solution:

Switch off "Measure Layers" and the tool becomes a Quick Measures tool that contains no layers and saves nothing.

Switch off "Measure Layers" and the tool becomes a Quick Measures tool that contains no layers and saves nothing.

Challenge:

Add an option to display the sum of a selected set of distance measurements in order to measure the total optical path lengths

Add an option to display the sum of a selected set of distance measurements in order to measure the total optical path lengths

Solution:

Add the option to display the TOTR (Total Optical Transmission and Reflection) for some or all layers. Users can then put each set of measurements on a separate layer and get a dynamic display of the TOTR for each.

Add the option to display the TOTR (Total Optical Transmission and Reflection) for some or all layers. Users can then put each set of measurements on a separate layer and get a dynamic display of the TOTR for each.

Group Actions

One of the requirements that came up very early in the process was the need for organizing measurements, so specific groups of them can be made visible/ invisible, saved for later and exported.

For this I took inspiration from Adobe Illustrator’s layers feature, specifically the “targeting” functionality. Only when a layer is “targeted” (the blue radio button clicked) will a taken measure land on this layer. This allows for the flexibility of performing different actions on all layers while only having one of them “targeted”

One of the requirements that came up very early in the process was the need for organizing measurements, so specific groups of them can be made visible/ invisible, saved for later and exported.

Distances and Dimensions

Since the same tool is required to measure distances between objects as well as dimensions of objects, and since these two require very different actions by the user, I had to think of a way to differentiate between them.

The solution is having two different modes that users can switch between on the modes bar, and that use differently shaped measure markers (distances: diamond shape, dimensions: square shape) both inside the viewport window and the Measure Tool window.

Full version vs. MVP

With such a long list of requirements, the tool was about to become quite complex. We decided that I will design a full version of the tool first, and then prioritize for development phases. For example the layers functionality is not absolutely necessary for the measure tool to be useful.

Full Version

That answers all requirements

MVP

The first useful version that the developer developed (left) and my redesign of it (right). We decided to make this the MVP.

The MVP in Action - Screen Recording

Success Metrics to Measure

Feature usage frequency: Measures how often users engage with the Measure Tool, showing its perceived value and necessity.

Interaction with specific functions: Tracks usage of core functions like measuring distances, angles, and dimensions to understand which features users find most helpful.
User accuracy and error rate: Monitors if the tool helps users align optical components correctly by reducing errors or misalignments.
Time spent using the Measure Tool: Indicates whether the tool improves workflow efficiency or requires too much effort to operate.
Retention rate on complex measurement tasks: Tracks if users consistently use the tool for advanced tasks, such as managing layers or applying edge constraints, indicating trust in its reliability.

Feature usage frequency: Measures how often users engage with the Measure Tool, showing its perceived value and necessity.

Interaction with specific functions: Tracks usage of core functions like measuring distances, angles, and dimensions to understand which features users find most helpful.
User accuracy and error rate: Monitors if the tool helps users align optical components correctly by reducing errors or misalignments.
Time spent using the Measure Tool: Indicates whether the tool improves workflow efficiency or requires too much effort to operate.
Retention rate on complex measurement tasks: Tracks if users consistently use the tool for advanced tasks, such as managing layers or applying edge constraints, indicating trust in its reliability.

Duration: 2 weeks

Polarization Analyzer

Duration: 2 weeks

Polarization Analyzer

Duration: 2 weeks

Polarization Analyzer

Main objective: Improve the 3DOptix app's usability by creating a tool that will allow users to collect and save information about the polarization state of any point on any ray of any simulated light beam.

The Tool

Versions

At my first try at this, I created a special mode, called Ray View, that contains the Polarization Analyzer plus additional information about the ray.

After further considerations we decided against the full mode and for a creating a tool instead - here is a screenshot of a medium fidelity prototype of the Polarization Tool

After further considerations we decided to simplify and create a free standing dedicated Polarization Analyzer tool, the final design can be seen below.

Challenges and Solutions

Challenge:

Users need a flexible method to mix and match between picking rays across multiple light sources and picking points on these rays. The picked rays and points need to be organized in an interface that allows users to see and compare their properties clearly and be saved with the file.

Users need a flexible method to mix and match between picking rays across multiple light sources and picking points on these rays. The picked rays and points need to be organized in an interface that allows users to see and compare their properties clearly and be saved with the file.

Solution:

Pick ray in scene mode is active for picking rays, until and unless the "Press to pick a point on Ray" button is pressed and becomes active and changes into "Pick a point on ray", which turns on point picking mode and deactivates ray picking mode
Picking rays create new ray tabs and picking points on rays create new point tabs inside their respective ray tabs

Pick ray in scene mode is active for picking rays, until and unless the "Press to pick a point on Ray" button is pressed and becomes active and changes into "Pick a point on ray", which turns on point picking mode and deactivates ray picking mode
Picking rays create new ray tabs and picking points on rays create new point tabs inside their respective ray tabs

Challenge:

Users need a method to change the location of selected points on the ray

Users need a method to change the location of selected points on the ray

Solution:

Option to change the distance of the point from the lightsource by typing it in the text field
Option to change the object from which the distance is measured by picking it in the setup after activating the pick button by deleting the existing distance object from the point tab

Option to change the distance of the point from the lightsource by typing it in the text field
Option to change the object from which the distance is measured by picking it in the setup after activating the pick button by deleting the existing distance object from the point tab

Challenge:

Users need a method to select rays from a map instead of picking them directly in the setup

Users need a method to select rays from a map instead of picking them directly in the setup

Solution:

"Select ray from map" mode that opens a map of all existing rays in the laser beam including coordinate information

"Select ray from map" mode that opens a map of all existing rays in the laser beam including coordinate information

Challenge:

Since the Polarization Analyzer window can contain a large number of rays and points, it sometimes becomes necessary to directly compare points from different rays and see them laid out side by side

Since the Polarization Analyzer window can contain a large number of rays and points, it sometimes becomes necessary to directly compare points from different rays and see them laid out side by side

Solution:

A duplicate button on every point tab that duplicates them into their separate small windows that can be laid out side by side and enlarged/ maximized

A duplicate button on every point tab that duplicates them into their separate small windows that can be laid out side by side and enlarged/ maximized

Challenge:

Sometimes users need to analyze ray points that lay exactly on the point where an optical surface intersects with a ray

Sometimes users need to analyze ray points that lay exactly on the point where an optical surface intersects with a ray

Solution:

Each ray tab has 2 modes: XY mode for picking points on rays directly and PS mode for picking optical parts that lay in the ray's path. The point displayed in a PS mode ray tab will be the points where the picked optical parts intersect with the ray.

Each ray tab has 2 modes: XY mode for picking points on rays directly and PS mode for picking optical parts that lay in the ray's path. The point displayed in a PS mode ray tab will be the points where the picked optical parts intersect with the ray.

Success Metrics to Measure

Analyzer usage rate: Tracks how frequently users engage with the Polarization Analyzer, indicating its importance to their workflow.

Feature interaction rate: Measures user engagement with key functions, such as selecting rays, manipulating points, and duplicating point tabs, to identify which features users find most valuable.
Accuracy in polarization data interpretation: Evaluates if the tool helps users obtain accurate polarization data, essential for optimizing optical setups.
Time to complete polarization analysis: Assesses efficiency by measuring how long it takes users to analyze and capture polarization states, reflecting tool usability.
Retention rate for advanced users: Tracks usage frequency among experienced users who require complex polarization analyses, indicating tool reliability and value for in-depth tasks.

Analyzer usage rate: Tracks how frequently users engage with the Polarization Analyzer, indicating its importance to their workflow.

Feature interaction rate: Measures user engagement with key functions, such as selecting rays, manipulating points, and duplicating point tabs, to identify which features users find most valuable.
Accuracy in polarization data interpretation: Evaluates if the tool helps users obtain accurate polarization data, essential for optimizing optical setups.
Time to complete polarization analysis: Assesses efficiency by measuring how long it takes users to analyze and capture polarization states, reflecting tool usability.
Retention rate for advanced users: Tracks usage frequency among experienced users who require complex polarization analyses, indicating tool reliability and value for in-depth tasks.

Duration: 4 weeks

Advanced Screen Source System

Duration: 4 weeks

Advanced Screen Source System

Duration: 4 weeks

Advanced Screen Source System

What is a Screen Source?

The current 3DOptix system only supports light sources emitting the same wavelength across their entire surface. A screen source is a new kind of light source that simulates a screen where every pixel can to be fine-tuned to emit light at a different wavelength, intensity and other attributes. It can be used to either simulate any type of screen or any kind of exotic light source, depending on the configuration.

This is a very complex feature and I will only talk about a few select aspects of it.

Main Objectives

Enhance the existing 3DOptix platform to support special light sources, “Screen Sources”, capable of emitting different spectra from each pixel, which has applications in advanced imaging, space technology, modern weapon defense systems, and medical devices, while keeping in mind the ongoing development nature of this and similar features, and design accordingly.

Requirements

The instructions for the feature that I received from the physicist:

After a meeting to discuss we decided on these requirements for the project:

Create databases for screen sources, spectra and spectrum collections and connect them to the configuration flow of the light source
Design the Advanced Screen Source configuration window
Design the windows and flows for configuring spectra and spectra collections
Connect all of the above but keep all databases flexible and separate so they can easily be integrated with other new light sources later

After a meeting to discuss we decided on these requirements for the project:

Create databases for screen sources, spectra and spectrum collections and connect them to the configuration flow of the light source
Design the Advanced Screen Source configuration window
Design the windows and flows for configuring spectra and spectra collections
Connect all of the above but keep all databases flexible and separate so they can easily be integrated with other new light sources later

Settings

This is the central configuration window for the new Screen Sources.

It is using a window layout that already exists in 3DOptix and that I had to use, but the UI patterns under Wavelength information are new designs added by me.

Users can decide to either create their own spectrum collection (group of colors in layman's terms) or upload one from the database.

There is a default Spectral map that comes with every new screen source, (users can download it for later use or reference with the download button next to it). But users will usually delete the default one and upload their own.

Under Source ray intensity pattern, users can either input constant values for the entire screen source, or upload image maps with a different value for different pixels.

This is the central configuration window for the new Screen Sources.

It is using a window layout that already exists in 3DOptix and that I had to use, but the UI patterns under Wavelength information are new designs added by me.

Users can decide to either create their own spectrum collection (group of colors in layman's terms) or upload one from the database.

Under Source ray intensity pattern, users can either input constant values for the entire screen source, or upload image maps with a different value for different pixels.

New Data Bases

I designed these new data bases as part of the new Screen source system, but the spectrum and spectrum collection data bases will be integrated with all other light sources as well. Each contains 2 sections: System items and custom items. In order to customize a system item, users select the edit icon, edit the item in the edit window that will open, give it a new name and then it will be displayed under the custom section. Filter and sorting should be added in the next version.

Edit Spectra

Spectra consist of an potentially unlimited number of wavelengths, and this window is where users can create, edit and save their spectra to the data base.

Edit Spectrum Collections

Spectrum collections consist of potentially unlimited numbers of spectra, and this is where users can create, edit and save these collections to the database.

Discovery

This is a screenshot from the beginning of the project, when I combined existing and new elements (low fidelity designs) in order to figure out the required flows.

MVP

As a first functional prototype we decided to implement a Simple Screen Source (as opposed to the Advanced Screen Source that is a feature for paying users only).

Metaphoric user journey
and interactive task flow

Create a Screen Source with four stripes and a 3DOptix logo

Since neither I nor the developers are physicists, I had to use a metaphoric approach to create an initial user flow.

The final product will simulate screen sources for quantum cascade laser arrays or plasma display panels, but my user journey simulates an iPad. Instead of advanced spectra like nanowire or quantum cascade emissions, I use a basic spectrum collection of R, G, and B (RGB), familiar to designers, to which the user will add a fourth color and a mask.

Metaphoric Simplification

Since neither I nor the developers are physicists, I had to "translate" the physics requirements into a metaphor in order to create an initial user flow.

Since neither I nor the developers are physicists, I had to use a metaphoric approach to create an initial user flow.

Initial Flow

The user wants the 3DOptix logo colored with 4 stripes in blue, green, red and yellow and a black background to appear on their screen source.

1. User needs to add a 4th stripe to the screen source
2. User needs the 4th stripe to be yellow
3. User needs to add an intensity map with the 3DOptix logo in white on a black background

The user wants the 3DOptix logo colored with 4 stripes in blue, green, red and yellow and a black background to appear on their screen source.

1. User needs to add a 4th stripe to the screen source
2. User needs the 4th stripe to be yellow
3. User needs to add an intensity map with the 3DOptix logo in white on a black background

Flow Starting State

The user has created an iPad screen source by adding it from the new screen source data base.

It arrives preconfigured with 3 stripes in the colors red, green and blue (RGB)

The user has created an iPad screen source by adding it from the new screen source data base.

It arrives preconfigured with 3 stripes in the colors red, green and blue (RGB)

Flow End State

The user has edited the screen source by adding a custom Spectral collection, custom Spectral map and custom Intensity map. It now displays 4 stripes inside the 3DOptix logo.

Challenge

Reassign spectrum order numbers in a spectrum collection.

One of the physics professors at 3DOptix pointed out to me that users need the ability to reassign order numbers to spectra within the collection ((to reassign the colors (spectra) to different pixels)). To address this, I considered several options:

1. Swap numbers: If a user assigns a new number that already exists, the numbers will be swapped.
2. Display an error message: "This #number is already occupied, please choose another" or a similar message.
3. Display duplicate numbers with a warning: "Duplicate #number. Please assign a unique #number to each spectrum", highlighted with red frames around the duplicates and disabling the Save button.

The professor chose the third option. You can watch the interactive user flow video here:

Screen Source Flow Chart

Success Metrics to Measure

Feature adoption rate: Measures how often users utilize the Advanced Screen Source, showing its relevance to their needs in creating complex light sources.

Customization frequency: Tracks the rate at which users interact with customization options (e.g., spectrum collection, wavelength adjustments), indicating the value of these capabilities.
Efficiency of setup time: Monitors how long it takes users to configure screen sources, reflecting the ease of use and intuitiveness of the system.
Accuracy and precision in spectrum configuration: Evaluates the tool’s effectiveness by tracking errors or corrections users make when configuring spectral maps and intensity patterns.
Retention for complex projects: Observes continued usage among users working on advanced projects, indicating trust and satisfaction with the tool's reliability.

Feature adoption rate: Measures how often users utilize the Advanced Screen Source, showing its relevance to their needs in creating complex light sources.

Customization frequency: Tracks the rate at which users interact with customization options (e.g., spectrum collection, wavelength adjustments), indicating the value of these capabilities.
Efficiency of setup time: Monitors how long it takes users to configure screen sources, reflecting the ease of use and intuitiveness of the system.
Accuracy and precision in spectrum configuration: Evaluates the tool’s effectiveness by tracking errors or corrections users make when configuring spectral maps and intensity patterns.
Retention for complex projects: Observes continued usage among users working on advanced projects, indicating trust and satisfaction with the tool's reliability.

Next Steps

Developing these tools involved making a lot of, albeit educated, but still… assumptions. Our main priority was adding all the vital features to this complex app that experts decided we needed in order to make it usable in the first place. But even though they were thoroughly tested by me, QA and team members and stakeholders, they will - further on - benefit from extensive usability testing with users from outside the company, and from further optimization.