Info: I was contracted through Positron to build a 3D interactive prototype for a medical team within USC that aims to help doctors set up the proper pre-operation strategy to approach hip implant surgery as well as act as a sandbox training tool for students. I learned a lot about the tools and calculations that goes into a hip surgery by working with a team of surgeons as well as researching a lot of the math that goes into the pre-surgery planning.
What was easy?
ThreeJS made the visuals a lot easier than I thought it would have been to implement something interactive like this on in a browser. At first, I considered a standalone product like Unity which had a lot of skeletal features and visuals included, but ultimately the scope was for this to work on any platform, mobile or desktop, especially older machines which manage to live a long life in many office. The importance of this prototype was not only to be functional and useful, but to raise the bar on what medical training tools can be in terms of visual appeal and simplistic interaction. For my first foray into ThreeJS, there was a lot of learning how the library functioned, but after looking through some examples and doing some tests, it quickly became comfortable given how the framework operates more akin to a game than it does a web app.
I've seen so many badly designed and frustrating medical apps out there that are industry standard that it makes me wonder why it's acceptable for the bar to be so low in a field that is so important for the professionals in it to, you know, be at their best. If anything, I would want to make sure doctors have the latest and greatest tools available to them if the technology and standards of design exist in other fields.
What was tough?
Getting the skeleton completely customizable for various patient types was a big challenge. Using the normal rigging system wasn't really an option, so I built a system that procedurally built each section of the body, with detailed focus on the hips, legs, and spine, that allowed for tweaking of each bone's position and rotation (even unnatural settings) to still be properly accounted for when calculating the important angles doctors use for planning, both in their sitting and standing positions. When animated, the angles and measurements react accordingly, giving doctors the ability to test out various patient types and which implant orientations would work best.
It was interesting getting a perspective from doctors that may not be familiar with the user interfaces of other 3D applications that many of us take for granted, either though playing games growing up, using popular apps, or being in the creative development space. What is priority in one case could be completely useless in others, even if it is considered an accepted standard to UX. Trying to understand and mix both cultures was a daunting but eye-opening experience that ultimately made the product a lot easier to use and it's concept better presentable to the intended audience. Learning how to give pushback to and accepting direct critique by seasoned doctors with minutes to spare before returning to surgery was an unexpected bonus! (っ˘ڡ˘ς)
Dates: June to August 2015
APIs/Tools: ThreeJS, PaperJS, Maya, Photoshop
Languages: JavaScript, HTML5, CSS3