Planmeca

Mromexis dental radiology viewer app

 

 
 

TL;DR


 

I designed the UX for a cross-platform app for viewing 3D volumes, X-ray images and patient data.

 

My role


 

I needed to create the concept out of Planmeca's existing products. I did benchmarking and competitor analysis to figure out the best way handle 3D volumes on touch UIs.

I was the only UX designer on the project and managed the project on the design directly with the client. I created all the wireframes and interactions and created the basis for the user manual from the documentation.

Besides me, Jarkko Lunnas handled the graphics. I also handled the communication directly to the developers, instructing them on getting things right.

 

Brief


 

Bring a dental imaging application to all platforms (iPad, iPhone, Android Tablets and phones, Mac OSX, Windows and Web), while keeping the UI as similar as possible between each platform.

Because of the need to render realtime 3D, a cross-platform game engine was used, which posed some challenges for the UI and UX.

Another challenge was to create all the gestures to manipulate the 3D viewports. 

 
 
 

To maximise the space on the viewport, I designed the controls so, that only the icons are visible for quick manipulation and if the arrow in the middle of the control bar is tapped or clicked the controls open in full view. This means that some of the controls are hidden as are the tool descriptions.

The top image is the wireframe and bottom image the actual visual design, which follows the wireframe very closely as the client was extremely happy how the wireframes already looked good.

There are features in these designs that didn't make it to the currently released application as it was designed for the next release as well.

 
 
 

On the left side of the image viewer we have the patient details. This includes the patients name, picture, ID and age.

The small bubble will open up general comments on the patient. Below that the "This Image" section shows all the comments that different dentists or radiologists or other personnel has written about the image in question.

The "Activities" section shows all the images taken from the patients in chronological order of their comments i.e. the last commented image is on the top and not the image that was taken the last. 

There are many type of comments that have a slightly different look. A general comment appears with speech bubble icon, a radiological comment appears as an icon with a hand holding an x-ray. 

As one patient can have several images depending on the care needed, an image carousel is on the bottom of viewport. These images are in chronological order of the time that they were taken. 

 
 
 

Here the annotation and measuring tools are used. As an annotation is created a tooltip inside the annotation box is already giving a hint on what to do next.

When editing the annotation, a box appears on the bottom of the screen that deletes the annotation when dragged on to.

 

What I learned


 

Stay professional! Study the subject matter fully (in this case: dentistry, radiology, voxels and touch controls), in order to communicate clearly and precisely. I did my homework and things were smooth sailing from the beginning.

By delivering more than the minimum viable product (some parts were already added in to the app, but never implemented), but within the budget and time constraints, the client stays happy and comes back for more.