Product Design
UX/UI
Case Study
Overview
The Swoop system is the world’s first portable MRI, enabling imaging directly at the patient’s bedside. Designing a UI for a first-of-its-kind product came with numerous challenges, significant ambiguity and many pain points to address. We needed to provide clinicians with tools they were familiar with to complete a scanning workflow, but instead of the clunky workstations and outdated software they were used to, we needed to craft a modern solution that ran on an iPad.
For Swoop, I worked on end-to-end UX/UI design: developing and testing new UI features, refining workflows, building wireframes and prototypes in Figma, and conducting multiple usability and feedback studies. Through this iterative design process, we reduced workflow time by nearly 20% and introduced features that provided users with better feedback and guidance—all major feats when it comes to preserving brain health and making medical imaging more accessible.
These collaborative efforts between product design, development, product management, and clinical teams led to three software launches that enhanced usability, improved the user experience, and delivered better outcomes for clinicians and patients.
Context and
Problem
In neuroimaging, Time is Brain. The sooner imaging can be acquired, the sooner a diagnosis can be made and a care plan implemented.
The digital user interface for the Swoop system needed to enable users to complete the scanning workflow, from patient registration all the way to image uploading, with minimal roadblocks and minimal training. However, the existing UI confused users with unintuitive navigation and limited user feedback and guidance.
How might we enable imaging professionals to complete a full MRI scanning workflow with minimal training and interruptions so that they can upload completed images for a patient diagnosis?
User Personas
There were three main personas involved:
MRI Technologists: these users would presumptively have the most familiarity with an MRI system and its related software. They would additionally be the most familiar with MR imaging workflow and preparing and positioning a patient for scanning.
CT/X-Ray Technologists: these users would be familiar with imaging workflows, but not necessarily MR specific workflows. They would have familiarity with prepping and preparing a patient for scanning.
ICU Nurses: these users would have the least familiarity with the imaging workflow and preparing a patient for imaging. However, they were targeted as a user in order to expand the pool of potential users and reduce the stress on imaging technologists. It was assumed that they may require the most amount of guidance in the UI.
While not in the direct scope of the UI personas, there was a fourth persona to consider: the patient. What happened on the digital UI directly affected the patient from how long they were in the scanner to their diagnostic outcome.
Process and
Development
The user interface development process was an ongoing, iterative project spanning three years and resulting in three successful software releases.
User needs and requirements were set across various teams and new and improved features were targeted for development by the Product Design Team.
Existing pain points were identified and an ideal user workflow was created in comparison to the existing workflow.
Initial assumptions, based on research and interviews, were made by the Product Design Team and preliminary wireframes and designs were created.
These wireframes eventually evolved to more detailed, high-fidelity prototypes with interactions and animations intended for feedback and usability testing.
Feedback from existing customers was collected on a regular basis. Weekly check-in calls occurred between the Product Design Team and the Customer Success teams for both research and commercial sites.
Feedback from customer sites was collected and new designs and potential features were vetted.
Internal brainstorming and feedback sessions were routinely held in order to gain quick insights and ideas from across teams. These would involve Engineering, Software Development, Product Management and Customer Success Teams.
Usability Studies, with prototype testing and feedback sessions, were the main way of gathering insights and validating design decisions. Studies were held on a regular basis or were tied to a significant new feature requiring testing and feedback.
Representative users from our persona groups were brought in to conduct simulated patient exams and complete the entire workflow.
Participants were presented with two prototypes for A/B testing. Feedback sessions were held at the end to discuss struggles, successes, frustration, general opinions and potential future solutions.
Gathering, Analyzing, and Validating the Data
Participants’ performances were evaluated using an objective, task-based grading system. Each prototype had a set of tasks required to complete the workflow. For each task, a participant could pass, fail, or require external help from the moderator.
To gain further insights, qualitative data was also collected. Participants were asked to evaluate their own performance, describe their struggles, successes and impressions, and their ideas for improvement.
Findings and data from the studies were complied and collected. Performances were evaluated based on persona and as a whole. Trends in successes, struggles and failures were identified. Reports were written and results were shared with internal stakeholders. The end results informed key design decisions and direction.
Performances and metrics were evaluated and compared based on persona.
Individual Tasks were evaluated and trends identified by persona and overall.
Key Design
Decisions
Final design decisions were implemented in Figma prototypes and handed off to Software Development. Regular check-ins between Product Design, Product Management, and Software were held to ensure design concepts were implemented accurately and to adjust designs to account for any technical constraints that may have risen.
Simplified Top-Level Navigation
Top-level navigation was reduced from an initial seven tabs down to four. Lesser used functions were moved and condensed under existing tabs.
A new connection icon was added to allow users to quickly see if all network connections were successfully made
Improved Controls and Patient Information Banner
Exam controls (start, pause, and send) were made more intuitive with more intuitive labeling and coloring that better signified their functions.
Confirming patient information, including name and date of birth, is a normal part of the imaging workflow but was difficult to accomplish in previous UI versions. To solve for this, a patient info banner was added and made visible at all times.
Side-by-Side Exam Viewer and Live Patient Positioning Feature
Previous UI versions required users to switch between tabs in order to monitor the exam progress and view the collected images.
This extra step discouraged users from checking the images for acceptable quality and proper patient positioning, potentially resulting in having to rerun exams.
During usability testing, participants were able to complete the workflow, on average, a full two minutes quicker using this combined view.
Improved Sending Workflow
Features were added that allowed users to send images while the exam was still in progress, reducing diagnosis time.
Users were given greater control over where images were sent and visual confirmation that images were successfully sent. The absence of this confirmation in previous UI versions was a top source of user frustration and error.
In addition to these key changes, smaller more incremental changes were also implemented to give better user feedback and guidance. Suggested, but non-implemented features included providing guidance on patient padding and including video tutorials directly in the UI.