Graduate Research: Atlas of Craniofacial Anatomy & Maxillofacial Pathways of Infection

How does one organize over a hundred different structures in order to depict spaces that can’t be seen during traditional cadaver dissection?

Problem:

Ever heard the story that a bad tooth infection can give someone a heart attack? In fact, odontogenic infections are capable of passing from a tooth to the mediastinum through a network of interconnected fascia, which has life-threatening consequences. The pathways of these infections is predictable, but difficult to study due to the fact that the spaces they move through are not readily visible. In cadaver dissections, they are often destroyed. Other times, these spaces are imperceptible until they swell with infection. No 3D resources exist to aid in depicting the complex pathways of infection.

Solution:

As a collaboration with the UIC College of Dentistry's Dr. David Reed and co-investigator James Riley Jones, this web-based application depicts standard craniofacial anatomy in addition to the potential spaces for odontogenic infection. It is organized by the various spaces, and users can explore and filter their results utilizing the left-hand menus.  This application allows users to isolate specific spaces, read more about each one, and explore the most common pathway of infection, the mandibular pathway.

The 3D assets were built by co-investigator, James Riley Jones. UI/UX design and programming done by Kelly Cloninger.

 

This application offers never-before visualized images of the individual craniofacial spaces, and how they exist when completely isolated from all other structures. It also allows users to explore the spatial relationships as related to CT scans, which was determined to be crucial for future clinical practice.

 

The user interface was designed to be familiar to other applications so that users found it as intuitive as possible to navigate. There are five main sections of the application:

  • Main viewport where the 3D models are shown

  • Left-hand menu that categorizes each space and its contents

  • Bottom toolbar for toggling various elements on and off

  • Right-handed CT views that can be toggled and scrubbed

  • Top tabs to navigate to the help screen, main menu, and various modules

Along with various self-exploration elements of the main application, self-assessment tools were designed to allow the user to gauge their level of knowledge as they moved through the modules and guide them towards information that may be relevant for future practice, verified by content experts.


Process

Deliverable: WebGL application that is free and accessible for all individuals

Client: Dr. David Reed UIC College of Dentistry

Audience: Dental students, medical students, faculty, and professionals

Workflow: Proto.io prototyping, Unity and C# coding, Zbrush for 3D models.

The goal of this research project was to establish best-design practices for building educational medical applications. Presently, many medical applications prioritize the information delivered over the fluidity and design of the user interface. This results in something that is confusing and cumbersome for users, hindering overall learning goals. 

There is also an emphasis placed on  creating fluid self-assessment tools, which have been shown to lead to positive learning outcomes for students. These provide a way for individuals to gauge their mastery of material as they work through the application.

The development of this application occurred in three stages. Original prototypes were sketched, based upon current research in the area of medical visualization and application development. These were refined into digital prototypes, and tested in 1-on-1 sessions with the target audience. The prototype was further refined, then built in Unity Engine for WebGL. The 3D models were created concurrently by co-investigator James Riley Jones and assembled together in Unity. 

Information Organization

A large amount of research was done in conjunction with subject matter experts in order to establish the relationships of various structures that the atlas would depict. By utilizing flowmaps and visual organization, all of the scientific matter was broken down into its basic components, with special consideration placed in how they interact with one another.

This type of architecture served as the foundation for the entire project, which proved to be faster and easier to reference than purely text-based references over the span of many months.

Ludwigs.jpg

 

Low-fidelity Sketches

Basic sketches, while rarely pretty, serve as a crucial starting point in the design process. They are quick and rough, easily discarded, to test out a large number of interface designs in a short amount of time. 

Depicted is a sketch of all the major elements in the application after the first round of prototype testing: the left-handed menu, bottom toolbar, right-handed CT views, and tabular navigation up top.

Also depicted is a stunning display of artistic mastery of the common smiley face.

 

Digital Prototype 1

This digital prototype, made in proto.io software, sought to examine how users fundamentally interact with the application. Most aspects were static, such as the placeholder image and most of the menus. Overwhelmingly, users were observed utilizing the left column the most, and the location of some buttons proved to be problematic.

Digital Prototype 2

Based on feedback from the first prototype, a second prototype re-arranged various components. A tabular style of navigation and CT data were added. The toolbar at the bottom was drastically simplified, although still proved confusing for many users. In the final application, these were made more explicit.