top of page
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 

  1. Compose questions that require users to apply their anatomy knowledge and develop critical thinking skills

  2. Design visuals that reduce cognitive load, direct attention and facilitate formation of mental models

  3. Design an engaging and easy to navigate UI

  4. Incorporate features that address and adapt to individual user needs

kinundrum logo

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
nati chen

Chelsea Canlas

lead designer

Nati Chen

lead animator

patricia nguyen

Patricia Nguyen

lead illustrator

UI/UX Design

kinundrum introduction wireframe

Case Studies

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

kinundum user profile wireframe

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. 

kinundrum re-kinnect exercise wireframe

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.

kinundrum library wireframe

Library

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

kinundrum desktop web application

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

maryem GIF
alex GIF
Fred GIF
Bernie GIF
Van Diesel GIF
Jenny GIF

Profile Animations

Storyboards

van diesel storyboard

Character Animation Reel

van diesel title sequence

Animatics

Summary Figures

jenny ankle ligament injury
bernie calcaneal tendon injury
van diesel PCL injury
bottom of page