Master's Research
Development of a novel interactive application for learning the
functional musculoskeletal anatomy of the arm.
About the Project
The aim for this project was to create a proof-of-concept interactive teaching application that demonstrated the musculoskeletal relationships of the arm. It was undertaken to supplement learning materials for kinesiology students, undergraduate anatomy students, medical students, instructors and lecturers.
The application provides users with the ability to directly manipulate muscle and joint movements, encouraging students to learn beyond rote memorization. The combination of simplified representational musculature, dynamic selectable elements and self guided learning, inherent to this project, represent an altogether unexplored combination for teaching musculoskeletal anatomy.
Research Committee
Michael Corrin BFA, BA, Hons BSc, MScBMC
University of Toronto Department of Biology
Biomedical Communications Program
Judi Laprade BA, BScPT, MSc, PhD
University of Toronto Department of Surgery
Faculty of Medicine
An screen-cap from an earlier design document. A dark interface was used since research indicated that this was optimal for content driven applications that focus heavily on visual content. It was intended to draw attention to necessary elements: anatomical structures and associated text.
Some early concept designs, sketches and ideas for the project.
A screen-cap from a more recent design document. The muscles and joints present a unique problem when it comes to appropriately organizing them into an intuitive list for user navigation. Ultimately, a dual sidebar design was deemed the best option for modules involving both joints and muscles.
Design & Wireframing
Wireframes were produced, amended and remade iteratively. Each time, design changes were made to the layout, navigation structure, status change notification system, visual grouping of elements, and discoverability of elements, among other things. These design decisions were informed by evidence based principles set forth by Usability.gov as well as the documentation provided by Nielson Norman Group. Additionally, Guidelines provided by Google Material Design were consulted.
Model production workflow.
The final models: humerus, ulna, radius and hand.
The final model: scapula.
3D Model Production
Bones were scanned using a NextEngine 3D laser scanner. The crude meshes were taken into ZBrush where the models were reshaped, proportionally adjusted, texturized and cleaned up utilizing other bones, and texts for reference. The aim was to create accurate models that possessed a complete set of recognizable surface features not immediately apparent on many bones. Throughout the process, topology was optimized for the application, keeping runtime performance in mind. Final set-up and positioning of skeletal elements was done in Autodesk MAYA.
Development workflow.
Development in C# & Unity
During development, the project was split up granularly into small prototypes, allowing each functionality and UI asset to be built individually in Unity, with C#. Gradually, the components/scripts were combined resulting in larger, more robust proofs of concept. The final composition, the application itself, was evaluated for effectiveness with usability testing and updated subsequently.