Rethinking an existing feature
Butterfly Network Split Exams
Scroll ↓
How might we…
redesign the flow that allows users to split up a group of ultrasound images and related content into different exams as quickly and seamlessly as possible?
About the Project
Butterfly Network provides portable ultrasound systems to healthcare professionals. An important aspect of my role at Butterfly is owning the cloud workflows so that users can properly document and store ultrasound images and related information. A common case to consider is when a user takes multiple ultrasound images and they don’t have time during imaging to properly divide and document the images. Butterfly allows users to retroactively split up these exams for proper documentation. When I joined Butterfly, there had been extensive customer feedback regarding this feature and my job was to lead the optimization.
Discovery
The first thing the product manager and I did was meet with customer success to learn about the issues. Complaints about the feature had been pretty consistent across different users and the biggest issues were:
Clips and thumbnails were too small to view and users were moving wrong images.
Existing flow only allowed users to split images, not worksheets or exam types.
Users could not select whether patient info remained associated, copied over, or not associated upon split.
Modals were text heavy and mentally draining.
The entrance to the flow was not obvious.
Splitting a study into an existing study was extremely cumbersome.
There was also strong customer interest in being able to split the images into multiple studies, as the existing feature only allowed splitting into two.
User Flow
User Flow
Iterations
One of the big questions I had when creating the iterations was whether the user would prefer fewer steps with more content overload on each screen or more steps with fewer action items and content per step. I designed a few different options to test out with our users.
Stakeholder Reviews
Engineers
for gauging timing and potentially expensive aspects of the designs. An important consideration was that our plan to let the user split into multiple exams instead of the existing two would be time consuming and most likely made sense as a V2.
Customer Success
to ensure that all the user needs and existing complaints had been addressed in the new flow. We also wanted to leverage the experience of our CS team to foresee any expected issues with the new flows.
Clinical Team
to get real world expertise on how this flow would play out in a clinical setting and learn more about the expected use case.
Product, Design & Research
to get design feedback at our weekly critiques, get remaining feedback from our product team members, and run the flows by research so they could go out and get feedback from customers.
Research
The product manager and I started by doing some quick research with our customers who had raised complaints about the existing feature to ensure that this new flow addressed their pain points and improved their experience. After making sure the flows were working, clickable prototypes in Figma, we tested out the flows with additional users and found that they had a strong preference for fewer steps with more action items on one modal screen. They also wanted the content to be less wordy. Our research team had also conducted a term survey and identified that we should use “exam” instead of “study”.
Additionally, we got really positive feedback about our flow splitting into multiple exams. This helped validate the importance of including this as a V2 action.
RESULTS
RESULTS
We ended up with three different final flows!
One for moving images to a new draft, one for moving to an existing draft, and our V2 for splitting into multiple drafts.
Primary Workflow
This is the most common use case. The existing patient, author and archive are pre-filled so that the user can breeze through in most cases without doing any work. However, everything is editable. In the existing flow, the user could only move images and worksheets and they then had to go find the new draft to edit details. The split icon for entry to the flow is also new and shows one vector splitting into two. The prior icon was two arrows running parallel to each other, which confused users.
Secondary WorkFlow
A more nuanced flow is when the user wants to move the content to an existing exam. Originally, there was no way to search for the existing study which made locating the right one nearly impossible. This flow identifies which exam details are dependent on the selected exam and easily allows the user to select the correct exam.
V2 Workflow
This is the final design for a second flow that’s in development. This flow allows the user to divide images from a study into any number of exams, whereas we currently only allow splitting into two.