Creating a Web Application for Surgeons

Allowing spine surgeons to compare pre and post operation patient data
Sponsored by Stryker and UEGroup / January-May 2020

Surgeons need a cross-platform application to monitor the recovery process of their patients in order to measure the effectiveness of implants. There must be an emphasis on data visualization and communication to ensure that the pre and post op data can be interpreted correctly. For the purpose of this project, we focused on a Posterior Lumbar Inter body Fusion.

The goal is for our solution to incorporate all Stryker implants. Surgeons should be able to view data to determine if different implants are successful and if they should or should not be used for future surgeries. Stryker should also be able to access this data to look at the success of their implants. Surgeons should also be able to look at individual patient data.  

My Role

Team Lead

Tool Used

Figma
Keynote

Timeline

1 semester

Users

It was important to keep the user groups in mind when designing our final solution. Our primary user group is a spinal surgeon, whose goal is to be able to access patient from pre and post operation in order to visualize the success rate of different implants.

Stryker is a secondary user whose goal is to view implant success on their implant parts to determine which parts to use.

Deliverables

  1. A report that outlines the design process (documentation)
  2. Written synthesis of research findings
  3. Mockup: A hi-fidelity, interactive prototype for desktop

Research

We wanted to dive deeper into our understanding of the implant and the patient / surgeon process. In order to do so, we divided up our secondary research topics:

We also conducted comparative analysis to look at what existing products and platforms exist currently. Furthermore, we conducted interviews in order to get feedback from real patients and surgeons to understand their experiences and learn about the surgery process.

From this research, we learned the following:
  • Health data visualizations tend to focus on three areas: Healthcare Provider (data), Personal Health (practices), and Population Health (volume)
  • Quantitative measurements include alignment, control, and balance
  • Questionnaires, indexes, and scores can be used as measuring tools
  • Surgeons look for bone growth, solid fusion, and spinal stability
  • Features used to understand patients include status tracking, feedback through portals, and performance reports

As we continued our design process, we continued to come back to more secondary research every week because this was a problem space that required such a deep knowledge of a complicated subject (spine surgery). We had the following questions:

  1. How is data visualized in the health field?
  2. What is being used currently for these visualizations?
  3. What qualitative and quantitative data do surgeons look at to measure performance?
  4. What do surgeons look at during each appointment? How does this differ over time?

Ideation

Sketching

We started ideaing using low-fi sketches to put our ideas on paper. Individually we created a series of four desktop pages that exemplified a dashboard, patient data, implant data, and brand success.After individual sketching, we did a master list activity. We managed to create a master list that included the features that many of us agreed to provide or consider for the surgeon’s application. This will help us with detailed ideation as we move further into the design process. The list is as follows:

  • Visualizing adjustment
  • Pre-op visual
  • Patient comparison
  • Graph of angle progression
  • Pre/post-op comaprison
  • Add comments
  • Recent activity
  • Search
  • Pain level scale
  • 2 different headers
  • Next meeting date for patient's info page
  • Progress bar for patient page
  • Visualization of implants
  • Interactive visual input
  • Flagged/bookmarked patients
  • Filter patients
  • Calendar
  • Overall implant success
  • Hover over feature
Lo-Fis

Next we moved on to low-fi mockups of our design. The goal of our low-fis was to implement what we learned from our preliminary sketches and create a first iteration of what our final product will look like. Using Figma, we created lo-fi mockups of what we thought the layout of the desktop app would look like. Since these are lofi mockups, the majority of the screens are filled with place holders instead of actual information. As our process continues, we will continue to move towards higher fidelity mockups. Below are a few of the screens:

Interviews

Jean Mertz Lee
UX Designer, Wife of Surgeon


Protocol: Asked questions on her husband’s daily and surgical task flow and how to visualize data that can be interpreted by both Stryker and surgeons.

