Case Study: Interactive 3D educational tool for medical professionals

The challenge.

A top global pharmaceutical company, approached us with the request of developing an interactive 3D educational app. It would be designed to explain to healthcare professionals, the signs and symptoms of a rare condition, to help them to differentiate from similar conditions, in order for them to correctly diagnose and then prescribe treatment that works.

The app was to be developed for iOS and Android and within an incredibly tight budget. I had never worked with 3D but as always, challenge accepted.

Prototyping in 3D

We researched into 3D and found ThreeJS, a library that would allow rendering of 3D models in HTML. An initial model was knocked up (a cat) with spheres floating in a 3D space which could be clickable to trigger an alert box, working in a web browser.

Now, we know 3D can be done, quickly… 

Conversion to TypeScript for Ionic

I have plenty experience in AngularJS and previous versions of Ionic but I discover that Ionic now used TypeScript. No problem. In my mind, I’m a software engineer, it should be easy enough to pick up a new language/variant/framework and apply clean code theory. A little StackOverflow to begin with but then I’m good.  Converted all of the prototyped code over to TypeScript, still not working. Oh crap… ThreeJS doesn’t yet support TypeScript. So new wrappers are introduced to act as adapters, allowing the use of the original JS libraries in a TypeScript environment but this takes time.

Mobile app development

I now have only a few days to build the full app. 

  • Updated the 3D model, with zoom, panning and rotation
  • Configured clickable hotspots to trigger popups with images and video content
  • Created custom animations and transitions between the hotspots, that rotate the camera, zoom in/out automatically as smooth as possible, to give it a computer game style feel. 

Content is applied, designs updated and app tested across multiple devices, just in time.

* Text blurred to protect the medical/scientific research content.

3D for Web, iOS and Android

In the space of a week, I had an app developed in a new language (variant of) a new framework, with 3D, which again was totally new to me, ready for review. Being a Pharma client, there were then months of changes for regulatory reasons, but the core work was ready.  The app was then rolled out across a global pharmaceutical’s commercial team, translated across multiple languages, re receiving great feedback from the client.

Skills and technology used

Hybrid (iOS and Android) mobile app devlepment with: Ionic, TypeScript, JavaScript, ThreeJS, Angular, HTML, and CSS.

Mobile app developer for hire.

Regardless of the language, framework or project, I thrive on a challenge in web/software development. If you have a mobile app development project like this, that needs a technical architect, lead developer or product owner to deliver, please get in touch.