MRI ImageGuard Integration
MRI ImageGuard Integration
Accelerated MRI technicians' decision-making with new features while optimising the overall UI to suit an increasingly AI-driven system
Accelerated MRI technicians' decision-making with new features while optimising the overall UI to suit an increasingly AI-driven system
Healthcare Tech
Healthcare Tech
B2B
B2B
Agile
Agile
Project Overview
Internship Background
Internship Background
United Imaging Healthcare (UIH) is a global leader in healthcare technology, ranking among the TOP 5 in the industry with operations in over 60 countries.
During my three-month internship at UIH, I contributed to 3 projects for their MRI desktop software as the sole UX designer:
Introducing new features to the MRI Image Viewer
Redesigning the report system
Designing an AI chatbot tailored for MRI technicians
This case study focuses on the first one, showcasing the end-to-end process of adding new features to an existing desktop app while optimising the overall user workflow.
United Imaging Healthcare (UIH) is a global leader in healthcare technology, ranking among the TOP 5 in the industry with operations in over 60 countries.
During my three-month internship at UIH, I contributed to 3 projects for their MRI desktop software as the sole UX designer:
Introducing new features to the MRI Image Viewer
Redesigning the report system
Designing an AI chatbot tailored for MRI technicians
This case study focuses on the first one, showcasing the end-to-end process of adding new features to an existing desktop app while optimising the overall user workflow.
My Role
My Role
UX Designer
UX Designer
Project Type
Project Type
Internship
Internship
Timeline
Timeline
Q4, 2023
Q4, 2023
Team
Team
Product Manager, Developers, Project Manager, Visual Designer
Product Manager, Developers, Project Manager, Visual Designer
Let’s take a quick look at what I’ve done
Let’s take a quick look at what I’ve done
Outcomes
Integrated new features to the desktop platform as well as optimising the entire experience, reducing users' decision-making time and streamlining their workflow
Integrated new features to the desktop platform as well as optimising the entire experience, reducing users' decision-making time and streamlining their workflow
Conducted usability testing with prototypes despite constraints, gathering valuable insights to create the optimal design solutions
Conducted usability testing with prototypes despite constraints, gathering valuable insights to create the optimal design solutions
Delivered the final design doc (wireframes and specification) to the developers
Delivered the final design doc (wireframes and specification) to the developers
Project Background
MRI technicians have long struggled with managing image artefacts caused by patient movement, breathing, or equipment issues, which has also been a long-standing business concern. Leveraging AI technology, an advanced artefact detection and correction solution has thus been developed by the product team, and is ready to be integrated into the current desktop application.
MRI technicians have long struggled with managing image artefacts caused by patient movement, breathing, or equipment issues, which has also been a long-standing business concern. Leveraging AI technology, an advanced artefact detection and correction solution has thus been developed by the product team, and is ready to be integrated into the current desktop application.
An MRI operator is using the application while scanning
Photo by MART PRODUCTION: https://www.pexels.com/photo/technology-computer-room-doctor-7088524/
What is MRI?
Magnetic Resonance Imaging (MRI) is a medical imaging technique used to create detailed pictures of the inside of the body, such as the brain and joints. Unlike X-rays and CT scans, MRI does not use radiation.
Magnetic Resonance Imaging (MRI) is a medical imaging technique used to create detailed pictures of the inside of the body, such as the brain and joints. Unlike X-rays and CT scans, MRI does not use radiation.
Pain Points of the Old Experience
No Longer Well-adapted to an Increasingly AI-driven System
No Longer Well-adapted to an Increasingly AI-driven System
Intrusive notifications
Intrusive notifications
UIH used popup windows to notify users of detected artefacts, requiring them to make correction decisions manually with the disruption of their workflow.
UIH used popup windows to notify users of detected artefacts, requiring them to make correction decisions manually with the disruption of their workflow.
Fragmented focus
Fragmented focus
The old main user flow required users to constantly shift their focus across various sections of the screen, resulting in an inefficient workflow.
The old main user flow required users to constantly shift their focus across various sections of the screen, resulting in an inefficient workflow.
Excessive information
Excessive information
😵💫 The old main user flow
Design Challenge
How might we integrate the 'ImageGuard' and AI-based correction features while streamlining the workflow to help MRI technicians make artefact correction decisions more efficiently?
How might we integrate the 'ImageGuard' and AI-based correction features while streamlining the workflow to help MRI technicians make artefact correction decisions more efficiently?
To ensure the product remains competitive as the industry adopts AI-powered features with more streamlined systems, my challenge is not just to incorporate these features but also to optimise the entire UI for an increasingly AI-driven system.
To ensure the product remains competitive as the industry adopts AI-powered features with more streamlined systems, my challenge is not just to incorporate these features but also to optimise the entire UI for an increasingly AI-driven system.
The Solution & Impact
From a Fragmented Interface to a Dedicated Image Viewing Sector with Integrated AI-powered Features and a Large-screen Mode
From a Fragmented Interface to a Dedicated Image Viewing Sector with Integrated AI-powered Features and a Large-screen Mode
⭐ ️Impact: One stone, three birds
⭐ ️Impact: One stone, three birds
Seamless integration of the new features
Seamless integration of the new features
From
User feedback
User feedback
Stakeholder endorsement
Stakeholder endorsement
Reduced decision-making time & streamlined workflow
From
User feedback
User feedback
A pivotal first step toward embracing an AI-driven system
From
Stakeholder endorsement
Stakeholder endorsement
Let’s see how I got there!
Let’s see how I got there!
Design Process
Agile UX: Combining Iterative Development with User-centred Design
Agile UX: Combining Iterative Development with User-centred Design
Working within an agile framework in a dynamic, fast-paced environment, I navigated four design iterations with frequent sprints and design critiques. The process was highly collaborative, involving constant cross-team communication and rapid feedback loops. Each design decision was informed by research data, user feedback, and strategic goals to align with the product's future direction.
Working within an agile framework in a dynamic, fast-paced environment, I navigated four design iterations with frequent sprints and design critiques. The process was highly collaborative, involving constant cross-team communication and rapid feedback loops. Each design decision was informed by research data, user feedback, and strategic goals to align with the product's future direction.
Understand and Define the Problem
Overcoming the Learning Curve
Overcoming the Learning Curve
As a new intern with no background in medical science, I initially had no idea what MRI was or who I was designing for. With a tight timeline, I had to quickly onboard myself.
As a new intern with no background in medical science, I initially had no idea what MRI was or who I was designing for. With a tight timeline, I had to quickly onboard myself.
What I did to get up to speed:
🖥 Desk research: Studied the MRI scanning process and our platform on my own to grasp the technical workflow
🖥 Desk research: Studied the MRI scanning process and our platform on my own to grasp the technical workflow
📈 Learn from reports: Reviewed reports on the target audience provided by our user researchers to understand the users
📈 Learn from reports: Reviewed reports on the target audience provided by our user researchers to understand the users
🗣 Meetings: Met with the product lead to gain a comprehensive understanding of the products and the business problems we aimed to solve
🗣 Meetings: Met with the product lead to gain a comprehensive understanding of the products and the business problems we aimed to solve
Understand and Define the Problem
‘Translate’ the Product Requirements to User Stories
‘Translate’ the Product Requirements to User Stories
Focusing on design tasks without understanding the underlying user needs can limit the potential for better solutions. Thus, I started with defining user stories based on the product requirements and aligned them with the PM:
Focusing on design tasks without understanding the underlying user needs can limit the potential for better solutions. Thus, I started with defining user stories based on the product requirements and aligned them with the PM:
As an MRI technician, I want to get notification of the exact image artefacts so that I can clearly and effortlessly identify the problems of my scan.
address image quality issues.with notifications and advice.
As an MRI technician, I want the system to automatically enhance the image quality so that I can avoid manual decision or rescan, saving my time and energy.
As an MRI technician, I want a simple and straightforward interface so that I can make artefact correction decisions faster.
As an MRI technician, I want the system to support manual selection of the artefact correction plans so that when automated QC results do not align with my professional judgment, I can manually correct artefacts to ensure the highest possible image quality for accurate diagnosis.
As an MRI technician, I want to quickly switch between the protocol selector, parameter card, and the image viewing area, so that I can efficiently configure scanning protocols, adjust parameters, review images, and make image correction decisions seamlessly, ensuring optimal scan quality and workflow efficiency.
...
Product meeting
User Flow
Merging 2 Tabs to 1: Simplifying Navigation and Reducing Cognitive load
Merging 2 Tabs to 1: Simplifying Navigation and Reducing Cognitive load
After a deeper understanding of the user scenarios, I optimised the user flow of the new features suggested by the product manager.
Before (suggested by PM)
After
Before (suggested by PM)
After
Reduced Complexity by Merging Tabs
Reduced Complexity by Merging Tabs
I combined two feature tabs at the same level, reducing the flow from 4 tabs to 3. This simplification makes navigation more intuitive and eases the cognitive load on the user.
I combined two feature tabs at the same level, reducing the flow from 4 tabs to 3. This simplification makes navigation more intuitive and eases the cognitive load on the user.
Balanced AI Suggestions with User Control
Balanced AI Suggestions with User Control
I simplified the user flow by removing excessive options under 'Smart Artifact Correction,' allowing AI to guide decision-making while still giving users flexibility under 'Custom Artifact Correction.' This reduces cognitive overload without sacrificing user autonomy.
I simplified the user flow by removing excessive options under 'Smart Artifact Correction,' allowing AI to guide decision-making while still giving users flexibility under 'Custom Artifact Correction.' This reduces cognitive overload without sacrificing user autonomy.
Clearer Decision Paths by Translating System Logic into User-Friendly Language
Clearer Decision Paths by Translating System Logic into User-Friendly Language
I replaced 'System Advice' with 'Smart Artifact Correction' to better align with user expectations. This change translates system logic into a more user-friendly language, helping users understand the feature without overthinking or doubting its purpose. It also harmonises with 'Custom Artifact Correction,' supporting more cohesive and straightforward decision-making.
I replaced 'System Advice' with 'Smart Artifact Correction' to better align with user expectations. This change translates system logic into a more user-friendly language, helping users understand the feature without overthinking or doubting its purpose. It also harmonises with 'Custom Artifact Correction,' supporting more cohesive and straightforward decision-making.
Design Iteration
Hard to Decide? Present Both
Hard to Decide? Present Both
MRI technicians need to maintain continuous attention on the scanning process while managing various tasks. A major challenge was to clearly present the quality control result without interrupting their workflow and minimising their cognitive load. For the best possible solution, I explored two designs: a sliding side panel and an embedded popup window.
Usability testing showed that the sliding side panel, while sleek, caused the image to shift. This movement could interrupt the user when they mark or edit the image, hindering efficiency. However, the popup window, though it might block some image details in the corner, turned out to be a manageable trade-off. Thus, we opted for the embedded popup.
MRI technicians need to maintain continuous attention on the scanning process while managing various tasks. A major challenge was to clearly present the quality control result without interrupting their workflow and minimising their cognitive load. For the best possible solution, I explored two designs: a sliding side panel and an embedded popup window.
Usability testing showed that the sliding side panel, while sleek, caused the image to shift. This movement could interrupt the user when they mark or edit the image, hindering efficiency. However, the popup window, though it might block some image details in the corner, turned out to be a manageable trade-off. Thus, we opted for the embedded popup.
A sliding side panel
A sliding side panel
📦 Archived
📦 Archived
VS
An embedded popup window
An embedded popup window
✔️ Adopted
✔️ Adopted
Design Iteration
How to Address Internal Disagreements with Constrains?
How to Address Internal Disagreements with Constrains?
The PM initially preferred the sleek sliding side panel, as they were not fond of any kind of popup window. However, I shared my concerns about the sliding panel and persuaded the PM to allow user testing to evaluate both designs for this key feature.
Even though our real users (MRI technicians) weren't available for the project, I reached out to two clinic specialists within our company who had related experience. During the testing, these specialists provided hands-on feedback on the two prototypes, while stakeholders observed their interactions and reactions.
After the testing session, I facilitated a discussion to gather insights and make a final design decision, ensuring that the users' voices were heard.
This simplified user testing process allowed us to choose the best possible design solution within the constraints of time and resources.
The PM initially preferred the sleek sliding side panel, as they were not fond of any kind of popup window. However, I shared my concerns about the sliding panel and persuaded the PM to allow user testing to evaluate both designs for this key feature.
Even though our real users (MRI technicians) weren't available for the project, I reached out to two clinic specialists within our company who had related experience. During the testing, these specialists provided hands-on feedback on the two prototypes, while stakeholders observed their interactions and reactions.
After the testing session, I facilitated a discussion to gather insights and make a final design decision, ensuring that the users' voices were heard.
This simplified user testing process allowed us to choose the best possible design solution within the constraints of time and resources.
Design Iteration
Before
Before
After
After
Iteration of the Image Viewer Panel After the Usability Testing:
Iteration of the Image Viewer Panel After the Usability Testing:
📍 Repositioning
📍 Repositioning
To minimise the popup's intrusion, I repositioned the popup and buttons to the upper left corner where the information is relatively the least important to the user.
To minimise the popup's intrusion, I repositioned the popup and buttons to the upper left corner where the information is relatively the least important to the user.
🎨 Transparency
🎨 Transparency
I slightly decreased the opacity of the panel. This adheres to the principle of information transparency, ensuring users are aware of underlying information even if it is not fully readable. This subtle transparency also allows technicians to maintain context with the scan image while focusing on the notification.
I slightly decreased the opacity of the panel. This adheres to the principle of information transparency, ensuring users are aware of underlying information even if it is not fully readable. This subtle transparency also allows technicians to maintain context with the scan image while focusing on the notification.
💬 Improved Guidance
💬 Improved Guidance
Usability testing showed that users want to know the correction plans the system uses. To address this, the new panel text now explicitly lists and highlights the plans ('AiCo' and 'SparkCo'), giving users more confidence when selecting ‘Apply.’
Usability testing showed that users want to know the correction plans the system uses. To address this, the new panel text now explicitly lists and highlights the plans ('AiCo' and 'SparkCo'), giving users more confidence when selecting ‘Apply.’
Final Design
Delivering the Final Design after Engineering QA
Delivering the Final Design after Engineering QA
The final design incorporates the iterated enhancements across all tabs, including a large screen mode. Additionally, an adaptation rule has been established to optimise the interface for a 27’’ screen.
The final design incorporates the iterated enhancements across all tabs, including a large screen mode. Additionally, an adaptation rule has been established to optimise the interface for a 27’’ screen.
Before
Fragmented image viewer
Fragmented image viewer
Scattered user focus
Scattered user focus
Multi-click decision-making
Multi-click decision-making
Workflow disruptions
Workflow disruptions
After
Dedicated viewer with large screen mode
Dedicated viewer with large screen mode
Centralised user focus
Centralised user focus
One-click decision-making
One-click decision-making
Smooth, uninterrupted workflow
Smooth, uninterrupted workflow
Iteration of the Design Doc
Work-in-progress
Work-in-progress
Final deliverable
Final deliverable
Takeaways
Better Solutions Come from Truly Understanding the Problem
Better Solutions Come from Truly Understanding the Problem
This internship significantly elevated my design skills to a professional level and pushed me to tackle complex problems through cross-functional team collaboration and effective communication. I learned that simply following the PM's vision of what the feature should look like can limit design possibilities. Instead, it’s essential to ask more, digging deeper into what users really need. Starting with a user-centred mindset allows for more effective design solutions, leading to a product that not only meets user expectations but also drives business growth.
This internship significantly elevated my design skills to a professional level and pushed me to tackle complex problems through cross-functional team collaboration and effective communication. I learned that simply following the PM's vision of what the feature should look like can limit design possibilities. Instead, it’s essential to ask more, digging deeper into what users really need. Starting with a user-centred mindset allows for more effective design solutions, leading to a product that not only meets user expectations but also drives business growth.
This internship significantly elevated my design skills to a professional level and pushed me to tackle complex problems through cross-functional team collaboration and effective communication. I learned that simply following the PM's vision of what the feature should look like can limit design possibilities. Instead, it’s essential to ask more, digging deeper into what users really need. Starting with a user-centred mindset allows for more effective design solutions, leading to a product that not only meets user expectations but also drives business growth.
What Others I've learned:
What Others I've learned:
Working in an agile environment
Collaborating with internal stakeholders
Navigating a steep learning curve
Designing for professional users
Working in an agile environment
Collaborating with internal stakeholders
Navigating a steep learning curve
Designing for professional users
Interested in Connecting?
Let me know what you are thinking!
Made with love 💛 Jenny Xing
Interested in Connecting?
Let me know what you are thinking!
Made with love 💛 Jenny Xing
Interested in Connecting?
Let me know what you are thinking!
Made with love 💛 Jenny Xing