The Fracture Remodeling App: Before & After UX Intervention

The Problem

The human body is amazing! Did you know some fractures can heal on their own in young children?

“Fracture Remodeling” is the final phase of the healing process in young children. It occurs by the growth plate realignment and biomedical changes in the bones. This phenomenon realigns the bone, even after a severe fracture.

The problem? Imagine being a surgeon and trying to explain this phenomenon to a family who’s 3-year-old daughter broke her distal radius (bone in the forearm).

How would you:

Explain to her parents that her arm will heal completely on it’s own without any surgical intervention?
If the parent’s are not native English speakers, how do you expect this conversation to go?
Do you have any visual aids at your disposal to aid you in this conversation?

Would the family really believe their daughter’s arm would heal on its own, without any surgical intervention? Probably not.

The Solution

As a result, an orthopedic surgeon at Children’s Mercy Hospital (CM) had the idea for an app, which can be used to display a patient’s specific fracture details, and watch as the bone realigns itself over time, in 3D. This app was brought to life by an orthopedic surgeon at CM, CM’s Innovation Center, and Trinity Animations Studio.

Some pediatric patients (2 - 13 years), who fracture their distal radius, do not need surgery or any interventions to allow the bone to heal - the bone realigns itself! This can be explained through a mathematic equation, which the orthopedic surgeon used to create this, adaptable, 3D model app.

Roles

UX researcher, UI designer, prototyper, and usability tester (in progress)

Tools

Heuristic evaluation, wireframing, usability testing (in progress)

Duration

2 years - present (2023 - present)

Design Challenges

When I joined the fracture remodeling team, they already had a working app. I was brought into the team to conduct usability testing, however, the first draft of the app needed design changes before we could begin. As a result, I conducted a heuristic evaluation of the system, made design recommendations, and a second draft of the system was created. Our goal is to develop an app to assist in educating patients, families, and care teams on how individual patients (2 - 13 years) can heal without surgical intervention.

We are currently in the process of conducting usability testing with clinical staff at Children’s Mercy.

Design Process

Step 1: Define the Problem

Observations

Months before CM and Trinity Animations Studio began working together on the tablet app, I was asked to determine what problem we were trying to solve for our patients, families, and care teams. I observed the orthopedic surgeon and his staff, for 4-hours, over a period of 5 days in their outpatient clinic. During these observations, I came into multiple patient rooms with the surgeon and other care staff to determine how they were explaining the distal radius fracture healing phenomenon.

I watched staff use the patient’s own x-rays and Fracture Healing in Children book to explain the healing process. Based on my findings, I concluded that a full app was unnecessary, due to the cost of the build, as compared to the resources they were currently using in clinic. During my observations, I saw that the book being used was effective at displaying the relevant information. While some parents were still unsure about the fracture healing on its own, the book and education from the orthopedic surgeon was solving the problem.

However, about 6 months after giving my recommendation of not needing an app, I got an email from CM’s Innovation Center asking if I could conduct usability testing on their new fracture remodeling tablet app… Unfortunately, the team did not listen to my original recommendations and developed the app anyway.

When I joined the team, they already had a version of the tablet app developed. As an embedded UX Specialist at CM, I was unable to decline participating in the project.

Fracture Healing in Children Book

Step 3: Ideate

Based on the findings from the HE, I made recommendations for the design. After reviewing these recommendations with the internal CM team, and going back and forth on certain design concepts, I began sketching out ideas for the design.

Step 4: Prototype

Once I had ideas for the design, I went to work developing a prototype.

Step 5: Iterate

This prototype has been developed and put onto two CM tablets. Once our IRB is approved, I will conduct usability testing and iterate based on the findings.

There are a few aspects of the current design that I am already reconsidering and will focus on during testing.

The placement of “dorsovolar” and “radioular” degrees at the top of the screen. I anticipate people missing these during testing and trying to enter the information into the degrees information in the middle of the screen.
The spacing of the menu. Now that the design is developed, I’ve realized that there needs to be more space between the menu items. I’d like to group each section and space them out better.
The speed increase/decrease. I’ve had a few comments from the team and developers saying that the function of this section is not clear. I plan to have a task in the usability test to determine if this design needs to be changed.

Step 6: Usability Testing

Usability testing is currently in process.

Conclusion

The fracture remodeling app is still in progress, and we will continue to iterate. Through our work so far, we have met my design goal to develop an app that will assists in educating patients, families, and care teams on how individual patients (2 - 13 years) can heal without surgical intervention.

Already during usability testing, I have seen that there are a few issues in the current design that will need to be changed (i.e., “Terms & Conditions” not “Term & Condition,” and increase the size of the menu). Once testing is completed, further changes will be made, until the system is ready to be used in clinic.

View recording of app design in Vimeo.

Step 2: Research

The screenshots to the left depict what the tablet app looked like when it was first handed off to me. I was asked to conduct usability testing. However, I decided there needed to be a few design changes before I could conduct testing. As a result, I decided to conduct a heuristic evaluation of the app.

Heuristic Evaluation (HE)

I used Nielsen Norman’s 10 usability heuristics to complete this evaluation. View results of entire HE here.

Task: Display the distal radius fracture overtime for: