IDEXX VetMedStat
VetMedStat is a web application that provides veterinarians with the ability to submit radiology, cardiology, and specialty patient cases to be reviewed and diagnosed by IDEXX's medical specialists. I joined this project in 2017 at the beginning of a massive redesign initiative. The redesign included a new fully responsive UI, improved functionality, and the inclusion of AI/ML.
My Role
Demographic
UX/UI Design
Prototyping
Research
Veterinarians
Clinical Staff
Number of Users
10,000+ Vet Clinics
Design Challenge
Take an outdated veterinary web application and create a brand-new UI with functionality enhancements and an entirely new workflow in hopes of generating efficiency for both internal and external users.
Background
VetMedStat was a legacy application in need of being reimagined and redesigned to boost IDEXX Medical Specialist efficiencies while also making some much-needed UI improvements. This was to be accomplished through the creation of structured medical history inputs submitted by the users (Veterinarians & Technicians), a workflow change, and a new responsive UI. The project was broken into three tiers.
Tier 1 involved applying the new IDEXX design system colors and components onto the legacy application without changing the base functionality. This was a multi-month process where we worked page by page to insure the entire site was fully converted to the new design system. The process began by capturing snapshots of the current application and applying the design system components over the top within Sketch. This allowed us to show and hide the new implementation to more easily see what needed to be accomplished by the development team. During this period, we held user testing sessions to gain feedback on the new UI changes and determine opportunities for enhancements to the application.
This first tier was extremely important because of our unique user base needs as well as the importance of getting diagnostic results back. Changing the workflow for our users would mean changing how they went about the diagnosis for their patients. This is not something they can change quickly or easily so implementation of the redesign needed to be completed in smaller phases with only minor modifications such as changing the UI components and styles without disrupting the submission workflow.
Tier 1 Before & After
Miro Board Example
After finalizing the primary functionality and sifting through the user feedback, the following problem spaces emerged:
Problem - Completion Time & Workflow the biggest pain point was still the time needed to complete and submit a case for specialist diagnosis. Optimizing the workflow and reducing time spent within the app became our top priority. AI/ML had the potential to reduce submission times by half if successfully implemented, so it was vital that we used it to its fullest potential. Because of how AI/ML was being utilized, it also dictated where certain submission steps would fit best within the workflow. For example, much of the AI/ML was reading the DICOM data from the radiology images uploaded and predetermining a service that made the most sense for the customer to choose for their case. This meant one of the first things we needed from the customers was the image files.
Solution - Completion Time & Workflow The final workflow organically came to be as we integrated more and more AL/ML functionality. Because of the complexity of the history entry, there ended up being multiple paths that the user could take, each requiring different levels of effort to complete based on the medical information needed. With the AL/ML implementations the time spent on the service selection, and series pages was reduced by half but there was still a large manual effort required on the users part. My solution for this was to create self-help and support materials to help guide the users through the workflows. This was created through a digital adoption platform software called WhatFix. The software allows for the creation of flows, widgets, and videos. Each of the workflows represented within the diagram below had it's own flow created with WhatFix to guide the users through the entire workflow. This content is not only used by our users but it's also utilized by our support and onboarding teams.
Problem - The UI Once the workflow was finalized, we moved on to wire-framing layouts for each of the main pages. We follow an Agile multi-step design review process consisting of Discovery, Design, Converge, and Validate. My goal for this design was to reduce the visual content down to only what was necessary; the less cognitive load for our users the better. The original UI of the dashboard page didn't provide any context to the user around the hierarchy of content. For example, the "Needs Attention", "Submitted", and "Completed" tables were all given equal visual importance. There was also considerable visual clutter on the page such as unreadable icons, unused links, and a lengthy customer support message. Based on the user feedback their main use of this page was to begin a case submission, see how long the case would take to get back to them, and see recently completed cases. This page was also often kept up within the clinic 24/7 and constantly refreshed by the users to see if a case had been returned to them. This meant someone was literally dedicating their work time toward refreshing a page.
Solution - The UI
With the redesign, we also wanted to bring consistency to the product for our users. Web PACS, software a part of the Digital Imaging team, utilized cards for organizing patients and their perspective radiology images. Because our users often began their workflow within Web PACS it made sense to use a similar card component within VetMedStat for the "Needs Attention" cases. The card component provided the UI with the visual hierarchy I had been looking for, giving that section the importance it needed while also providing the user more detailed information about the case. Keeping the Submitted cases and Completed cases within data tables still made sense and also gave the users coming from the legacy app something visually familiar. Both sets of table content were cleaned up and the addition of an estimated delivery was added to the submission table. With a new auto-refresh implemented on the backend of the app, users no longer had to sit and refresh the page waiting for their cases to be returned. Users also received bright green toast messages when cases were returned to them which could be easily seen from across the room.
VetMedStat Legacy Dashboard UI Vs. Final Implementation of the Dashboard UI
Tier 2 next, the structured history entry was developed and released as a part of a BETA trial for a limited set of user groups. Each group took part in user testing and monthly online surveys during the BETA.
Things we heard:
"The history entry was no longer a simple copy and paste from my patients' medical records, this takes me twice as long to complete than before. I also can no longer just upload images I have to categorize them."
"Why does IDEXX not have my patient's diagnostic testing history from VC+... [This is another IDEXX Application for running diagnostic tests] ... it would be nice to have those results automatically populated within the patient history section of the site."
A major pain point for our users was how much longer this new history entry would take them to complete. This required close collaboration between myself and our medical board to reduce as much friction as possible and speed up the submission times. Reduction of questions as well as utilizing artificial intelligence and machine learning (AI/ML) to auto-populate content for the user allowed us to cut submission time in half while still providing the radiology specialists with exactly enough medical history to efficiently diagnose medical conditions. During the final implementation of our BETA testing, I also began creating what would later become the entirety of our customer support content through WhatFix, a digital adoption platform.
Tier 3 we took all the feedback and learnings from our BETA launches and began the design process. We used an agile design methodology beginning with an audit of all current base functionality of the app, followed by bringing forward suggested enhancements from user testing. This became a living Miro board of post-its that the entire team could access even if working remotely.
Design + Prototype
User testing prototypes was key to the success of this project launch. I utilized Axure RP & 10 to create high-fidelity prototypes that were as close to 100% interactivity as possible so our users could explore the entire site with almost no limitations. This was a highly complex prototype that allowed the users to follow a typical workflow as well as two atypical workflows. We showcased the prototype at two of the largest veterinary conferences in the world AVX, and WVC.
Example Axure prototype
Things we heard:
"This feels like you've brought VMS into the present, it's modern and cleaner than before it feels like a more mature VMS."
"Seeing the files I've uploaded before I even open a case is nice, I know once you've received all of my images so I don't need to sit and wait within the case submission."
"I'm not sure the history questions have changed much but the presentation of the questions and order they are asked is easier to digest than before. I think this would be easy enough for my technicians to fill out as well which would save me some time."
"This seems faster than before, I noticed you already put my images into the series for me and the service was auto-suggested for me. I also like that some of the patient history has been brought over from my PACS system ... [radiology capture software] ... and been filled in for me. It's easier to find what I need now too, there's less junk on the pages for me to sift through."
The most interesting part of the research was that the workflow still took a considerable amount of time; we had reduced it but not by much. There was a perceived reduction in time because of the cleaner UI and the new workflow utilizing AI/ML. Ultimately the history entry was not something the medical board was willing to compromise on so we needed to find innovative ways to give that perceived education in submission time. Pre-populating content for the user as much as possible was one way to achieve this. They still needed to read through the content and confirm it was correct, but they didn't have to manually input it. Also adding moments of delight to the submission process and using friendly conversational language helped with lessening the burden of time.
Final Design
As VetMedStat continues to mature, more and more enhancements have been added and the UI itself has gone through a number of iterations based on both user feedback as well as a company-wide rebranding. Below are some examples of its most recent design implementation.
Login Screen Desktop & Mobile
Dashboard Desktop & Mobile
Medical History Entry Desktop & Mobile
Diagnostic Report Desktop & Mobile