Takeaways:
  • Representatives are the party who choose the implant
  • Make scans more prominent
  • Stryker and Surgeon have different goals
  • Make it easy for surgeon to get the info they need
  • What about other users such as nurses?
Brandon Moore
Principal Engineer, Advanced Dev. Spine

Protocol: Asked questions on what
success and quantitative measurements of implants looks like as well as the breakdown of a spine implant as a whole

Takeaways:
  • Fusion is the ultimate measure of success
  • Surgeons evolved from looking at x-ray to measuring success based on how the patient feels
  • Brand distinction might not be important (K2M and Stryker are merging)
Brody Ring
Medical Sales Rep, Boston Scientific


Protocol: Asked questions pertaining to what role a representative plays in implant surgeries, how they choose a specific implant, and what dictates a successful surgery.

Takeaways:
  • The representative chooses the parts to use in the surgery, not the surgeon
  • The surgeon and representative communicate to determine success of parts
  • Representatives need to see implant data
Mid-Fis

After our lo-fi mockups, our team created a master list of all the features we liked about each person's lo-fi mockups. We then did more iterations of primary and secondary research and applied all to our findings to mid-fi mockups. Within these mid-fi's, we did three major iterations:

  • 1st iteration: We had each team member individually apply the items from the master list to their individual lo-fi design, and translate it into a mid-fi
  • 2nd iteration: We combined designs from members on each of 2 teams into one design, thereby creating 2 combined mid-fis with the best features from the individual mid-fis.
  • 3rd iteration: We did more research into how the data portions of our design could be visualized, since were mostly placeholders. We then translated our data visualization research into another iteration.

Usability Testing

Scenario: “Let’s pretend that you’re a surgeon. You specialize in spine surgeries and more specifically, posterior lumbar interbody fusions. Today, you have your first appointment with Rhonda Adams, a patient receiving the spine implant. As you converse with her, you need to complete a few tasks prior to the surgery. Let’s begin.”

Task 1: “Fill in the patient profile with the information you collected on the first appointment”
Task 2: “In order to plan for your surgery, look at previous implant success for the Posterior Lumbar Interbody Fusion and the determine which screws you want to use for that surgery"
Task 3: Update the data in Rhonda’s profile and her newest scan
Task 4: Go into Rhonda’s profile to view all data

What we've done:

We also suplemented our testing with sponsor comments/feedback and reddit surveys. We then moved into high-fidelity prototypes.

Hi Fidelity Prototypes

Below is the final working hi-fidelity prototype that we delivered to our sponsor.

Final Solution

We have 2 sides to our web application, depending on the user group (surgeon or stryker). This login to the portal:

Surgeon Side
List of Patients
This page is where the surgeon sees the list of his patients. He can sort his patients for easier access as well as create a new patient profile.
Navigation
This pages shows the navigation for how the surgeon can return to his past patient screens as well as log out.
Individual Patient
This screen shows a page for a specific patient, focusing on their scans and surgery information. The surgeon has the ability to comment on particular scans, view the angle of adjustment for the spine, and get more patient information using the dropdowns.

The following three pictures show more information on what the tabs look like when clicked. The information shown are important metrics in determining the success of the surgery for the surgeon.

Stryker Side
Choosing an Implant
This screen gives the stryker employee a way to filter by implant type to get to the implant they want to see the data for.
Implant Overview
Employees also have the ability to select different parts to see comparisons and decide which to use in surgeries. Each of these parts can be clicked on for further information.
Comparing Implants
Here is the screen showing the comparison of those parts for side by side comparisons.
Comparing Implants Cont.
Here is the screen showing the comparison of those parts for side by side comparisons.
Navigation
With consistency to the surgeon side, this screen shows the side bar navigation for the stryker employee logged in.

More Work

Final Presentation:

Below is the slides for the final presentation we presented to over 100 people, including our sponsor.

Final Project Documentation:

For more detailed information about our process throughout the semester, here is our full documentation.