In early 2023 I had the opportunity to design the interface and user experience of an innovative agentic AI copilot, that enabled a much more efficient search experience in the digital twins product catalog of the 3DOptix optical design and simulation software.
Innovative UX features included:
Versioning
Tolerance controls and feedback
Prompting guides
A great search experience is essential for 3DOptix, allowing users to efficiently navigate the product catalog, find and select components, and add them to their optical design workspace. The old search experience was suboptimal, slow, and confusing, but improving it has streamlined workflows, ensured precision, and built trust among users.
The 3DOptix Software
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 ;)
3DOptix users
Optical engineers
Physicists
Commercial research labs
Academia: Students, labs, educators
1. Product Catalog - Optimizing manual search
Redesigned 3DOptix product catalog
My Role
Solo UX Designer responsible for research, definition, strategy, prototyping, UX reviews, and usability testing
Catalog Redesign Timeline
4 weeks,
January 2024
Primary User Benefit
Improved speed, ease, and precision in adding the correct products to optical setups.
2. OptiChat - Superpowering product search with AI
3DOptix product catalog with OptiChat intro screen, chat screen, search history tabs, tolerance indicators and OptiChat button
Main Objective
Enhance the catalog search with contextual and automated search with calculations
OptiChat Design Timeline
June - August 2023, on and off
Evolving Technology
When we started, Large Language Models (LLMs) in consumer products were in their early stages and have advanced significantly since.
1. Product Catalog
Solving the problems with the existing product search
First, I performed an audit of the existing catalog, researched other online product catalogs, and conducted a number of interviews with subject matter experts. This and my own judgment revealed a lot of of problems in the existing catalog and challenges for it's redesign.
Below is the old catalog with some of it's issues.
Old catalog audit
New redesigned catalog
In the frame below, you can see all of the problems from above solved.
Problems and solutions
1.
Problem: I don't know if my free search is respecting my applied filters.
Solution: Search Bar Placeholder Text
Without filters applied:
Placeholder text “Search all optics” (when optics is the selected category)
With filters applied:
Placeholder text “Filtered search”
2.
Problem: I'm not always sure about which filters I applied exactly.
Solution: Applied filters bar with “Clear all” option
3.
Problem: I want to add more than one product at once to the setup and I can't.
Clicking a catalog entry immediately closed the catalog window and added the product to the viewport and the setup, disrupting the workflow
This unexpected behavior created a sense of loss of control and frustration for the user
They had to reopen the catalog and start their search from scratch for each additional product, leading to frustration and inefficiency
Solution:
Enable users to carefully select and add up to 10 products to the setup at once
4.
Problem: I want to save and filter for favorite products in the catalog and I can't.
Solution:
Favorites button on every search result row
Favorites filter in the favorites panel
5.
Problem: I'm not sure which of the products are public and which are my private ones, they all look the same in the list
Regular catalog items are public and accessible to all users
Once edited and saved, these items become private, appearing in the user's catalog
There was no clear way to filter or distinguish private items, leading to user confusion and frustration
Solution: Introduced a "Private" filter and icon
Created two categories of "private" items:
Private items: User-edited and saved items
Private 3rd Party items: Private items imported together with a 3rd party setup file
Each category is marked with icons and colors to easily identify and manage these items
Private
Private 3rd party
The implemented new catalog
2. OptiChat AI
UX UI design for the new agentic product search in 3DOptix
Searching optical products often involves technical calculations, which can be challenging, especially for novice scientists. OptiChat guides users in real time, performing calculations and refining searches, making product discovery more efficient, accurate, and accessible for all.
After the manual catalog product search redesign was finished, we were ready to begin designing the AI copilot.
The initial requirements I discovered by interviewing stakeholders and experts:
AI should perform searches and calculations in the Product Catalog based on user prompts
Users should be able to set tolerance levels for search result precision
Plan ahead for the integration of additional AI functions in the future (e.g., building, analyzing, etc.).
Research and Discovery
Research
To address the requirements, I sought references for two specific interaction patterns:
1. AI chat interfaces with interactive UI elements, beyond just the basic functions like "send" or "like."
2. AI assistants that are capable of manipulating software features outside the AI interface.
Discovery and first prototype
First I created a conversation chart to get started with the conversational design and in general wrap my head around what we were going to do.
Experimental conversation flow
Next, I asked our AI engineer for a real conversation example from his code. I then created three versions of it to explore how the conversation would flow with the tolerance meter and the existing catalog filters. Below are segments of the initial conversation tests and interactive flows I designed.
Design
By testing the first Figma prototype, we discovered that some of the initial assumptions needed to be reassessed.
Designing for versioning
Display past search results
Display results button inside the chat history itself
Tabs that save each set of search results for revisiting
Anticipated user need:
Re-display past search results during a search session
(Scrolling through chat history to find previous results is inefficient and disrupts the workflow. Users need a streamlined way to revisit results for quick comparison and better decision-making.)
My initial hypothesis:
Have the AI display a “Display results” button for each set of results
Thus enable users to scroll back in the chat and find and re-display former sets of search results
Insights after testing the hypothesis with a prototype:
“The Display results” button feels disruptive and impractical due to excessive scrolling
It should be replaced with a different solution
Reframed challenge after testing:
The OptiChat AI assistant can generate many different sets of search results during a session. Users should have easy access to all of them and be able to compare them
Solution:
Implement a new search results tab for each created set of search results
User can switch between, delete and reset
Designing for confidence
Tolerance meter vs. tolerance indicators
The "Tolerance meter" for users to set the desired accuracy of search results
Tolerance indicators that indicate the accuracy of the search results
Anticipated user need:
Set the search results precision
(Users expect AI to be perfect, but even the best AI assistants are just super smart guessers—so tolerance indicators keep everyone on the same page)
The initial solution that the stakeholders wanted:
Implement a "Tolerance meter", a slider with 5 steps that range from Low to High precision
Insights after testing this suggested solution with a prototype:
The tolerance meter felt redundant
Users would naturally expect the AI to provide the most precise results available. If exact matches aren’t found, the AI should offer less precise alternatives and communicate this to the user
Reframed challenge after testing:
Users need a way to stay informed about the precision of the offered search results
Solution:
Add a tolerance indicator to each search result
Designing for flexibility and control
Filtered vs. AI product search
The catalog in manual mode
The catalog in OptiChat mode - no manual filtering
Anticipated user expectation:
AI search should take current filter selection into account.
Insights after testing this assumption:
The AI engineer tested this idea and concluded that it is not technically feasible.
Resulting problem:
How do we prevent users from applying filters during AI searches
Solution:
Remove all filter related UI elements when OptiChat window is open
OptiChat button toggles between filtered search and AI assisted search
Designing for knowledge
Onboarding
Splash screen with sample prompts
Info popup with 3 tabs: Capabilities, Tips and Limitations
Incorporating user feedback
Improve both the model and the user satisfaction
User reviews happen in a separate chat window
Current implementation of the OptiChat AI Copilot (Beta)
What's next?
OptiChat success metrics to measure
“Everything counts (in large amounts)”
Depeche Mode
For more extensive usability testing for this feature, I would write usability tests for measuring the metrics in the diagram below and work together with a UX research specialist.
Catalog success metrics to measure
“Measure what can be measured, and make measurable what cannot”
Galileo Galilei
Future OptiChat
The next version of OptiChat will be one that builds optical setups, performs analyses and writes code. I created some UI Designs for the chat window but they are very preliminary and there will be many different context dependent UI elements involved.
