
Masters Research Project
For my Masters Research Project at the UofT BMC program, I collaborated with Chelsea Canlas and Patricia Nguyen to design and develop a desktop web application on lower limb anatomy for undergraduate kinesiology students. The application is currently in use as part of a UofT kinesiology anatomy course taught by Dr. Judi Laprade.
This application received an Award of Excellence in the Student Interactive Media category from the Association of Medical Illustrators in their 2019 salon.
BMC Faculty Supervisors:
Michael Corrin BFA, BA, Hons BSc, MScBMC
Jodie Jenkinson BA, MScBMC, PhD
Derek Ng BSc, MScBMC, PhD
Shelley Wall AOCAD, MScBMC, PhD
Content Advisor:
Judi Laprade BA, BScPT, MSc, PhD
Date: In Development
Check out more process work on our tumblr blog.
About the Project
Kinundrum, a combination of the words “kinesiology” and “conundrum”, guides students through lower limb biomechanics case studies at increasing levels of difficulty. The case studies present animated injury scenarios, after which students solve interactive problems accompanied by 3D models, animations, and illustrations of the
affected anatomy.
Goal
To engage undergraduate kinesiology students in active learning of lower limb anatomy
Objectives
-
Compose questions that require users to apply their anatomy knowledge and develop critical thinking skills
-
Design visuals that reduce cognitive load, direct attention and facilitate formation of mental models
-
Design an engaging and easy to navigate UI
-
Incorporate features that address and adapt to individual user needs

Founded on the visual metaphor of “connecting dots to see the whole picture”, Kinundrum's logo symbolizes the systemic analysis required to solve a case study.
Roles
Together we co-designed the UX design, with Chelsea as the lead UI designer and Patricia as the lead illustrator. We worked with student developers to build the application.
As the lead 2D animator, I created the introductory case injury animations. This involved the scripts, storyboards, sound design, animatics, animations and compositing. In addition, I produced the logo animation and the character profile animations. Based on Patricia’s designs, I drew several illustrations (summary figures) featured at the end of each case study.


Chelsea Canlas
lead designer
Nati Chen
lead animator

Patricia Nguyen
lead illustrator
UI/UX Design

Case Studies
Each case study introduces an animated injury scenario, after which students solve problems accompanied by 2D illustrations, animations, or interactive 3D models.

User Achievements
There are 6 case studies, organized in 3 tiers of difficulty. Students earn badges by completing case studies.
UI/UX Design Documentation
Conceptualizing and implementing our web learning application is an iterative process that includes research, prototyping, and testing.
Here are links to files documenting these steps.

Re-Kinnect Exercises
If students answer certain exercises incorrectly, they are redirected to a “Re-Kinnect” exercise designed to review harder concepts. These include animations or sliders.

Library
After completing a case study, all its exercises are added to the Library where students can review them.

Animations
At the beginning of each case study, students watch an animated injury scenario. I strove to accurately depict the mechanism of injury, while keeping the animations fun to watch. We opted for a graphic, ‘cartoony’ style, but the movements of the characters are closely based on live action reference.
Each animation follows a consistent format. The mechanism of injury is shown in slow motion to emphasize the affected anatomy, and the injured area of the body is highlighted.
The Case of the Tennis Mom






Profile Animations

Storyboards

Character Animation Reel

Animatics
Summary Figures


