Designing a 3D viewer using AI prototyping
Team Members
UX Designer, Product Manager, and Tech Lead
Role
Lead UX Designer
Toolkit
Web Application, 3D Tool Design, AI Prototyping, Interaction Design, Responsive Design
At a glance
Following a spike in support calls after releasing a 3D tool to customers, I led a rapid research initiative to determine core usability flaws and leveraged AI-assisted prototyping to design an intuitive and interactive 3D viewer which addressed customers' pain points.
Customer friction identified
Dental Workflow
To understand the friction, it helps to understand the Glidewell customer workflow. The My Account customer portal is the digital hub where customers manage their cases and their accounts.
When a dentist submits an intraoral digital scan for a custom dental restoration (like a crown or bridge), Glidewell’s lab technicians design the restoration in 3D using the original scans. Before physical fabrication begins, clinicians can request to view the restoration design and need to log into My Account to review the proposed design for key clinical factors like aesthetics, occlusal space, and margins.
The Support Spike
In April 2026, an overly advanced 3D viewer tool, originally built for internal lab design technicians, was pushed directly into the customer portal to offer more functionality.
However, internal lab technicians and practicing dentists have radically different goals and technical software familiarity. After about a month, Customer Experience (CX) leadership reached out with an urgent issue: call centers were flooded with confused, frustrated dentists who required walkthroughs from Customer Service Representatives (CSRs) just to inspect their patient's restoration.
How might we transform a complex internal 3D design tool into an intuitive customer workspace that gives clinicians the tools they need to evaluate restorations without overwhelming them?
Rapid user testing with a problematic tool
Faced with rising support costs and frustrated customers, I developed a targeted research plan in June and asked my UX team member to help execute a heuristic analysis, competitor benchmarking, and qualitative user testing across internal dental advisors as well as practicing clinicians.
"There’s so many things, I can't see the design."
-Dr. C, Usability Test Participant
Key Research Findings
Overwhelming UI: The tool suffered from overlapping widgets, hidden sub-menus, and redundant features which all got in the way of the main goal of viewing the design.
Navigational Challenges: Viewport controls were awkward. Users couldn't figure out how to pan, rotate, or zoom using various mouse buttons or trackpads.
The Communication Gap: Dentists had no direct way to annotate or communicate precise modifications back to lab technicians, forcing them to rely on basic free-text fields or phone calls
Phased UX recommendations
To balance immediate support relief against long-term architectural improvements, the UX team presented our research findings to executive stakeholders and established a phased strategy:
"Simplify the experience for now while we make the general enhancements later."
-Executive Stakeholder
Securing stakeholder and product alignment on the immediate Phase 1 recommendations successfully unblocked the development team for near-term release.
Phase 1 Recommendations
Simplify viewport navigation
Streamline tools & widgets
Customer-friendly terminology
Phase 2: AI-assisted 3D prototyping
While Phase 1 addressed immediate usability flaws, Phase 2 targeted the experience gap uncovered during research: communicating design feedback.
Bypassing 2D Prototyping Limits
Standard 2D Figma frames and prototypes are inherently limited when conveying 3D spatial interactions, complex gestures, dynamic layer opacities, and screenshot markups.
Rather than relying on static mockups or waiting for engineering spikes, I made a decision to utilize an AI-assisted prototyping workflow to build a live, code-backed WebGL prototype.
Building this new prototype allowed me to test the functionality of certain complex features in a realistic way to ensure a sound experience that I knew was technically feasible.
The Tools
Figma: Defined core UI layout, button & toolbar style, and annotation tool states.
Claude: Leveraged Claude to rapidly translate 2D specs and gesture logic into working web components.
GitHub: Pushed generated code to a dedicated repository to track iterations and manage code components.
Vercel: Deployed a responsive, web prototype link for instantaneous sharing with Product and Engineering leadership.
An interactive 3D prototype
After about 15 hours of work iterating between Figma and Claude, I was able to deploy a working version using Vercel. Check out the current version below.
Prototype Features
Interactive 3D viewer with preset view buttons + shortcut keys.
Simple controls for rotation, pan, and zoom in/out. Intuitive touch interactions.
Multiple color theme rendering options
Visibility and opacity controls for model layers
Screenshot + annotation tool
Approve or Request Changes workflow
Fully responsive but try on a desktop for best experience :)
Product alignment status
By adopting a phased strategy, we ensured that customer experience remained our top priority. Phase 1 directly addressed critical customer friction by eliminating immediate usability issues, while Phase 2 targeted deeper, high-value experience enhancements like native annotations.
Integrating AI-assisted prototyping into my workflow fundamentally compressed our alignment velocity. It reduced what traditionally would have taken months of design iterations and static documentation into an interactive "living" specification.
Strategic Product Alignment: Partnering with our Product Manager and Tech Lead, we validated that a code-backed prototype is our team’s most effective mechanism for demonstrating complex spatial UX requirements and pitching executive leadership for Phase 2 green-light.
"Living" Specification: Rather than relying on ambiguous 2D mockups, the AI-enhanced prototype provided engineering with a concrete target for UI layout and interactive requirements long before development begins.
Next Steps: The team is currently planning to use the live prototype to conduct a second round of qualitative user testing. We would use the feedback and test results to validate the annotation workflow and support our upcoming executive proposal.
Insights & takeaways
Insight #1
Technical challenge: code ownership vs. living specs
Working with code-backed AI prototypes introduced an important technical dialogue with our Tech Lead: Is AI-generated code production-ready?
While the Claude prototype provided a working 1:1 visual spec, our engineering team needed to maintain strict code governance, performance benchmarks, and long-term architecture. We agreed that the prototype served as a highly detailed specification, while developers would author the final code.
This realization sparked an ongoing initiative to explore tools like Figma Code Connect, ensuring our design system components maintain a seamless 1:1 bridge between UX design specs and code repositories.