• LinkedIn - Grey Circle
  • Vimeo - Grey Circle
  • YouTube - Grey Circle
  • Instagram - Grey Circle
  • Twitter - Grey Circle

©2019 by Natividad Chen 

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 development and will be used by Dr. Judi Laprade in a UofT kinesiology anatomy course in 2020.

 

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

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