uLab Systems 🦷
New way for treatment planning
uLab Systems 🦷
New way for treatment planning
uLab Systems 🦷
New way for treatment planning
How I redesigned 3D workspace to ease orthodontist's treatment planning experience.
How I redesigned 3D workspace to ease orthodontist's treatment planning experience.
How I redesigned 3D workspace to ease orthodontist's treatment planning experience.
Timetime
2023 (6 months)
2023 (6 months)
Role
Lead UX designer
Lead UX designer
User research (field trip, interview, testing)
User research (field trip, interview, testing)
User flow and wireframes for 3D workspace
User flow and wireframes for 3D workspace
Hi-fi prototype for 3D workspace
Hi-fi prototype for 3D workspace
Team
👩🏻🎨 Simone (UX Designer)
👩🏻🎨 Simone (UX Designer)
👩🏻💼 Swati (Project manager)
👩🏻💼 Swati (Project manager)
👨🏻💻 Ray (Developer)
👨🏻💻 Ray (Developer)
👨🏻💻 Andrew (3D engineer)
👨🏻💻 Andrew (3D engineer)
Overview
Problem
Problem
Orthodontists face difficulties in creating treatment plans due to a complicated and unintuitive workspace with uLab.
Orthodontists face difficulties in creating treatment plans due to a complicated and unintuitive workspace with uLab.
Solution
Solution
Deliver a simple, efficient, and comprehensive workspace to streamline the treatment planning process and reduce the learning curve for orthodontists.
Deliver a simple, efficient, and comprehensive workspace to streamline the treatment planning process and reduce the learning curve for orthodontists.
Time to change
Time to change
uDesign is a desk-top (windows) only software for busy orthodontists to create treatment plans for their patients step by step. I was responsible for improving the overall experience to make the software easy to use. Before the project officials kicked off, I was sent on a field trip to an orthodontist's office where I observed a notable challenge involving the orthodontist and his staff's use of our software for treatment planning.
uDesign is a desk-top (windows) only software for busy orthodontists to create treatment plans for their patients step by step. I was responsible for improving the overall experience to make the software easy to use. Before the project officials kicked off, I was sent on a field trip to an orthodontist's office where I observed a notable challenge involving the orthodontist and his staff's use of our software for treatment planning.
The workspace is mess. There hasn't been a tons of design; It's just been thrown together.
-----Marina, digital assistant
Problem need to be fixed
Problem need to be fixed
The treatment workspace is crowed with all kinds of features. Without intuitive and clear interface, user spent a lot of time on figuring out the function behind each tools.
The treatment workspace is crowed with all kinds of features. Without intuitive and clear interface, user spent a lot of time on figuring out the function behind each tools.
Final solution that ease user's whole experience
Final solution that ease user's whole experience
A simple, efficient, and comprehensive workspace to streamline the treatment planning process and reduce the learning curve for orthodontists.
A simple, efficient, and comprehensive workspace to streamline the treatment planning process and reduce the learning curve for orthodontists.
Let's go deeper to understand user's pain points
Let's go deeper to understand user's pain points
To gain a thorough understanding of our users' pain points with our software, I actively participated in comprehensive user research. This initiative enabled us to collect valuable insights directly from the users, which are crucial for refining our product to better meet their needs and enhance their overall experience.
To gain a thorough understanding of our users' pain points with our software, I actively participated in comprehensive user research. This initiative enabled us to collect valuable insights directly from the users, which are crucial for refining our product to better meet their needs and enhance their overall experience.
Site visit
Been an observer in one of our customer’s office to feel the daily workflow.
User interview
Talked to 6 orthodontists and assistants to learn more about their feelings.
Complains
complains
Filtering all customer complaints we got related to 3D workspaces.
Key takeaways
Key takeaways
Struggled with system comprehension
User struggled with function knowledge retention and feature awareness
Inefficient workflow
The whole process of treatment planing in workspace is inefficient
Learning curve is high
The inconsistent UI and layout result in a steep learning curve
Understanding industry standards
Understanding industry standards
The review of competitor products can help me understand industry standards and identify the opportunities for improving UX / UI for our product.
The review of competitor products can help me understand industry standards and identify the opportunities for improving UX / UI for our product.
Key takeaways
Key takeaways
Clear overall workflow
Patient portal and treatment area are seamless integrated to provide a logical and clean workflow.
Clean workspace area
All competitors keep the tools out of workspace area to provide interruption-free interactions.
Smooth widget movement
Allow user to click and drag instead of clicking multiple times.
How might we deliver a intuitive and comprehensive workspace to streamline the treatment planning process and reduce the learning curve for orthodontists.
How might we deliver a intuitive and comprehensive workspace to streamline the treatment planning process and reduce the learning curve for orthodontists.
Find the right design direction
Find the right design direction
Recognizing the importance of strategic planning in design, I ensured that we established a clear and effective design direction before initiating any wireframe or visual design work.
Recognizing the importance of strategic planning in design, I ensured that we established a clear and effective design direction before initiating any wireframe or visual design work.
Proposed solution
Proposed solution
With insights gathered from comprehensive user research, I organized and led a series of collaborative design sessions involving product managers, technical teams, and our machine learning experts. Together, we crafted a solution that integrates cutting-edge technology, ensuring that our approach not only addresses user needs but also positions us at the forefront of innovation in our industry.
With insights gathered from comprehensive user research, I organized and led a series of collaborative design sessions involving product managers, technical teams, and our machine learning experts. Together, we crafted a solution that integrates cutting-edge technology, ensuring that our approach not only addresses user needs but also positions us at the forefront of innovation in our industry.
Redesign the information architecture and interaction model with the knowledge that user expected.
Combined AI technology to provide way for user to generate plans automatically.
Orthodontist's journey with proposed solution
Orthodontist's journey with proposed solution
Building on the proposed idea, I created the user journey to illustrate how orthodontists will interact with the new workspace, ensuring that every touchpoint is intuitive and enhances their overall experience with our platform.
Building on the proposed idea, I created the user journey to illustrate how orthodontists will interact with the new workspace, ensuring that every touchpoint is intuitive and enhances their overall experience with our platform.
Design principles
Design principles
There is a certain amount of system complexity that cannot be reduced.
Empower doctors to customize plans while avoiding unnecessary complexity.
Offer intuitive guidance on workspace to reduce learning curve
Exploring for the right thing
Exploring for the right thing
Recognizing the importance of precision in design, I emphasized defining the essential elements to be included in the design upfront. To ensure accuracy and relevance, we sometimes revisited our research for validation, allowing us to refine our approach and confirm alignment with user needs and business objectives.
Recognizing the importance of precision in design, I emphasized defining the essential elements to be included in the design upfront. To ensure accuracy and relevance, we sometimes revisited our research for validation, allowing us to refine our approach and confirm alignment with user needs and business objectives.
Key design elements
Key design elements
With a comprehensive list of detailed product requirements in hand, my team and business identified and agreed upon four main elements that are indispensable for the workspace.
With a comprehensive list of detailed product requirements in hand, my team and business identified and agreed upon four main elements that are indispensable for the workspace.
Clean workspace that easy to interact with
Clean workspace that easy to interact with
Staging that easy to understand
Staging that easy to understand
Report that easy to scan by users
Report that easy to scan by users
Tooltips that help user understand the function.
Tooltips that help user understand the function.
Back to research - card sorting
Back to research - card sorting
Due to frequent user complaints about the organization and accessibility of tools in the current design, I initiated a card-sorting exercise with 15 users to gain a clearer understanding of their preferences and expectations.
Due to frequent user complaints about the organization and accessibility of tools in the current design, I initiated a card-sorting exercise with 15 users to gain a clearer understanding of their preferences and expectations.
Evolving the new look and feel
Evolving the new look and feel
I looked across competitive and comparative software and best practices to define the elevated visual design for the software. Minimal & light style with color selectively to reinforce functionality. Dark mode for 3D interactive workspace can increase contrast and allow users to focus on the model.
I looked across competitive and comparative software and best practices to define the elevated visual design for the software. Minimal & light style with color selectively to reinforce functionality. Dark mode for 3D interactive workspace can increase contrast and allow users to focus on the model.
Rapid prototype for conference demo
Rapid prototype for conference demo
There is nothing better than having real users or a target audience to give feedback on what we’re building now! My team was requested to create a hi-fi prototype as the demo to impress the target audiences in world-class orthodontist’s conference. I was responsible for creating the prototype for all clinical workspaces within a week.
There is nothing better than having real users or a target audience to give feedback on what we’re building now! My team was requested to create a hi-fi prototype as the demo to impress the target audiences in world-class orthodontist’s conference. I was responsible for creating the prototype for all clinical workspaces within a week.
Demo clips of workpace: click to view full prototype
Demo clips of workpace: click to view full prototype
Preparation is replaced by Auto-Setup
Preparation is replaced by Auto-Setup
Removed the time-consuming manual setup part.
Clean workspace with organized panel
Clean workspace with organized panel
Once the model is ready to use, user can interact with the well-organized panel to setup their treatment plan.
Auto-staging for best outcome
Auto-staging for best outcome
Once finished setup, the auto-staging can add IPR, attachments, velocity for the treatment plan in 1-click,
Wait! This is not what users want right now?
Wait! This is not what users want right now?
Oops! Users don’t care about auto-setup, the feature we prioritized at this moment.
We demoed the product at the world's largest orthodontists summit (AAO) and presented how easy to get the treatment with our auto setup. People were excited and all wanted to learn more about SMART RX, another feature we were considering as a “nice-to-have” for the first release.
Oops! Users don’t care about auto-setup, the feature we prioritized at this moment.
We demoed the product at the world's largest orthodontists summit (AAO) and presented how easy to get the treatment with our auto setup. People were excited and all wanted to learn more about SMART RX, another feature we were considering as a “nice-to-have” for the first release.
Ok, AI setup is cool... So, tell me how this smart Rx works?
Ok, AI setup is cool... So, tell me how this smart Rx works?
I don’t really trust AI things. But this Rx thing sounds interesting.
I don’t really trust AI things. But this Rx thing sounds interesting.
Can Smart Rx provide personalized recommendations or insights based on my treatment history?
Can Smart Rx provide personalized recommendations or insights based on my treatment history?
The Smart Rx feature is what caught my attention during the demo. The ability to submit cases and receive personalized treatment plans not only saves time but also introduces a new level of precision and expertise into our practice.
The Smart Rx feature is what caught my attention during the demo. The ability to submit cases and receive personalized treatment plans not only saves time but also introduces a new level of precision and expertise into our practice.
Smart Rx is the perfect blend of innovation and practicality. Can't wait to explore more!
I'm eager to see how Smart Rx integrates into our daily works and improves treatment accessibility.
Reshape the journey for first release
Reshape the journey for first release
With all the feedback we gained from AAO, the business decided to revisit the workflow. As a startup, time and budget matters. Since SmartRx is requested by 90% of the users we talked, this will become priority requirement for the design.
With all the feedback we gained from AAO, the business decided to revisit the workflow. As a startup, time and budget matters. Since SmartRx is requested by 90% of the users we talked, this will become priority requirement for the design.
New solution
New solution
Considering the complexity and scope of fully implementing AI technology, we opted to concentrate on developing the Smart Rx feature for this version. We decided to utilize AI primarily to enhance the setup process, ensuring a balance between innovative technology and practical application while aligning with our development capabilities and user needs.
Considering the complexity and scope of fully implementing AI technology, we opted to concentrate on developing the Smart Rx feature for this version. We decided to utilize AI primarily to enhance the setup process, ensuring a balance between innovative technology and practical application while aligning with our development capabilities and user needs.
Redesign the information architecture and interaction model with the knowledge that user expected.
Combined AI technology to provide way for user to generate plans automatically.
Allow user to submit modification request without leaving the 3D workspace.
NEW
Journey that focus on user’s needs and also with constraints
Journey that focus on user’s needs and also with constraints
Iteration of designs
Iteration of designs
With the new journey created, the design decisions also got impacted and need to be iterated based on the new flow.
With the new journey created, the design decisions also got impacted and need to be iterated based on the new flow.
01 . Take Rx submission out of 3D workspace
01 . Take Rx submission out of 3D workspace
Rx inside 3D workspace
Rx inside 3D workspace
Before
Smart Rx was one of the feature we have when user feel they need some help during auto treatment in 3D workspace.
Install the Figma plugin and you’re ready to convert your designs to a responsive
Rx outside 3D workspace
Rx outside 3D workspace
After
Now Smart Rx is the main access for user to start a treatment and will has its own access on homepage. 3D workspace only provide modification request form.
Install the Figma plugin and you’re ready to convert your designs to a responsive
Remove part of auto-treatment features
Remove part of auto-treatment features
Full auto-treatment tools supported
Full auto-treatment tools supported
Before
The workspace was fully supported by the AI features that allow user to get treatment plan automatically.
Install the Figma plugin and you’re ready to convert your designs to a responsive
Limited movement tools provided
Limited movement tools provided
After
Only limited tooth movement tools are provided and user can modify plans as they want.
Install the Figma plugin and you’re ready to convert your designs to a responsive
Provide controls that move tooth precisely
Provide controls that move tooth precisely
Slider for single tooth movement
Slider for single tooth movement
Before
The slider tool currently presents challenges in achieving precise tooth movements. Its sensitivity often makes it difficult for users to position a tooth exactly as needed.
Install the Figma plugin and you’re ready to convert your designs to a responsive
Number input with increment/decrement
Number input with increment/decrement
After
With simple arrow clicks, user fine-tune adjustments down to 0.1 mm for subtle changes or up to 0.5 mm when more significant shifts are needed.
Install the Figma plugin and you’re ready to convert your designs to a responsive
Design systems
Design systems
Simone and I collaboratively developed the new design systems for the uD Cloud platform, which have been adopted as the standard for all products across the company.
Simone and I collaboratively developed the new design systems for the uD Cloud platform, which have been adopted as the standard for all products across the company.
Final design
Final design
Below are screens that I designed for 3D workspace.
Below are screens that I designed for 3D workspace.
Key features: Send modification request inside workspace
Key features: Send modification request inside workspace
Once user received crafted plan from us, they can directly go to the workspace to review the plan, ask for modification if needed.
Once user received crafted plan from us, they can directly go to the workspace to review the plan, ask for modification if needed.
Key features: Limited tooth movement panel
Key features: Limited tooth movement panel
Use the limited movement panel to fine tune the treatment plan. Providing comprehensive guidance, significantly reducing the learning curve and helping users quickly master the system's capabilities for optimal outcomes."
Use the limited movement panel to fine tune the treatment plan. Providing comprehensive guidance, significantly reducing the learning curve and helping users quickly master the system's capabilities for optimal outcomes."
Key features: Staging
Key features: Staging
Press the play button to visualize the entire treatment process, from the initial status to the final stage. This feature allows you to observe the step-by-step progression of the treatment plan, ensuring users can effectively monitor and adjust the plan as needed.
Press the play button to visualize the entire treatment process, from the initial status to the final stage. This feature allows you to observe the step-by-step progression of the treatment plan, ensuring users can effectively monitor and adjust the plan as needed.
Key features: Reports
Key features: Reports
All treatment reports are integrated into one place where user can use the tab to switch between.
All treatment reports are integrated into one place where user can use the tab to switch between.
Impact
Impact
Although the product has not yet been launched, beta testing has already demonstrated a remarkable 40% improvement in efficiency due to the new design. This early success underscores the potential impact of the design on our operational performance once the product is fully implemented.
Although the product has not yet been launched, beta testing has already demonstrated a remarkable 40% improvement in efficiency due to the new design. This early success underscores the potential impact of the design on our operational performance once the product is fully implemented.
